知覚均等な色空間 ― Lab・LCh・OKLCH

数値の差=見た目の差ではない

HSL で明度をどれも 50% にそろえても、黄色は明るく、青は暗く見えます。RGB や HSL は計算しやすい反面、数値の差と、人が感じる見た目の差が一致しません。これが配色やグラデーションで思わぬずれを生みます。

知覚均等とは

数値を同じだけ動かすと、見た目も同じだけ変わる。そういう性質を知覚均等と呼びます。知覚均等な色空間を使うと、「明るさをそろえる」「均等な段階のグラデーションを作る」といった操作が、見た目どおりにできます。

Lab と LCh

Lab は、明度 L と、緑〜赤の a 軸、青〜黄の b 軸で色を表す、知覚に近い色空間です。この a・b を、彩度と色相の極座標に直したものが LCh で、明度・彩度・色相という扱いやすい形になります。

OKLCH

OKLCH は近年 CSS でも使えるようになった、より改良された知覚均等な色空間です。明度をそろえた配色、濁らず均等なグラデーション、広色域の色の扱いに強く、これからの配色で有力な選択肢です。

まとめ

手軽さでは HSV・HSL、見た目でそろえる正確さでは Lab・LCh・OKLCH が有利です。このツールの HSV・HSL で大枠をつかみ、明るさをきっちりそろえたい場面では知覚均等な空間を思い出すとよいでしょう。