知覚的に均一になるように設計された新しいカラーモデル「OKLCH」とは？

色の表現方法であるカラーモデルにはCMYKやRGBといったものがありますが、知覚的に均一になるよう設計された新しいカラーモデルの「OKLCH」は、人間の色認識の精度が大幅に向上し、色彩の扱いがはるかに容易になるという利点を持っているそうです。このOKLCHとは一体どういったものなのかについて、OpenSeaのデザイナー兼デザインエンジニアのヤクブ・クレヘル氏が解説しています。

What are OKLCH colors?
https://jakub.kr/components/oklch-colors

OKLCHが他のカラーモデルとどのように異なるかを理解するには、まずは基本的なカラー概念を理解する必要があります。カラーモデルは色を記述するためのシステムで、RGB、HSL、LCH、OKLCHなどさまざまなものがあり、基本的には色の操作や理解のしやすさを決定するためのものです。

色域とはカラーモデルで表現可能な色の範囲を示すものです。一般的な色域にはsRGBやDisplay-P3などがあります。

色空間に入ると、より細かいニュアンスが出てきます。色域を定義するだけでなく、白色点や伝達関数といった要素も定義できるようになりますが、クレヘル氏は「記事を簡潔にするため、色空間については省略することにしました」と記しました。

OKLCHはLCHと同様に、明度・彩度・色相の3つの値で構成されています。OKLCHとLCHの違いはカラーモデルが使用する色空間で、OKLCHの場合はOKLabを採用しているそうです。

明度は0～1の範囲で指定することで、明るさを均等に変化させることが可能。彩度は彩度だけでなく色の強度も制御できます。そして色相は、0～360までの範囲で色相を制御可能です。

例えば、以下のような角の丸いボタン(ピルボタン)をデザインし、それぞれに異なる色を設定するとします。sRGBを使用する場合の一般的なワークフローは、まず最初の色を定義し、それに合わせて他の色を手動で選択するというものです。しかし、OKLCHを使えば全ての色に同じ値を使用し、色相だけを変更することが可能。

HSLでも同じことができますが、上の画像のように明るい色もあれば暗い色もあり、目立つ色もあれば目立たない色もあるといった風に、色が均一に見えません。これに対してOKLCHは色相を変えるだけで明度・彩度が均一な色を簡単に利用でき、デザインに簡単に知覚的な均一性を導入できます。これが他のカラーモデルと比べてOKLCHが優れている点のひとつです。

また、OKLCHでは色相以外の値を変更することでも予測可能な色合いの変化を生み出すことが可能。

例えば明度の値を変更する場合、他のカラーモデルとは異なり色相や彩度の変化がありません。明度の値だけを変更した場合、OKLCHはすべての色合いにわたって一貫して青みが保たれています。一方で、HSLは明るい色合いだと紫色がかり、暗い色合いだと灰色がかった濁った色になっているとクレヘル氏は指摘しました。

OKLCHにおけるグラデーションの仕組みは、sRGBとは大きく異なります。sRGBではグラデーションは赤、緑、青の値で計算されるため、中間点がぼやけたり、明るさが不均一になったりすることがよくあるそうです。しかし、OKLCHでは明度・彩度・色相に基づいて計算が行われるため、開始点と終了点の色は同じでも、グラデーションの中間では全く異なる色になることがわかります。

ただし、OKLCHのグラデーションは滑らかに見えるかもしれませんが、定義したことのない色も見えてしまう可能性があるため、クレヘル氏は「これは諸刃の剣」と表現しています。なお、OKLCHのグラデーションにおいて中間で全く異なる色が出現する理由は、色相が円形であり、グラデーションが予期せぬ迂回を繰り返す可能性があるためです。

これを回避するため、多くのツールではグラデーションにOKLABを使用すると、クレヘル氏は語っています。OKLABは色相が直線であるため、より一貫性のあるグラデーションを作成できるとのこと。

現代のディスプレイはsRGBがサポートするよりも広い範囲の色域を表示可能です。このため、sRGBに準拠したカラーモデルでは現代のディスプレイの広い色域を有効活用できません。一方で、OKLCHがサポートしているDisplay-P3はsRGBより幅広い色表現が可能です。

また、OKLCHは実際のディスプレイで表示できる以上の色を定義でき、sRGBやDisplay-P3のような実際の色域に収まらない値も指定可能です。

OKLCHはCSS Color Module Level 4で導入され、全ての最新のブラウザでサポートされています。ただし、古いブラウザなどではOKLCHがサポートされていないケースもあるので注意してくださいとのこと。

なお、OKLCHに対応したカラーパレットを生成できる「uchu」というツールもあるので気になる人は使ってみてください。

OKLCHに対応した拡張された色域のカラーパレットを生成できる「uchu」 - GIGAZINE