OKLCH(OKLab-LCH)はトーンを合わせたカラーマップを比較的簡単に作れる。グラフで色分けする時とか、このOKLCHでカラーバンドを作ると何となくおしゃれな感じになる(主観)。CSSのoklch()はほとんどのブラウザでサポートされており、気軽に使用できる1

Lab色空間

まずヒトの知覚色空間をもとに設計されたCIE XYZがあり、それをヒトの視覚に合わせて非線形圧縮したのが、CIELABと呼ばれる色空間。単にLabとも呼ばれ、Lが明度指数、abがクロマティック指数。

LCh

Labを明度(L)、赤緑座標(a)、青黄色座標(b)からなる直交座標系とすると、彩度(C: Chroma)、色相(h: hue)のLChで表現する極座標系がある。

2

LabとLCh色空間

LabとLCh色空間2

明度、彩度、色相を独立して調整できるため、より直感的にグラデーションや色の調整がしやすい、という利点がある。

絶対色空間

XYZ、Labはデバイス非依存の色モデルだが、色を指定するときは、デバイス上の色空間とのマッピングが必要となる。sRGBRec. 2020といった絶対色空間では、白色点と原色(RGB)の座標が固定されており、XYZとの変換を可能にする。

3

色空間と人間が知覚可能な色の範囲

色空間と人間が知覚可能な色の範囲3

OKLab

人の視覚はRGBで均等ではない。暗い色で色差を感じにくかったり、青系の変化に鈍かったり、逆に緑〜黄色では僅かな差でも変換を感じたりする。そこで知覚的に均等な色空間(perceptually uniform color space)が便利となる。CIELABもその1つだが、特にディスプレイ向けに調整された知覚均等色空間として人気なのが、OKLabである。

OKLabは2020年に Björn Ottosson によって提案された。人間の知覚に近い、色差が均等になるよう設計された色空間となっている。

上記サイトで紹介されている、OKLabと、sRGB空間でのHSVで、それぞれ彩度一定で色相を変化させた場合のグラデーションが、その特徴を表している。

OKLabで彩度一定で色相を変化

OKLabで彩度一定で色相を変化

sRGB上のHSVで、彩度一定で色相を変化

sRGB上のHSVで、彩度一定で色相を変化

このOKLabを極座標系で表現したのが、OKLab-LCh、つまりoklch()である。