概要

OKLCH（オーケーエルシーエイチ）は、CSSでウェブサイトの色を指定する新しい方法です。

これまでウェブサイトの色を指定するときは、赤・緑・青の光を混ぜる「RGB」や、色相・彩度・明度を組み合わせる「HSL」という仕組みが使われてきました。しかし、OKLCHは「人間の目がどう色を感じるか」を基準に作られており、異なる色でも「同じ明るさ」や「同じ鮮やかさ」に揃えやすいという特徴があります。

詳しくは MDN Web Docs の oklch() の解説 を参照してください。

詳しい説明

OKLCHは、3つの要素の頭文字をとったものです。

• L（Lightness / 明るさ）: 0%が完全な黒、100%が完全な白を表します。
• C（Chroma / 鮮やかさ）: 0にすると白黒（グレー）になり、数値が大きくなるほど色が鮮やかになります。
• H（Hue / 色合い）: 0から360までの角度で色を表します（0が赤系、90が黄系、180が緑系、270が青系など）。

この3つの数値を調整することで、自由自在に色を作り出すことができます。

今までのCSSでよく使われていた「HSL」は、OKLCHと似た仕組みを持っています。しかし、HSLには「同じ明るさの数値にしても、色によって人間の目には違う明るさに見えてしまう」という欠点がありました。

たとえば、HSLで「明るさ50%」に設定した黄色と青色を並べると、人間の目には黄色の方が圧倒的に眩しく、青色は暗く沈んで見えます。これは、HSLが機械的な計算で色を作っているためです。

一方、OKLCHは「人間の目の感覚」に合わせて計算し直されています。そのため、OKLCHで「明るさ70%」に設定すれば、黄色でも青色でも、人間の目には「同じくらいの明るさ」として認識されます。

CSSファイルの中で使用する場合は、以下のように記述します。

/* ボタンの背景色と文字色をOKLCHで指定する例 */
.button {
  background-color: oklch(70% 0.1 250);
  color: oklch(30% 0.1 250);
}

OKLCHは、最新のウェブ開発ツールやフレームワークで積極的に採用され始めています。たとえば、開発会社の Evil Martians が提供している oklch.com などのカラーピッカーツールや、世界中で使われている Tailwind CSS の最新バージョンなどで標準的に使われています。

まとめ

OKLCHを使うと、明るさ（L）と鮮やかさ（C）を固定して色合い（H）だけを変えることで、トーンが揃った美しい配色を簡単に作ることができます。また、文字が読みやすくなる背景とのコントラスト基準を管理しやすくなるメリットがあります。

一方でデメリットとして、色合いによって出せる「最大の鮮やかさ」が異なるため、適当な数値を入力するとモニターで表現できない色になることがあります。また、数年前にリリースされた古いブラウザでは機能しない場合がある点には注意が必要です。

このサイトでの使われ方

このサイトの現在の開発では、主に従来の16進数カラーコード（#000000の形式）やHSLが使用されています。しかし、今後サイト全体のカラーテーマ（ライトモードとダークモードの切り替えなど）を整備したり、ボタンやテキストのコントラストを最適化したりする際に、安全で統一感のある色管理ができるOKLCHの導入が検討できます。