このツールでできること
CSSのカラー値を貼り付けるか、カラーピッカーで選ぶと、HEX・RGB・HSL・HWB・LAB・LCH・OKLCHで表示され、それぞれにコピーボタンが付いています。カラースウォッチとアルファ（不透明度）スライダーで、半透明にしたときの見え方も確認できます。コンバーターの下にあるコントラストチェッカーでは、2つの色をWCAG 2の基準と比べ、サンプルテキストでプレビューできます。
色空間の簡単な説明
- HEX・RGB は色を赤・緑・青の量（0〜255、または0〜100%）で表します。
- HSL はそこに色相（hue）・彩度（saturation）・明度（lightness）を加えたもので、RGBの数値だけを見るより直感的に扱えます。
- HWB（色相・白の量・黒の量）は色相に白と黒を混ぜる方式で、明るい色調や暗い色調を作りやすいのが特徴です。
- LAB・LCH は人の見え方に近い形で、明度（L）と、緑〜赤・青〜黄の軸（LAB）や彩度・色相（LCH）で色を表します。
- OKLCH はLCHをさらに精密にし、知覚的に均一になるよう作られた、モダンなWeb向けの色空間です。
OKLCHが便利な理由
HSLでは「明度」の数値を同じにしたまま色相だけを変えても、目にはずっと明るく、あるいは暗く見えることがあります。たとえば明度50%の純粋な黄色は、同じ明度の青よりもずっと明るく見えます。OKLCHの明度は実際に見える明るさに沿うように作られているため、明度の値をそろえるだけで色相が違っても明るさがそろったカラーパレットを作れますし、彩度だけを変えたいときに明るさが意図せず変わってしまうことも少なくなります。
WCAGコントラストの計算方法
コントラストチェッカーはWCAG 2の計算式に従います。まず各色の相対輝度（線形の赤・緑・青の値に重みを掛けて合計した値）を求め、明るいほうの色をL1として (L1 + 0.05) / (L2 + 0.05) を計算します。結果は4.5:1のような比率になります。
- AA・通常テキスト: 4.5:1
- AA・大きいテキスト: 3:1
- AAA・通常テキスト: 7:1
- AAA・大きいテキスト: 4.5:1
「大きいテキスト」とは、通常の太さで18pt（約24px）以上、または太字（bold）で14pt（約19px）以上のテキストを指します。
色域の外の色
LAB・LCH・OKLCHはsRGBより広い範囲を扱えるため、通常の画面では表示できない色まで表現できます。そのような色を入力すると、このツールがその旨を知らせ、HEX・RGBの値として使用中のsRGB画面が再現できる最も近い色を表示します。