カラーコード 変換 — HEX・RGB・HSL・OKLCHを相互変換

カラーコード 変換ツールとは

スタイルシートではHEX、デザインツールではRGB、配色ではHSLやOKLCHと、色の値はさまざまな形で登場します。このツールでは、どの形式で色を入力しても、HEX・RGB・HSL・OKLCHをまとめて表示し、色をプレビューして、白と黒の背景に対するコントラストもチェックします。

使い方

1. 色を入力するか、入力欄の横のカラーピッカーを使います。例：#1e90ff、rgb(30 144 255)、hsl(210 100% 56%)、oklch(0.65 0.19 250)
2. 下に表示されるHEX・RGB・HSL・OKLCHの値から、必要なものをコピーします。
3. コントラストの欄で、白と黒の背景それぞれに対する比率と、AA・AAAを満たすかを確認します。デザインで別の背景色を使っている場合は、背景色に入力するとその組み合わせをそのままチェックできます。
4. 透明度のある色は、8桁のHEX、rgba()、hsla()、/ alphaの形式で出力されます。

仕組み

• 入力できるのは、HEX（3・4・6・8桁、#は省略可）、CSS Color 4の148個の色名（tomato、rebeccapurpleなど、大文字小文字は不問）とtransparent、rgb()/rgba()（カンマ区切りとスペース区切りの両方、パーセントも可）、hsl()/hsla()、oklch()です。
• OKLCHは、Björn OttossonによるOKLabの定義（2020年）の標準行列を使います。sRGBを線形化し、LMSの立方根を経てL、a、bを求めます。Cは(a, b)の長さ、Hはその角度です。
• 出力の精度は、HSLが小数点以下1桁、OKLCHのLとCが4桁、Hが2桁です。HEXに戻すと元の値がぴったり再現される精度です。
• sRGBの色域外のOKLCHを入力した場合は、チャンネルごとに0〜255に切り詰め、お知らせを表示します。
• コントラストはWCAG 2.xの相対輝度に従います。表示する比率は小数点以下2桁に丸めますが、合否は丸める前の値で判定するので、4.499が4.5として合格に見えることはありません。

例

入力	結果
#ffffffと黒	21:1、すべての基準に合格
白の上の#777777	約4.48:1、通常のテキストはAA不合格、大きなテキストは合格
#ff0000	oklch(0.628 0.2577 29.23)
#ffffff	oklch(1 0 0)

補足

• 本文のテキストは、AAの通常テキスト（4.5:1）を最低ラインと考えてください。大きなテキスト（18pt以上、または14pt以上の太字）なら、AAは3:1で足ります。
• 色だけで意味を伝えず、アイコンやラベルも添えてください。コントラストのチェックで測れるのは、テキストと背景の明るさの差だけです。