2025年02月19日 07時00分ソフトウェア

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

OKLCHは2020年に開発された新しい色空間フォーマットで、人間の視覚システムの特性を考慮して設計されており、従来のRGBやHSLなどの色空間が持つ制限を克服することを目指しています。このOKLCHに対応して、P3やRec.2020などの拡張色域のカラーパレットを生成できる「uchu」がオープンソースで開発されています。

GitHub - NeverCease/uchu: the color palette for internet lovers
https://github.com/NeverCease/uchu

OKLCHの技術的な基盤となっているのは、CIE Lab色空間を改良したOklabです。Oklabは人間の色知覚の非線形性をより正確にモデル化することで、特に青色領域での色の変化をより自然に表現できます。OKLCHはこのOklabを極座標系で表現したもので、L(Lightness：明度)・C(Chroma：彩度)・H(Hue：色相)の3つの成分で色を定義します。

たとえば、sRGBやP3では色をR(赤)G(緑)B(青)の強度で表現します。しかし、このRGBベースの表現方法は人間にとって非直観的であり、さらに色の編集や修正が複雑です。また、コントラスト比の予測が難しく、アクセシビリティの確保が複雑になります。

color: color(display-p3 1 0 0);

一方、OKLCHは色の表現方法を定義する規格で、以下のように表現します。

color: oklch(60% 0.29 145);

Lは0(黒)から1(白)の範囲で指定します。Cは理論的に無限大まで指定可能ですが、実際には使用するディスプレイの色域によって制限されます。Hは0から360度の範囲で指定し、20度付近の赤から始まり、90度付近の黄、140度付近の緑、220度付近の青、320度付近の紫というように一周します。

OKLCHはP3やRec.2020などの広色域をサポートしており、最新のディスプレイ技術が持つ豊かな色表現を活用できます。従来のsRGB色空間では表現できなかった鮮やかな色も、OKLCHを使用することで指定可能になりました。

OKLCHの実用的な特徴として、色の修正や変更を直感的に行えることが挙げられます。例えば、明度のみを変更しても他の要素には影響を与えないため、コントラスト比の調整が容易で、特にWCAG準拠のデザインを作成する際に大きな利点となります。また、実装面では、主要ブラウザのすべてがOKLCHをサポートしています。

カラーパレットの生成やデザインシステムの構築においても、OKLCHは優れた選択肢となります。特に、色の派生やバリエーションの作成が予測可能な方法で行えるため、システマティックなデザインの実現に貢献します。さらに、OKLCHはグラデーションの生成においても優れた結果を示します。従来のRGBベースのグラデーションでしばしば発生する中間色の濁りや、望ましくない色相の変化を避けることができます。つまり、OKLCHは技術的な厳密性と実用性を兼ね備えた色空間として、現代のウェブデザインにおいて重要な役割を果たしているというわけです。

uchuはOKLCHに対応したカラーパレットで、OKLCHのL・C・Hの数値を取得することが可能です。uchuのデモサイトが以下。

uchū demo · expanded palette
https://uchu.style/

以下の緑のページでは、明るい緑・中間の緑・暗い緑の3色が提示されており、それぞれにOKLCHの表現値が書かれています。