OKLCHとは

ひとに説明するなら

「OKLCH は、HSL の弱点を直した新しい色の書き方。数字が同じくらいなら、見た目の明るさや鮮やかさも同じくらいになる。CSS でそのまま使えて、きれいなグラデーションや、そろった色の段階がつくりやすい」

見え方に近い数字

OKLCH は、Oklab という色の表し方を、明るさ（L）・鮮やかさ（C、クロマ）・色相（H）の3つに置き換えたものです。Oklab は、人の目が感じる明るさや色の差に近くなるように作られています。

CSS では「oklch(70% 0.15 50)」のように書きます。L は 0〜100%（0〜1 でも書けます）、C は 0 から始まり、画面で出せる範囲ではおおむね 0.4 くらいまで、H は 0〜360 の角度です。

HSL と何が違うのか

HSL では、L を同じにしても、黄色は明るく、青は暗く見えます。OKLCH では、L をそろえれば、色相が違っても見た目の明るさがそろいやすくなります。

これは、ボタンの色やグラフの色など、「明るさをそろえた何色か」をつくるときにとても役立ちます。文字との読みやすさも、色ごとにばらつきにくくなります。

グラデーションが濁りにくい

2つの色をつなぐグラデーションを、RGB のままでつくると、途中が灰色っぽくくすむことがあります。OKLCH でつなぐと、途中の色も鮮やかさを保ったまま、なめらかにつながりやすくなります。

CSS では「linear-gradient(in oklch, …)」のように、どの表し方でつなぐかを指定できます（対応しているブラウザで有効です）。

使えるようになったのは最近

OKLCH は、2023年ごろから主要なブラウザで使えるようになった、新しい書き方です。まだ知らない人も多いぶん、覚えておくと配色の作業がぐっと楽になります。

また OKLCH は、sRGB の外側にある、より鮮やかな色も書き表せます。その色を出せない画面では、近い色に置き換えて表示されます。

よくある勘違い

COLOR JOURNEY で使うには

COLOR JOURNEY のパレットの印（明るめ・暗め、くすみ・あざやか、類似色・補色）は、6色を OKLCH に置き換えて、その L・C・H から自動で判定しています。

パレットの色に、明るさをそろえた色を何色か足したいときは、L をそのままにして H だけを動かしてみてください。パレットの空気をこわさずに、色を増やせます。

各パレットのページのグラデーションも、色と色のあいだを OKLab（OKLCH と同じ仲間の表し方）でつないでいるので、途中が濁りにくくなっています。

参考になるパレット

Horizon Code

Algorithm Garden

Midnight Server

Silicon Sunset

クイズ

1. OKLCH の C が表しているのは？

   明るさ

   ちがいます。答えは「鮮やかさ」。C はクロマ（鮮やかさ）です。L が明るさ、H が色相です。

   鮮やかさ

   正解です。答えは「鮮やかさ」。C はクロマ（鮮やかさ）です。L が明るさ、H が色相です。

   色相

   ちがいます。答えは「鮮やかさ」。C はクロマ（鮮やかさ）です。L が明るさ、H が色相です。

2. OKLCH が得意なことは？

   色相の違う色の明るさをそろえること

   正解です。答えは「色相の違う色の明るさをそろえること」。L をそろえると、色相が違っても見た目の明るさがそろいやすくなります。

   印刷のインク量を決めること

   ちがいます。答えは「色相の違う色の明るさをそろえること」。L をそろえると、色相が違っても見た目の明るさがそろいやすくなります。

   画面の解像度を上げること

   ちがいます。答えは「色相の違う色の明るさをそろえること」。L をそろえると、色相が違っても見た目の明るさがそろいやすくなります。

よくある質問

関連する言葉

• HSL
• 明度
• 彩度
• 色相
• グラデーション
• 色差（ΔE）

参考

• CSS Color Module Level 4（W3C）