CSSで最近よく使うOKLCHカラーについて理解を深めよう、異なる色でトーンを合わせたり、単色のシェードも簡単

CSSでは、さまざまなカラーモデルで色を設定できます。16進数によるHEX値、rgb()によるRGB値、hsl()によるHSL値、lab()によるLAB値、oklch()Oklch値、oklab()によるOklab値など、現在ではすべてのブラウザにサポートされています。

中でも最近では、トーンを合わせたカラーを簡単に作ることができるOKLCHカラーの人気が高まっています。このOKLCHカラーについて紹介します。

oklch.fyi

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• OKLCHカラーとは
• カラーモデルとは
• 色域とは
• OKLCHの構造
• OKLCHだと明るさの一貫性が簡単
• OKLCHだとシェードも簡単
• OKLCHだとグラデーションも美しい
• カラースペースのサポート
• 最大彩度
• ブラウザのサポートとフォールバック

OKLCHカラーとは

oklchとは明度や彩度の変化が知覚的に均一になるように設計された新しいカラーモデル（Color model）です。人間の知覚において色がより正確になり、色を扱いがはるかに容易になることを意味します。

下記のように異なる色においてもトーンを合わせて色を作ることができます。

See the Pen
OKLCH part 1 by coliss (@coliss)
on CodePen.

カラーモデルとは

oklchが他のカラーモデルとどのように異なるかを理解する前に、基本的な色の概念を理解することが重要です。

カラーモデルとは、色を記述するためのシステムです。rgb, hsl, lch, oklchなど、さまざまなカラーモデルがあります。これらのモデルによって、色の操作や理解のしやすさが決まります。

さまざまなカラーモデル

色域とは

色域（Gamut）とは、カラーモデルが存在する領域で表現可能な色を定義します。一般的な色域には、WebのデフォルトであるsRGB、最新のデバイスで使用されるDisplay-P3などがあります。

CIE 1931 color space（Wikipedia）

色空間（Color space）について掘り下げると、さらに多くのニュアンスが存在します。色域を定義するだけでなく、白色点や伝達関数といった要素も定義します。

OKLCHの構造

oklchはlchと同様に、明度（Lightness）、彩度（Chrome）、色相（Hue）の3つの値で構成されます。oklchとlchの違いは、カラーモデルが使用する基礎となる色空間です。oklchの場合は、OKLab（Wikipedia）を使用します。

• 明度（Lightness）: 色の明るさをコントロール。0から1の値、または0%から100%の範囲に設定します。
• 彩度（Chroma）: 色の強度をコントロール。彩度（Saturation）に似ています。
• 色相（Hue）: 色相をコントロール。0から360までの度数で設定します。

OKLCHは、明度（Lightness）、彩度（Chroma）、色相（Hue）の3つの要素で色を表現します。

OKLCHの構造

OKLCHだと明るさの一貫性が簡単

たとえば、複数のボタンを作成し、それぞれに異なる色を割り当てたいとします。他のカラーモデルでは最初に色の設定をした後に、それに合わせて他の色を手作業で設定するのが一般的なワークフローです。

oklchを使用すると、すべてのボタンに同じ明度を使用し、色相のみ変更することができます。これにより見た目と印象が統一された色を簡単に作成できます。

See the Pen
OKLCH part 4 by coliss (@coliss)
on CodePen.

hslなどのカラーモデルでも同じことはできますが、上記の画像のように色が均一になりません。明るい色もあれば暗い色もあり、鮮やかに見えるものもあれば、目立たないものもあります。

これがoklchが他のカラーモデルに勝る大きな利点の一つです。知覚的に均一なカラーパレットを作成し、操作が非常に簡単です。

OKLCHだとシェードも簡単

さらに、oklchでは明度の値を変更してさまざまな色合いを作成することもできます。他のカラーモードとは異なり、色相や彩度の変化は発生しません。

See the Pen
OKLCH part 5 by coliss (@coliss)
on CodePen.

上記では、oklchでは色がすべての色合いに渡り一貫した青みを保っているのに対して、hslでは明るい色は紫がかり、暗い色は灰色がかって濁っていることが分かると思います。

OKLCHだとグラデーションも美しい

oklchにおけるグラデーションの仕組みは、他のカラーモデルとはかなり異なります。他のカラーモデルではグラデーションは赤・緑・青の値で計算されるため、中間色が濁ったり、明るさが不均一になったりすることがよくあります。

See the Pen
OKLCH part 6 by coliss (@coliss)
on CodePen.

oklchでは明度・彩度・色相に基づいて計算がおこなわれます。上記では、グラデーションの開始点と終了点は同じ色ですが、グラデーションが通過する色はかなり異なっているのが分かると思います。

グラデーションの経路

ただし、これは諸刃の剣です。一部のグラデーションでは滑らかに見えますが、定義していない色が表示される可能性もあります。これはoklchの色相が円形であるのが原因で、グラデーションが予期せぬ迂回をしてしまう可能性があるからです。

これを避けるため、多くのツールではoklchの代わりにoklabを使用します。oklabは直線で補間するため、より一貫した結果が得られます。

カラースペースのサポート

sRGBの色域では、現代のディスプレイが表示可能な多くの色は表現できません。oklchではDisplay-P3カラーをサポートするディスプレイでのみレンダリング可能な色を記述できます。

今があなたが使用しているディスプレイがDisplay-P3をサポートしている場合、右側の色は左側の色より鮮やかに見えます。

See the Pen
OKLCH part 7 by coliss (@coliss)
on CodePen.

ディスプレイがsRGBのみをサポートしている場合、ブラウザが色域外のカラーをsRGB色域内のカラーにマッピングされるため、色はほぼ同じに見えます。

ただし、sRGBとDisplay-P3ではグレーは同一であるため、そこには違いはありません。

最大彩度

oklchでは、実際のディスプレイで表示可能な色よりも多くの色を定義できます。sRGBやDisplay-P3のような実際の色域には収まらない値を指定することも可能です。

たとえば、color: oklch(0.7 0.4 40);という色で見てましょう。この色は非常に高い彩度を持っており、数学的には存在可能ですが、実在するどのスクリーンの色域にも収まりません。

この色を使用すると、色域内でもっとも近い表現可能な色にクリップまたはマッピングされます。

通常こういった色は避けるべきです。色がクリップされると、定義された色とは大きく異なる場合が多いからです。

したがって、最大彩度値というコンセプトが存在します。これは明度、色相、選択された色域に基づいて、ディスプレイが表示できる最大の彩度を計算するものです。

ブラウザのサポートとフォールバック

oklchカラーは、CSS Color Module Level 4で導入され、すべてのモダンブラウザで広くサポートされています。

もちろん、古いブラウザなどoklchカラーがサポートされていない環境も存在します。これに対応するには、CSSの@supporsでフォールバックを記述することができます。

このようにフォールバックをCSSで記述しておくと、ブラウザはoklchがサポートされている場合はoklchを使用し、サポートされていない場合はsRGBにフォールバックします。ただし、これにより色が魔法のように変化するわけではないことに注意してください。oklchカラーがsRGBに収まる場合は同等の16進数カラーと同じように表示されます。