こんにちは、hiroです。
OKLCHというカラーモデルを知りましたのでご紹介します。
OKLCHは、明度(Lightness)、彩度(Chroma)、色相(Hue)の3つの要素で色を表現します。
HSB色空間(HSVやHSLなど)と比べて、同じ明度や彩度の変化が人間の目で均一に感じられるよう設計されたカラーモデルです。
OKLCHについて詳しく解説されている記事があります。英文ですが興味がある方はご確認ください。
What are OKLCH colors?
https://jakub.kr/components/oklch-colors
OKLCHを使うと、明度と彩度を固定し色相のみを変えることができるので、トーンを合わせた色を簡単に作ることができます。下の画像は、ボタンの色を設定した例です。
上段がOKLCH:oklch(L, C, H)で、L(明度)とC(彩度)を固定し、H(色相)のみを変えて色を作成したボタン。
下段がHSL:hsl(H, S, L)で、S(彩度)L(輝度)を固定し、H(色相)のみを変えて色を作成したボタンです。
HSLでもOKLCHと同様に色相のみを変えることができますが、明るい色もあれば暗い色もあり、目立つ色もあれば目立たない色もあり、均一に見えません。
OKLCHのカラーピッカーツールはいくつかありますが、一つご紹介します。
OKLCH Color Picker & Converter
また、OKLCHでカラーパレットを生成できるツールもあります。
また、OKLCHはCSSにも導入されており、最新版であれば全てのブラウザでサポートされています。
oklch() – CSS: カスケーディングスタイルシート | MDN
※古いブラウザではサポートされていないものがあるのでご注意ください。
今後色を設計する際に、OKLCHも採用してみたいと思います。
