新しい色空間 / New Color Space

OKLCH

オクルッチ

人間の知覚に正直な、次世代CSS色空間。
均一な明度。直感的な操作。圧倒的な色域。

OKLCH の読み方オクルッチ|o-ku-ru-cchi
SCROLL

01 / Why OKLCH

明度が均一だと、
何が変わるのか。

HSL — 従来

HSL / hsl(H, 80%, 55%)

同じ明度値（55%）でも、黄緑が明るく青が暗く見える。
人間の知覚と一致していない。

OKLCH — 新世代

OKLCH / oklch(68%, 0.28, H)

同じ明度値（68%）で、すべての色相が均一に見える。
人間の目に正直な色空間。

02 / The Three Axes

3つの軸で、
色を完全に記述する。

L

Lightness

明度

0〜1（または0〜100%）の範囲で、
知覚的に均一な明るさを指定する。
色相に依存せず、常に同じ「明るさ」。

C

Chroma

彩度

色の鮮やかさ・濃さ。
0が無彩色（グレー）、
0.4前後が最大彩度の目安。

H

Hue

色相角

0〜360度の色相環。
赤=30°、黄=80°、緑=160°
青=220°、紫=280°。

OKLCH  は、色を
人間のために
再設計した。

03 / CSS で今すぐ使える

書き方は、
シンプル。

CSS Color Level 4として、主要ブラウザすべてで
すでにサポートされている。

今日から使えるのに、
まだ「知らない」人が多すぎる。

color: oklch(68%0.28160);
/* L    C    H */
/* 明度 彩度 色相角 */
background: oklch(72%0.25280);