OKLCH カラースペース

定義

OKLCH は、人間の目に実際に見える明るさを基準にして色を扱う、最新のカラーモデルです。 名前の三文字は色を構成する三つの値を表していて、L は明度（明るさ）、C は彩度（色の 鮮やかさ）、H は色相（赤や青といった色の種類）です。三つの値で色を表すという点では 広く使われている HSL と構造がよく似ているので、身につけるのはそれほど難しくありません。 決定的な違いは、明度 L が知覚的に均一だという点にあります。つまり L の値が同じなら、 色相が違っても人間の目にはほぼ同じ明るさに見える、ということです。最新のブラウザなら oklch() 関数ですぐに使えます。

なぜ重要か

HSL には昔からの悩みの種が一つあります。明るさの値を同じにそろえても、黄色は青より ずっと明るく見えてしまうことです。そのため HSL で色の段階をつくると、数字の上では 均等に分けたはずなのに、目で見るとある色は浮いて別の色は沈み、結果が予測しづらく なります。OKLCH は明度が知覚的に均一なので、L の値さえ固定すれば色相が違っても 実際にほぼ同じ明るさになります。おかげでボタンの各状態の色や、色の明るさの段階、 ダークモードのパレットのように、複数の色を一貫した明るさにそろえたい作業で、 ずっと予測しやすく規則的な結果が得られます。色を勘ではなくルールで扱いたい人に とって、特に頼りになる道具です。

よくある間違い

• OKLCH を HSL と同じものだと思い込み、値をそのまま移してしまうことです。二つの モデルは値の範囲も意味も互いに違うので、HSL の値をそのまま入れるとまったく別の色に なってしまいます。名前が似ているからと油断せず、新しいカラーモデルだと考えて最初から とらえ直しましょう。
• 彩度 C を上げすぎてしまうことです。色相や明るさによって画面が表現できる彩度の限界は 異なり、それを超えるとブラウザが色を勝手に切り詰めて、意図とは違う色になることがあります。
• 慣れないという理由で OKLCH を使わず先延ばしにしてしまうことです。値の意味を一度 覚えてしまえば色の段階づくりはむしろ楽になるので、小さなパレットから試しに取り入れて みるのがおすすめです。

実務のヒント

• 色の明るさの段階やダークモードのパレットをつくるときは、L の値を規則的に分けましょう。 明度が知覚的に均一なので、L だけを一定に調整すれば色相が違っても実際にほぼ同じ明るさの 段階になり、予測できるパレットが手に入ります。
• 新しい CSS の書き方なので、oklch() を使うときは古いブラウザ向けの備えも一緒に用意して おきましょう。@supports で対応の有無を確かめたり、従来の色の値を先に宣言しておいたり すれば、対応していない環境でも画面が崩れません。
• アクセントカラーを一つ決めておき、L と C だけを少しずつ変えて各状態の色を派生させましょう。 色相 H は固定したまま明るさと彩度だけを調整すれば、ボタンの通常・ホバー・押下状態の ように互いにつながる色を、統一感をもって手軽につくれます。

関連概念