ツールをここにピン留めできます。このブラウザに保存されます。
ツールをピン留めすると、そのステッカーがここに並びます。
色を HEX、RGB、HSL、HWB、OKLCH、OKLab の間で変換し、WCAG のコントラストを確認して、濃淡のスケールを作成します。
大きな文字、24 ピクセルで表示
通常の文字、16 ピクセルで表示。この文が読みにくい場合は、この組み合わせのコントラストが足りません。
コントラスト比（WCAG 2）
この色の色相とクロマのまま、OKLCH の明度を 11 段階に変えた色です。sRGB で表示できない部分はクロマを下げています。色見本を選ぶと、その hex コードをコピーします。
HEX、RGB、HSL、HWB は、Web の標準の色空間である sRGB の色を書き表す 4 つの方法です。HEX と RGB は、赤、緑、青の各チャンネルをそれぞれ 0 から 255 の値で直接指定します。HSL は色相の角度、彩度、明度で指定し、HWB は同じ色相の角度に、混ぜる白の量と黒の量を加えて指定します。これらの間で変換しても、変わるのは表記だけで、色は変わりません。
#5a3ff080 のような 8 桁の hex コードや、rgb(90 63 240 / 0.5) のようにスラッシュの後に付けた 4 つ目の値は、アルファチャンネルを表します。スペース区切りの形式は CSS Color Level 4 の構文で、現行のすべてのブラウザで使えます。カンマ区切りの rgba(90, 63, 240, 0.5) は、古いツール向けに用意しています。
OKLab は、2020 年に Björn Ottosson が設計した色空間で、数値上の等しい差が目にも等しい差に見えるように作られています。OKLCH は同じ色空間を極座標で表したもので、0 から 1 の明度、クロマ（色の鮮やかさ）、色相の角度で指定します。OKLCH で明度が同じ 2 つの色は、ほぼ同じ明るさに見えます。HSL ではそうはならず、明度 50% の黄色と青では明るさが大きく異なります。
OKLCH では、sRGB の画面では表示できない色も表せます。そのような色を入力すると、このツールは明度と色相を保ったまま、色域に収まるまでクロマを下げ、そのことを知らせます。
WCAG 2 はコントラストを (L1 + 0.05) / (L2 + 0.05) と定義しています。L1 と L2 は、明るい方の色と暗い方の色の相対輝度です。結果は、同じ色どうしの 1:1 から、白地に黒の 21:1 までの範囲になります。
レベル AA では、通常の文字で 4.5:1 以上、大きな文字で 3:1 以上が求められます。レベル AAA では 7:1 と 4.5:1 です。大きな文字とは 24 CSS ピクセル以上、太字なら約 18.7 ピクセル以上の文字を指します。ここに表示する比は切り捨てています。4.499:1 の組み合わせは 4.5:1 を満たさないためです。
変換はブラウザ内の JavaScript で行われ、sRGB の伝達関数と、この色空間とともに公開された OKLab の行列を使います。各出力は数桁の小数に丸めていますが、その桁数は、これらの式で変換し直すと同じ 8 ビットの色に戻るように選んでいます。ブラウザによっては OKLCH と OKLab をわずかに異なる定数で計算するため、貼り付けた OKLCH や OKLab の値が、1 つのチャンネルで 255 段階のうち 1〜2 段階ずれることがあります。特に彩度の高い緑でよく起こります。最も近い色名は、OKLab での距離が最も小さい色の名前です。
OKLCH は sRGB の色域外の色も表せますが、HEX、RGB、HSL では表せません。このツールは明度と色相を保ったまま、sRGB に収まるまでクロマを下げ、その色の値を表示します。
通常の文字で 4.5:1 以上、大きな文字で 3:1 以上です。大きな文字とは 24 ピクセル以上、太字なら約 18.7 ピクセル以上の文字を指します。UI コンポーネントや意味を持つグラフィックも、隣接する色に対して 3:1 以上が必要です。
はい。スペース区切りは現在の CSS の構文で、現行のすべてのブラウザが解釈できます。カンマ区切りは古い形式ですが今も有効なので、新しい形式を受け付けないツールやメールクライアントではこちらを使ってください。
はい。比は最終的に画面に表示される色で決まるため、半透明の文字色はまず背景色と合成し、半透明の背景色は白と合成してから計算します。