OKLCH

CSS で使える次世代の色空間「OKLCH」について、基礎から活用方法まで詳しく解説します。
従来の RGB や HSL とは異なり、OKLCH は人間の視覚に基づいて設計されており、デザインにおける色選びの精度と柔軟性を大幅に向上させることができます。

OKLCH とは

OKLCH は、「OKLab」という色空間をベースにした表色モデルで、「Lightness（明度）」「Chroma（彩度）」「Hue（色相）」の 3 つの成分から構成されています。

構成要素

L（Lightness / 明度）
0〜1 の範囲（CSS では 0%〜100%）で、黒から白までの明るさを示します。
C（Chroma / 彩度）
色の鮮やかさを表します。0 は無彩色（グレースケール）で、数値が高いほどビビッドになります。
H（Hue / 色相）
色相環に沿った色の種類を角度（0〜360°）で表します。

OKLCH 基本色

以下は OKLCH 色空間で定義した基本色（原色）の例です。
L = 0.75, C = 0.25 として、明度と彩度を揃えた状態で表示しています。

OKLCH は 知覚的に均一な色空間 であるため、sRGB における “原色” とは数値の対応が異なります。
すなわち、「同じような赤・緑・青」に見えても、OKLCH の値は HSL や RGB とは直接一致しません。

色	コード	色見本
赤	oklch(0.75 0.25 20)
橙	oklch(0.75 0.25 45)
黄	oklch(0.75 0.25 90)
緑	oklch(0.75 0.25 135)
水色	oklch(0.75 0.25 180)
青	oklch(0.75 0.25 250)
紫	oklch(0.75 0.25 300)
ピンク	oklch(0.75 0.25 340)

OKLCH のメリット

視覚的に均等な配色が可能

Chroma（彩度）の値が同じであれば、異なる色相でも同じくらいの鮮やかさに見えます。
たとえば、以下の 3 色はそれぞれ色相が異なりますが、同じ Chroma を持つため、鮮やかさのバランスが揃っています。

/* 明るく均等な彩度の青・赤・緑 */
color: oklch(70% 0.2 250); /* 青 */
color: oklch(70% 0.2 20); /* 赤 */
color: oklch(70% 0.2 140); /* 緑 */

これはデザインにおいて「色のバランス」を保つのに非常に便利です。

色相が安定しやすい

色の明度や彩度を調整しても、色味の印象が大きく変わりにくいのが OKLCH の特徴です。
たとえば、以下のように明度だけを変えても、色相はほぼそのまま保たれます。

/* 同じ色相（250°）の暗い・普通・明るい青 */
background-color: oklch(30% 0.15 250); /* 暗い青 */
background-color: oklch(60% 0.15 250); /* 標準的な青 */
background-color: oklch(90% 0.15 250); /* 明るい青 */

RGB や HSL の色空間ではこうした安定性が得られにくいため、色の微調整に強い利点があります。

ダークモードへの対応がしやすい

OKLCH では Lightness を下げるだけで、自然なダークテーマ向け配色が実現できます。
同じ色相・彩度でも、明度だけを下げることで違和感のない色変化ができます。

/* 明るいテーマ用 */
color: oklch(85% 0.1 200);

/* ダークテーマ用 */
color: oklch(30% 0.1 200);

背景色やテキスト色のペアリングが簡単で、テーマ切り替えがスムーズになります。

アクセシビリティを考慮した配色設計が可能

コントラスト比を意識した配色がしやすいため、視認性を確保した UI デザインが作れます。
例えば、以下のように背景色と文字色の明度差を十分に取ることで、WCAG のコントラスト基準に準拠しやすくなります。

/* 背景色（暗）＋ 文字色（明） */
background-color: oklch(25% 0.05 230);
color: oklch(95% 0.05 230);

明度（Lightness）の調整だけで、コントラストを直感的に調整できるのが OKLCH の強みです。

高コントラスト読みやすい

低コントラスト読みづらい

左側は明確な明度差があり、視認性が高い配色です。右側は背景と文字色の明度が近く、視認性が低下しています。
OKLCH を使えば、Lightness を調整するだけでコントラストを直感的に設計できます。

HSL と OKLCH における視認性の比較

HSL の場合

HSL は hsl(色相, 彩度, 明度) の形式で色を定義します。
以下の例では、彩度 = 100%、明度 = 50% をすべての色で共通に設定し、色相だけを変化させています。

hsl(0, 100%, 50%)   // 赤
hsl(120, 100%, 50%) // 緑
hsl(240, 100%, 50%) // 青

ABCDEF

赤では、黒文字・白文字ともに高い視認性があります。
緑（120°）では、背景が明るく見えるため 白文字の視認性がやや低下 します。
青（240°）では、背景が暗く見えるため 黒文字の視認性が著しく低下 します。

OKLCH の場合

OKLCH は oklch(Lightness Chroma Hue) の形式で色を定義します。以下では、HSL の赤（hsl(0, 100%, 50%)）に視覚的に近い見た目の色になるように調整した oklch(0.63 0.2577 29.23) を基準としています。

その上で、他の色（緑・青）についても、赤と同じ見た目の明るさになるように Lightness の値を調整しています。
このように OKLCH では、視覚的な一貫性を保ちながら、色相だけを変えて自然な色設計が可能です。

oklch(0.63 0.2577 29.23)  // 赤系
oklch(0.63 0.23 143)      // 緑系
oklch(0.63 0.2 265)       // 青系

ABCDEF

OKLCH では色相（Hue）を変えても、Lightness（明度）を一定に保つことで視覚的な明るさを統一できます。
そのため、黒文字も白文字もすべての背景色で 安定した視認性 が得られます。
特に青系の背景でも、HSL よりも明るさが保たれており、黒文字がはっきり読みやすくなっています。