カラーコンバーター

カラーコンバーターについて

HEX・RGB・HSLのどれを貼り付けても形式を自動判別し、三つすべてに変換します。#fffのような3桁表記、rgb(255 0 0)のようなカンマなしの新しいCSS構文、接頭辞のない「255, 128, 0」も受け付けます。#rrggbbaaのようにアルファ付きの値は、アルファを捨てて色だけを変換します。

三つの形式はどれも同じsRGB色空間を別の書き方で表したものです。HEXとRGBは完全に同じ情報で、HSLはそのRGBを色相環の角度・彩度・明度に並べ直したものです。変換そのものは単純ですが、HSLのL(明度)が人の感じる明るさと違うことが、デザインでしばしば問題になります。

HSLの明度50%は同じ明るさではない

黄色#ffff00はhsl(60, 100%, 50%)、青#0000ffはhsl(240, 100%, 50%)です。Lは同じ50%なのに、画面では黄色はまぶしく青は暗く見えます。HSLのLは最大チャンネルと最小チャンネルの平均にすぎず、人の目が緑に最も敏感で青に最も鈍いことが反映されていません。

WCAGがコントラスト比の計算に使う相対輝度は、線形化したR・G・Bに0.2126、0.7152、0.0722を掛けて足します。これで見ると黄色は約0.93、青は約0.07です。Lをそろえて色相だけ変えたボタン色で、白文字が読めるものと読めないものが出るのはこのためです。

HSV・OKLCHとの違い

このツールが扱うのはHEX・RGB・HSLの三つです。画像ソフトのカラーピッカーでよく見るHSV(HSB)は色相はHSLと同じですが、明るさの軸を「最大チャンネルの値」と定義するため、純色の赤はHSLでL 50%、HSVでV 100%になります。

OKLCHは2020年にBjörn Ottossonが発表したOklab色空間を円筒座標(明度L・彩度C・色相H)で表したもので、CSS Color Level 4にoklch()関数として取り入れられました。Lが知覚上の明るさに近くなるよう設計されており、黄色は約97%、青は約45%です。Lを固定してHだけ回せば明るさのそろった配色が作れる点がHSLとの最大の違いです。このツールはOKLCHへの変換には対応していません。

sRGBの色域とHEXの限界

HEXや0〜255のrgb()はsRGB(IEC 61966-2-1)の範囲内の色しか表せません。最近のスマートフォンやノートPCの多くはより広いDisplay P3を表示できますが、その外側の鮮やかな緑や赤はHEXでは書けず、CSSではcolor(display-p3 …)やoklch()を使います。

また1チャンネル8ビットで256段階しかなく、HSLを整数に丸めるとHEX → HSL → HEXで元の値に戻らないことがあるため、このツールはHSLを小数第1位まで表示します。sRGBの1,677万色すべてで確かめると、小数1桁あれば全色が元のHEXに戻ります。他所で整数に丸められたHSLを入れた場合は、チャンネルが1ずれることがあります。

例

使い方

1. HEX、rgb()、hsl()のどれかをそのまま貼り付けます。
2. 三つの形式の値とプレビュー色を確認します。
3. 必要な形式をコピーします。

よくある質問

関連ガイド

• 色のコントラストとアクセシビリティ：WCAGの式の由来と限界、各国の基準