次世代の色指定「OKLCH」を使いこなそう！

はじめに

みなさん、CSSでの色指定には何を使っていますか？ HEX (#ffffff) ですか？ それとも RGB (rgb(255, 255, 255)) ？ あるいは人間にも分かりやすい HSL (hsl(0, 0%, 100%)) でしょうか？

断言します。これからのスタンダードは OKLCH です。

この記事では、なぜ今 OKLCH が熱いのか、そしてモダンなUIライブラリである shadcn/ui や その依存ライブラリである Tailwind CSS v4 が OKLCH を採用しているのかについてゆる～く解説します。

OKLCH とは？

OKLCH は、人間の目の知覚に基づいた新しい色空間（Perceptual Color Space）です。

• L (Lightness): 明度。0%（黒）から 100%（白）まで。
• C (Chroma): 彩度。0（グレー）から無限大まで（実際には 0.4〜0.5 くらいが限界）。
• H (Hue): 色相。0 から 360 の角度で色を指定。

書き方はこんな感じです。

.my-element {
  /* 明るさ70%、鮮やかさ0.14、色相150度（緑系） */
  color: oklch(0.7 0.14 150);
}

なぜ HSL じゃダメなの？

「HSLでも直感的で便利じゃん」と思うかもしれません。しかし、HSLには致命的な欠点があります。それは 「知覚的な明るさが一定ではない」 ということです。

例えば、HSLで「明度50%の黄色」と「明度50%の青」を並べてみてください。数値上は同じ明るさなのに、黄色の方が圧倒的に明るく見えませんか？

これは、HSLが単にRGBを円筒状に変形させただけの計算式で、人間の目の特性（黄色は明るく、青は暗く見える）を考慮していないからです。

OKLCH の凄さ：知覚的均一性

一方、OKLCH の L (Lightness) は、見た目の明るさ と完全に一致するように作られています。

つまり、OKLCH で L=50% と指定すれば、黄色だろうが青だろうが、人間の目には同じ明るさ に見えます。

これがなぜ嬉しいかというと、

1. アクセシビリティ: コントラスト比の計算が圧倒的に楽になります。Lの値を見れば、文字が読めるかどうかが直感的に分かります。
2. UIデザイン: 「ホバーしたら少し暗くする」といった操作をした時に、色によって結果がバラつくことがありません。どの色でも同じように暗くなります。

Shadcn/ui も Tailwind v4 も OKLCH

実は、この OKLCH の波はすでに主要なフレームワークにも来ています。

shadcn/ui は、デフォルトのテーマ変数に OKLCH を用いています。
最新の Tailwind CSS v4 でも、内部のテーマエンジンが OKLCH をベースに設計されています。

create-next-app や shadcn init で生成されるデフォルトの CSS 変数を見てみてください。以前の HSL ベースから OKLCH に変換されていることに気づくはずです。

:root {
  /* shadcn/ui での定義例（Tailwind v4） */
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
}

これは、デザインシステム全体で一貫したコントラストと美しさを保つために、OKLCH の「知覚的均一性」が不可欠だからです。

P3 色域へのアクセス

もう一つの大きなメリットは、sRGB よりも広い色域 (P3) を扱えることです。

従来の HEX や RGB、HSL は sRGB 色域に制限されていました。しかし、今のスマホやディスプレイの多くは、もっと鮮やかな色を表示できる能力を持っています。

OKLCH を使えば、今まで表現できなかった「目の覚めるような鮮やかなシアン」や「深い紅色」などを、CSS だけで表現できるようになります。

まとめ

• OKLCH は人間の目に正直な色指定
• HSL の「色によって明るさが違う問題」を解決
• shadcn/ui や Tailwind v4 の標準になりつつある
• P3 色域の鮮やかな色も使える

新しいプロジェクトを始めるなら、ぜひ biome とセットで oklch も導入してみてください。CSS の色指定がもっと楽しく、論理的になりますよ！