はじめに
2025年1月22日に、Tailwind CSS v4がリリースされました。
たくさんの新機能がある中で、もっとも多くの人を驚かせたのが「デフォルトカラーが全て変わった」現象ではないでしょうか？
v4では、プリセットカラーの生成に従来のrgbやhexではなく、新しいカラーモデルである oklch が採用されました。
この記事では、このoklchとは何か、そのメリットは何か、v3からv4へ移行する際に知っておきたいカラーバリエーションの新旧対応のポイントについて解説します。
oklchとは？
知覚的に均一な（「人間の目」に一番正直な）色空間
oklchとは、Oklab 色空間に基づいたカラーモデルです。
その最大の特長は、従来のrgbやhslと異なり、明度や彩度の変化が人間の感覚と一致するよう、色の一貫性が保たれている点です。
これは、基となるOklab 色空間が、色を数値として表現・管理する体系（色空間）の中でも、人間の目の色の知覚方法を模倣し、色の差異が知覚的な差異と一致するように設計されているためです。
ちなみに、okは「Optimal Color K」（Optimalは最適、Kは色を意味するスウェーデン語のKulörに由来するとも言われています）の略です。
oklchは、以下の3つの要素で色を表現します。
| 要素 | 意味 | 範囲・特徴 |
|---|---|---|
| L (Lightness / 明度) | 色の明るさ | 0%（黒）から100%（白）で表現される |
| C (Chroma / 彩度) | 色の鮮やかさ | 値が大きいほど鮮やかになる |
| H (Hue / 色相) | 色の種類 | 角度（0°〜360°）で表現される |
従来のrgbやhslとの決定的な違い
-
hsl(0 100% 50%)とhsl(120 100% 50%)は同じLightness 50%でも明るさが全然違う -
oklch(50% 0.2 0)とoklch(50% 0.2 120)は同じ明るさに見える
サンプル
See the Pen Qiita: HSL vs OKLCH Perceptual Uniformity by Yoruaki (@yoruaki) on CodePen.
これが「知覚的均一性（Perceptual Uniformity）」です。
Tailwind v4の新カラー
Tailwind CSS v4のカラーは、内部でこのoklchを使って定義されています。
色相が一定なので、例えばblue-100からblue-900まで、明るさが変わっても色の印象が一貫しています。
これにより、従来のrgbやhexベースでは、色の濃度が上がると（例: blue-900）純粋な青から少し紫やグレーにずれて見えがちだった問題を解決してくれます。
新旧カラーバリエーション対応表
See the Pen Qiita: Tailwind CSS v3 vs v4: Color System Comparison (Impact of `oklch`) by Yoruaki (@yoruaki) on CodePen.
アクセシビリティの向上という観点
oklchカラーモデルのメリットの一つに、アクセシビリティ観点での有用性があります。
コントラスト比の直感的把握
WCAG（Web Content Accessibility Guidelines）の達成基準1.4.3では、文字色と背景色に少なくとも4.5:1のコントラスト比が求められます。
oklchでは、Lightness（明度）の値を見るだけで、その色がどのくらい明るいかが知覚的に判断できます。
.example {
background-color: oklch(90% 0.05 240);
color: oklch(30% 0.05 240);
}
WCAGが求めるコントラスト比は、Lightness差を40%以上にすれば多くのケースでAA基準をクリアできます。
上記のCSSは、とても明るい背景色にとても暗い文字色を指定しています。そのLightness差は60%（コントラスト比12.4:1）で余裕のAAAです。
ちなみに、白背景（#fff）に黒文字（#000）のコントラスト比は最高の21:1です。
これにより、従来のカラーモデルよりも高い確度でアクセシビリティを確保できます。
また、開発者やデザイナーが、アクセシビリティ基準を満たす色を、より直感的かつ一貫性をもって選べるようになります。
ダークモードの色選びが簡単
oklchは、Lightness（L）とChroma（C）を独立して扱えるため、ダークモードやライトモードでトーンの統一が容易に実現できます。
特に、Lの値だけを大幅に変え、C（彩度）とH（色相）を一定に保つことで、色味や印象を変えずに明るさだけを反転させたパレットを簡単に作成できます。
:root {
/* ライトモードの背景色と文字色のLightness差は60% */
--color-bg: oklch(95% 0.03 260); /* 非常に明るい（L=95%） */
--color-text: oklch(35% 0.05 260); /* 暗い（L=35%） */
}
.dark-mode {
/* HとCをほぼそのままに、Lを反転させる */
--color-bg: oklch(15% 0.05 260); /* 非常に暗い（L=15%） */
--color-text: oklch(85% 0.03 260); /* 明るい（L=85%） */
}
この例では、Lの値を変えるだけで、コントラスト比を保ちつつ、トーンの統一されたダークモードカラーを、直感的かつ高い確度で生成できています。
従来のカラーモデルでは、この統一感を保つために複雑な調整が必要でした。
まとめと今後の展望
oklchカラーモデルは、知覚的均一性により、明るさの一貫性が簡単に保てるため、見た目と印象が統一された色を簡単に作成できます。
また、アクセシビリティの基準を満たしたデザインを容易に作成できるという、現代のWeb開発において不可欠なメリットを提供します。
私もまだoklchを十分に使いこなせているわけではありませんが、Tailwind CSS v4という巨大なエコシステムに採用されたことで、今後はoklchがWeb標準として普及していくのは時間の問題でしょう。
Tailwind v3からv4への移行を検討されている方は、まずは新しいカラーシステムがデザインに与える影響をチェックしてみるとよいかと思います。
Lightness値で直感的にコントラストを確保できるようになったので、アクセシビリティ対応も容易になったと思います。
ぜひ、oklchと共にアクセシブルで高品質なUIを実現していきましょう！