はじめに
Tailwind CSS v4で、カラーシステムがHEXからOKLCHに変更されました。
「oklchってなんだよ！俺らのHEXを返せよ！！」と激怒した方も多いのではないでしょうか。
まぁそんなに怒らず、まずはoklchを知ろうということで調べました。
TL;DR
| 項目 | HEX | OKLCH |
|---|---|---|
| 表記例 | #3b82f6 |
oklch(0.62 0.21 255) |
| 基準 | 機械（ディスプレイ）向け | 人間の知覚向け |
| 色の調整 | 直感的でない | 直感的 |
| 明度を変えると | 色味が変わることがある | 色味が維持される |
HEXカラーとは
読み方と構造
HEX は「Hexadecimal（16進数）」の略です。
#3b82f6
この6桁は、RGBの値を16進数で表現したものです。
#3b82f6
││││││
││││└┴─ Blue: f6 = 246
││└┴─── Green: 82 = 130
└┴───── Red: 3b = 59
つまり rgb(59, 130, 246) と同じ意味になります。
HEXが生まれた背景
HEXは、コンピュータのディスプレイが色を表示する仕組みに直結しています。
ディスプレイは赤・緑・青の光を混ぜて色を作るため、RGB形式が採用されました。
HEXの課題
課題1: 人間の目と一致しない
HEXは「機械にとって都合が良い」だけで、人間の知覚とは一致しないらしいです。
人間の目は緑にもっとも敏感で青の光に鈍感らしいです。
なので同じRGBの合計値でも青系の方が色が暗く見えるらしいです。
確かにそれはなんとなくわかります。
#0000ff
#00ff00
課題2: カラーパレットの作成が難しい
上記が原因ですが
UIデザインでは「blue-100」「blue-200」...「blue-900」のような段階的なカラーパレットを作るときに
HEXで作ろうとすると：
- 知覚的に均等な間隔にならない
- 明度を変えると彩度や色相も変わる
- 試行錯誤が必要で、感覚に頼るしかない
って感じのデメリットがあるみたいです。デザイナーじゃないのでよくわからないですが。
OKLCHとは
読み方と構造
OKLCH（オーケー・エルシーエイチ） は「OK Lightness Chroma Hue」の略です。
- OK: 2020年に発表された改良版の色空間「Oklab」から
- L: Lightness（明度）
- C: Chroma（彩度）
- H: Hue（色相）
oklch(0.62 0.21 255)
│ │ │
│ │ └── Hue: 255度（青）
│ └─────── Chroma: 0.21（鮮やかさ）
└──────────── Lightness: 0.62（明るさ62%）
各パラメータの意味
L（Lightness / 明度）
0〜1（または0%〜100%）の範囲で、色の明るさを表します。
-
0= 真っ黒 -
1= 真っ白 -
0.5= 中間の明るさ
重要な特徴: Lの値が同じなら、人間の目には同じ明るさに見える
C（Chroma / 彩度）
**色の鮮やかさを表します。 0~0.4ぐらいが現実的な範囲らしいです。
-
0= グレー（無彩色） - 値が大きいほど = 鮮やかな色
H（Hue / 色相）
0〜360の角度で、色味を表します。
色相ってなんやねんって方は↓参考に
色相とは
0° = 赤
60° = 黄
120° = 緑
180° = シアン
240° = 青
300° = マゼンタ
360° = 赤（一周）
OKLCHがHEXの課題を解決する仕組み
解決1: 知覚的に均一
OKLCHは「人間の目にどう見えるか」を基準に設計されている
/* 同じ明度(L=0.7)の色は、実際に同じ明るさに見える */
oklch(0.7 0.15 0) /* 赤 */
oklch(0.7 0.15 120) /* 緑 */
oklch(0.7 0.15 240) /* 青 */
これにより、異なる色相でも視覚的な統一感が保たれるらしい。
解決2: 明度を変えても色味が維持されるのでカラーパレットが簡単に作れるらしいです
Lの値を等間隔で変えるだけで、知覚的に均等なパレットが作れます。
/* blue-100 〜 blue-900 を作る場合 */
--blue-100: oklch(0.95 0.05 250);
--blue-200: oklch(0.88 0.08 250);
--blue-300: oklch(0.80 0.12 250);
--blue-400: oklch(0.72 0.15 250);
--blue-500: oklch(0.62 0.18 250);
--blue-600: oklch(0.52 0.18 250);
--blue-700: oklch(0.42 0.15 250);
--blue-800: oklch(0.32 0.12 250);
--blue-900: oklch(0.22 0.08 250);
Tailwind CSS v4での変化
v3まで
/* HEXで定義されていた */
--color-blue-500: #3b82f6;
v4から
/* OKLCHで定義されるようになった */
--color-blue-500: oklch(0.623 0.214 255.1);
これは最初困惑しましたね。
まとめ
ちょっとoklchと仲良くなれましたね