概要
- OKLCH は人間の視覚に基づいた 新しいカラーモデル
- 他のカラーモデル（RGB, HSL, LCH等）との 違いと利点 を解説
- ガンマット やカラースペースの基礎知識
- 一貫した 明度・色合い の調整やグラデーション作成が容易
- CSSでの利用方法 やブラウザ対応・フォールバックも紹介
OKLCHとは何か
- OKLCH は 知覚的均一性 を重視した新しいカラーモデル
- 色を 人間の目の感覚 に合わせて表現
- 色操作や配色設計が 直感的 になるメリット
- RGB、HSL、LCH など従来モデルとの比較
- 色モデルは色を 数値や構造 で表現するための仕組み
ガンマットとカラースペースの基礎
- ガンマット は各カラーモデルで表現可能な 色域
- 代表的なガンマット： sRGB （Web標準）、 Display-P3 （最新デバイス用）
- カラースペースは ガンマット だけでなく ホワイトポイントや伝達関数 も定義
- 詳細は省略し、基本のみ解説
OKLCHの構造
- Lightness（明度） ：0〜1または0%〜100%、 均等な明るさ変化
- Chroma（彩度） ：色の強さ、 彩度に近い概念
- Hue（色相） ：0〜360度で表現、 色合いの角度指定
- LCHとOKLCHの違いは 基盤とするカラースペース （OKLabを利用）
一貫した明度・色合いの実現
- 複数のボタン色を作る場合、 OKLCHならHueのみ変更で均一な印象
- HSL等従来モデル では明るさや鮮やかさが 不均一 になりやすい
- 視覚的に均一なカラーパレット 作成が容易
予測可能な色の階調
- 明度値のみ変更 で一貫した色の階調作成が可能
- 他モデルでは 色相や彩度がズレる 問題
- 例：OKLCHなら青色の階調が一貫、HSLでは薄い色が紫に、暗い色が灰色に近づく
グラデーションの違い
- sRGB ではRGB値で補間し、 中間色が濁りやすい
- OKLCH ではLightness, Chroma, Hueで補間し、 均一なグラデーション
- 始点と終点は同じでも 途中の色の見え方が大きく異なる
カラースペース対応
- sRGB では表現できない色も OKLCH で記述可能
- Display-P3 対応ディスプレイではより鮮やかな色
- 非対応環境 では自動でsRGB内にマッピング
- グレー系はsRGB/Display-P3で違いなし
最大Chroma値とガンマット外の色
- OKLCH は理論上、実際のディスプレイで表現不可な色も指定可能
- 例：oklch(0.7 0.4 40)は高Chroma値でガンマット外
- ガンマット外の色は自動でクリッピング され、意図と異なる色になる場合あり
- 最大Chroma値 の概念：Lightness, Hue, ガンマット（sRGB/Display-P3）に応じて最大値を計算
CSSでの利用とフォールバック
OKLCH はCSS Color Module Level 4で導入、 主要ブラウザで対応
古いブラウザ では未対応な場合も
@supports ディレクティブでsRGBとのフォールバック指定可能
- 例：
- sRGB（hex）を初期値に
- OKLCH対応時のみOKLCH値を上書き
- 例：
OKLCHツールと情報
- oklch.fyi ：OKLCHカラーパレット生成やCSS変数変換ができるツール
- 質問は [email protected] まで
- 追加情報は Twitter でも発信
「Better Gradients」ってちょっと怪しいよね。OKLCHは極座標空間なんだ。色相はこの空間での角度を表してるから、色相を一つの角度から別の角度に補間するには、円の端をぐるっと回る必要があるんだ。これが、例えばこんな極端な例を生むわけ：linear-gradient(in oklch, #f0f, #0f0)。逆回りに円を回ることもできて、そうすると青からアクアを経由することになる：linear-gradient(in oklch longer hue, #f0f, #0f0)。どちらの場合でも示されているグラデーションは、知覚色空間で作業するのがいかに難しいかの良い例だよ。ほぼ円の端をぐるっと回る間、sRGBの範囲外になっちゃうし、実際には人間が認識できる色の範囲を大きく超えてるんだ。知覚色空間は、ガマットの端を扱うのが本当に苦手で、値を少し変えるだけでガマットを外れちゃうんだ。だから、色をガマット内に戻すためのアルゴリズムが定義されてるけど（そう、複数あるよ：どのアプリケーションも使う技術に合意してるわけじゃないから）、それは知覚的均一性を犠牲にすることになる。あのグラデーションの赤は、他の部分よりもずっと暗いんだ。もしより良いグラデーションを探してるなら、知覚的均一性を気にするなら（実際にはあまり気にしない方がいいけど、知覚色空間は過剰に使われてるから）、Oklabで補間するのがいいと思うよ。これなら円の一方からもう一方へ直線で行けるから—必要なら灰色を通るけどね。linear-gradient(in oklab, #f0f, #0f0)。この場合、赤や黄色を経由せず、マゼンタからライムへのグラデーションがかなり良い感じになるよ。sRGBの補間による不適切な暗さも出ないし（…でも、もし手動でそのグラデーションを調整するなら、実際にはOklabより少し暗くするかな）。Tailwind v4のベータ期間中に、グラデーション補間をsRGBからOklchにシフトしようとしたけど、リリース時にはOklabが安全なデフォルトだと決めたみたい。