OKLCHとは？CSS時代の新しい色表現をわかりやすく解説

WebデザインやUI設計の世界で、最近よく見かけるようになった OKLCH。

特に：

モダンCSS
デザインシステム
Tailwind CSS v4
ダークモード設計

などで急速に普及しています。

この記事では、

OKLCHとは何か
なぜ注目されているのか
RGB/HSLとの違い
CSSでの使い方
実務で強い理由

を、できるだけわかりやすく解説します。

OKLCHとは？

OKLCH は、人間の「見え方」に近い形で色を扱うための色空間です。

名前は次の略です。

要素	意味
OK	Oklab ベース
L	Lightness（明るさ）
C	Chroma（鮮やかさ）
H	Hue（色相）

CSSでは次のように書きます。

color: oklch(0.65 0.2 240);

これは：

明るさ: 0.65
鮮やかさ: 0.2
色相: 240°（青系）

を表しています。

なぜOKLCHが重要なのか

従来の色指定には問題がありました。

RGBの問題

rgb(255 0 0)

RGB はディスプレイ都合の色表現です。

そのため：

色の調整が直感的ではない
少し変更しただけで印象が大きく変わる
明るさ調整が難しい

という問題があります。

HSLの問題

hsl(240 100% 50%)

HSL は直感的ですが、実際の見え方が均一ではありません。

例えば：

黄色は非常に明るく見える
青は暗く見える
同じ明度でも色によって印象が変わる

という問題があります。

OKLCHの最大の特徴

OKLCH は、

人間が感じる色の差

に近づけて設計されています。

そのため：

グラデーションが自然
色スケール生成が綺麗
ダークモード設計しやすい
アクセシビリティ調整しやすい

という大きなメリットがあります。

OKLCHの3要素

1. L = Lightness（明るさ）

0 ～ 1

0 = 黒
1 = 白

例：

oklch(0.2 0.1 240)

かなり暗い色になります。

2. C = Chroma（鮮やかさ）

彩度に近い概念です。

0 ～ 0.4 前後が実用域

0 = グレー
数値が大きい = 鮮やか

例：

oklch(0.7 0.3 20)

かなり派手な色になります。

3. H = Hue（色相）

色の角度です。

0 ～ 360deg

代表例：

Hue	色
0	赤
90	黄
180	緑〜シアン
270	青〜紫

実際に色を変えてみる

明るさだけ変える

oklch(0.75 0.15 250)
oklch(0.45 0.15 250)

同じ青系のまま自然に暗くできます。

鮮やかさだけ変える

oklch(0.7 0.08 250)
oklch(0.7 0.28 250)

色相を保ったまま鮮やかさを調整できます。

グラデーションが綺麗

OKLCH の大きな強みがこれです。

HSL や RGB では：

中間色が濁る
不自然に見える
急に明るくなる

ことがあります。

OKLCH は知覚的に均一なので、非常に滑らかなグラデーションになります。

Tailwind CSS v4 でも採用

Tailwind CSS では、v4 世代で OKLCH ベースのカラー設計が強く意識されています。

理由は：

カラースケール生成が自然
ダークモードに強い
ブランドカラー管理しやすい

ためです。

例えば：

primary-50
primary-100
primary-200

のようなスケールを綺麗に作れます。

CSSのブラウザ対応

現在は主要ブラウザでかなり対応しています。

Google Chrome
Safari
Firefox

モダンなフロントエンド開発では実用段階です。

OKLCHはどんな人におすすめ？

特に相性が良いのは：

UIデザイナー
フロントエンドエンジニア
デザインシステム設計者
ダークモード設計者

です。

まとめ