OKLCHで色を選んでパレットを改善する

やりたいこと

デザインシステムでは「同じ色で暗くしただけ」が見た目にも均一であってほしい。HSLでは明度50%の紺はほぼ黒に、黄色の50%はまだ明るいままです。OKLCHは知覚的に明度を測るため、同じL値は同じ明るさに見えます。

色を変換する

#3b82f6のようなHEXを入力します。OKLCH（L, C, H）・CIELAB・LCHを並べて表示します。L≈0.63・C≈0.19・H≈254——それがこの青の知覚的な指紋です。

• L（0〜1）は知覚明度で、変えても色の性格が保たれます。
• Cは彩度で、0.3を超えるとsRGB色域を外れ逆変換でクリップされます。
• Hは色相角0〜360です。

具体例

ボタンの階調を作ります。ブランドの青でHとCを固定し、Lを0.9から0.4まで刻みます。どの段も均一に暗く見え、HSL明度では得られなかった段差になります。各組は後でコントラストチェッカーで確認します。

対応範囲

D65のsRGB計算を通るため、画面作業には十分な精度ですが測色器レベルではありません。sRGB色域外の色はHEXへ戻す際にクリップされ、スウォッチはクリップ後の正直な結果を見せます。