JavaScriptでoklch()という関数が2023年にベースラインになったが、OKLCHがどういう特徴を持つものなのか知らなかったので調べた
OKLCHとは、色を「明るさ」「鮮やかさ」「色相」という視覚的に理解しやすい要素で分解し、人間の感覚に合った色操作を可能にする、最新の色空間モデル
例えば、複数のカラーバリエーションを持つボタンの背景色と文字色のコントラスト比が異なる位相でも一定になっていると、ユーザーの見やすさが損なわれづらい
このコントラスト比が一定になるように設計された色空間が OKLCH
1. OKLCHの構造
OKLCHは、視覚的に均等な色空間であるOKLABを基盤にしており、次の3つの軸で色を表現する
- L（Lightness）
色の明るさを表す。0（黒）から1（白）までの範囲 - C（Chroma）
色の鮮やかさ（彩度）を表す。0（グレー）から最大値（最も純粋な色）まで - H（Hue）
色相を表す。0°（赤）から360°（赤に戻る）までの範囲で、色の種類を示す
2. OKLCHの背景
- OKLCHは、OKLAB色空間を円柱座標系に変換したもの
- OKLABは、国際的に広く使われている視覚均等色空間であるCIE LABを改良したもの。CIE LABの非線形性や均等性の欠点を補うため、OKLABはより視覚的に正確な均等性を提供する
3. 従来の色空間との違い
- 視覚的な均等性
4. OKLCHのメリット
- 色補正に便利：人間の目が均等に感じる変化を作れるため、デザインや映像制作で使いやすい
- 正確な評価：明るさや鮮やかさを視覚的に正確に評価可能
- インターフェース設計：例えば、カラーピッカーで直感的に色を操作しやすい
5. 具体例
例えば、黄色と青の色を同じ明度で比較する場合
- HSV/HSLでは、黄色は青よりも明るく見えることがある
- OKLCHでは、L（明るさ）が同じであれば、どちらの色もほぼ同じ明るさに見える
参考
明るさ・鮮やかさを正確に評価したいなら、HSB/HSV/HSL色空間より、OKLCH色空間を使おう #CSS - Qiita
