彩りの大地 Laboratory /カラージェネレータ

ぺぇじへっどらいん

カラージェネレータ

Now Loading... Now Loading...
Javascriptを読み込んでいます。OFFの場合はこのままです。

その通り、カラージェネレータです。
HEX(カラーコード)、RGB、HSL、HWB の4種類に加え、 任意のワードを突っ込んでジェネレートするフリーワードカラージェネレータを搭載。
さらには HEX、RGB、HSL、HWB については相互の値にエクスチェンジする機能を搭載。

フリーワード以外は例によって数値のクランプ処理(有効範囲値への差し替え)・異常値対策も一応搭載済。
カラーコードは「#」を入れても入れなくてもどちらでも動作。

ついでにalpha(透明度)値の設定項目と、alpha値の10進レート値とHEX値とのエクスチェンジ機能も追加。
エクスチェンジ後のHEX値が8桁だといろいろと煩わしいのでalpha値用の項目は独立させて表示。
同じ理由でHEXの入力項目についてもRRGGBBAA部分とは切り離してAlpha用の2項目を用意している(内部的にも1項目はrrggbbまでしか判定しない)。

ちょっとしたtips

#RRGGBBAA
HEXについてはこの通り8桁までの表示が実装されている。AAの部分はAlpha値だがこれもHEX(16進)で入れる必要がある。
色を見るだけなら#RRGGBBだけで間に合うのであんまり意識せずともよい。透明はその後の話。

rgb(255, 204, 204) rgba(255, 204, 204, 0.75)  hsl(0, 100%, 90%)  hsla(0, 100%, 90%, 0.75)
古い形式。最近では以下の通り「,」で区切らない形式が使用可能。
rgb(255 204 204) hsl(0 100% 90%)
alpha値を指定する場合は rgba hsla 等のように「a」を入れずに「/」を使って表記する(省略した場合の規定値はもちろん100%)
rgb(255 204 204 / 75%) hsl(0 100% 90% / 75%)

hwb(0 80% 0%)  hwb(0 80% 0% / 0.75)
元々新しいものであるため「,」区切り形式やhwbaのようなやつは存在しない。

カラーコードは「これ」です
rgbaだと「これ」です
検索結果の末にそのように出力されるようになったGoogleさん。だが……
実際に色見せろや(^^#)
……そうなるケースが頻発しがちなので思い切って作ることにした経緯でした。w