OKLCHとは：目で見た印象どおりに色を扱えるカラーフォーマット

OKLCHとは

OKLCHは、Björn Ottossonが2020年に発表した知覚的な色空間Oklabを極座標で表したものです。値は3つあります。Lは知覚上の明度で、0（黒）から1または100%（白）まで。Cはクロマ、つまり色味の強さで、0（グレー）から、画面で表示できる最も鮮やかな色の約0.37まで。Hは色相の角度で、0〜360度です。

同じ色をさまざまなフォーマットで書くと次のようになります。下の値はすべてPickShadeがその場で計算しているので、そのままコピーして使えます。

OKLCHがHSLより優れている理由

HSLの明度は計算式で決まる値で、見た目の明るさではありません。hsl(60 100% 50%)は明るい黄色、hsl(240 100% 50%)は暗い青ですが、どちらも明度50%とされます。HSLでパレットを組むと、色相ごとに手作業で補正が必要になります。

OKLCHでは、Lが同じ色は同じ明るさに見えます。LとCを固定してHを回せば、バランスのとれた色相のセットができます。HとCを固定してLを段階的に変えれば、きれいなシェードのスケールができます。Tailwind CSS v4がデフォルトパレット全体をOKLCHで定義しているのはこのためです。

明度からコントラストも予測できます。背景とのLの差がおよそ0.4以上あるテキストは、たいてい読みやすくなります。そのため、アクセシブルな配色をずっと考えやすくなります。

CSSでの書き方

明度はパーセントか0〜1の数値で書きます。クロマは数値、色相は度単位の角度です。透明度はスラッシュの後に書きます。

color: oklch(62.8% 0.258 29.23);
background: oklch(0.7 0.15 250 / 50%);
border-color: oklch(from var(--brand) calc(l - 0.1) c h);

ブラウザ対応状況

oklch()は現行のすべてのブラウザで使えます。Safariは15.4以降、ChromeとEdgeは111以降、Firefoxは113以降です。ユーザーの90%を優に超える範囲をカバーしています。かなり古いブラウザにも対応したい場合は、OKLCHの行の前にHEXのフォールバックを書いておきます。

color: #ff5733;
color: oklch(68% 0.21 33.7);

クロマの上限と色域

OKLCHは、どの画面でも表示できない色まで表せます。クロマの上限は明度と色相によって変わります。鮮やかな黄色は明度が高いところでしか、鮮やかな青は明度が低いところでしか作れません。値がsRGBやDisplay P3の色域を外れると、ブラウザが色域内に収めるため、色がずれることがあります。

PickShadeはsRGBの外にある色に印を付け、収まる範囲で最も近い色を示します。明度と色相を保ったままクロマを下げて探す方法で、CSS Color 4が推奨しているのと同じやり方です。

HEXをOKLCHに変換する方法

変換は、HEXからsRGB、sRGBからリニアな光の値、リニアsRGBからLMS錐体空間、立方根、行列でOklabへ、最後にOklabから極座標へ、という順に進みます。手計算は間違えやすいので、変換ツールに色を貼り付けて結果をコピーしてください。

よくある質問