HEX・RGB・HSL:同じ色を3つの方法で表す

編集ソフトがHEXを求め、別のファイルがRGBやHSLを使うことがあります。変換は同じ色を渡すためで、色を自動改善したり画面と印刷の一致を保証したりするものではありません。

HEXはRGBを短く書いたもの

6桁のHEXは2桁ずつで赤・緑・青を0〜255で表します。3桁の省略形は各桁を繰り返し、間にゼロを入れるのではありません。

この変換は不透明なsRGBを扱い、3桁または6桁のHEXを受け付けます。CSSの8桁表記はアルファを追加できますが、その透明度は現在の対象外です。

参考資料: W3C CSS Color 4 — Hexadecimal RGB and HSL

HSLは色の説明方法を変える

色相・彩度・明度は、RGBの3チャンネルを闇雲に動かす代わりに、彩度を下げる、明るくするといった方向を考える助けになります。

HSLの明度は人の感じる明るさを均等に測る指標ではありません。色相が違えば同じ割合でも同じ明るさや文字への適性を保証しません。

参考資料: W3C CSS Color 4 — Hexadecimal RGB and HSL

変換だけでデザインを検証したことにはならない

読みやすさが目的なら文字を実際の背景と合わせて確認します。正しいコードやきれいな見本だけでは十分なコントラストの証明になりません。

印刷や別の色空間へ移るときは元の参照を残します。画面校正やCMYK変換ではなく、HSLから8ビットRGBへ戻すと小さな丸め差が生じることがあります。

例:色を変えずに短いコードを展開する

#369は#336699になります。33・66・99の組はRGBの51・102・153で、3・6・9ではありません。同じ色はHSLで色相210度、彩度50%、明度40%です。

3段階の別の色ではなく、同じ色の3つの説明です。明度を60%にすると別の色を選び、アルファを足せば不透明な元にはなかった透明度の判断が加わります。

参考資料