24bitColors

THE SCIENCE OF
OKLCH & OKLAB

人間の「目」を、そのまま数式にする。

24bitColorsの心臓部で動いているのは、2020年に生まれた最新の色空間「OKLCH」と「OKLAB」です。 これは単なる新しいカラーピッカーではありません。コンピュータが初めて、人間と同じように色を感じられるようになった革命的な出来事なのです。

01. PERCEPTION GAP

「黄色」は「青」より、ずっと明るい

従来のWebデザインで使われてきた「HSL色空間」には、致命的な欠陥がありました。それは 「数値上の明るさと、見た目の明るさが一致しない」 ことです。

下の図を見てください。HSLの計算式では、濃い青も鮮やかな黄色も、同じ「明度50%」だと主張します。しかし、人間の目には明らかに黄色の方が眩しく見えますよね?

「数値は合っているのに、デザインがなんとなくチグハグになる」。そんなデザイナーたちの長年の悩みを、OKLCHは生物学的なアプローチで解決しました。眼球の網膜が受け取る刺激を計算式に組み込むことで、青も黄色も、人間が感じる通りの「正しい明るさ」で管理できるようになったのです。

50%
HSL: 50%
Eye: Dark
Blue
HSL: 50%
Eye: Bright!
Yellow
HSL treats these as EQUAL lightness.
OKLCH fixes this.

▲ HSLの「明度50%」における、実際の見た目の明るさの違い。

02. TWO FACES OF COLOR

地図で読むか、コンパスで読むか

このサイトでは、場面に応じて「OKLCH」と「OKLAB」という2つの言葉を使い分けていますが、実はこれらは全く同じ色空間の「別の表現方法」です。ちょうど、地図上の場所を「緯度経度」で表すか、「ここから北東に何キロ」で表すかの違いと同じです。

OKLAB (直交座標)

L=明度, a=赤緑軸, b=青黄軸

数学的なXY座標のようなもの。「色の距離」を計算するのに最適です。今回の診断でも、無彩色(グレー)の判定や、色同士の近さを計算する裏側ではこのOKLABが活躍しています。

OKLCH (極座標)

L=明度, C=彩度, H=色相

コンパスと距離のようなもの。「もっと鮮やかに」「もっと赤く」といった、人間の直感的な操作に適しています。診断結果の表示や、あなたの好みを分析する表側ではこちらを使っています。

この2つを自由に行き来することで、計算の「正確さ」と、人間の「直感」を両立させているのが24bitColorsの特徴です。特に無彩色(白黒)の扱いにおいて、OKLABは「a=0, b=0」という完全な無を定義できるため、美しいグレーを表現するのに不可欠です。

03. UNBOUNDED FUTURE

「sRGBの檻」からの脱出

これまでのWebデザインは「sRGB」という色の檻の中に閉じ込められていました。sRGBは20年以上前のブラウン管モニターを基準に作られた規格で、現実世界の鮮やかな色の半分も表現できません。

しかしOKLCHには、理論上の「彩度の上限」がありません。今はまだ、多くのスマホやPCモニターがsRGBの範囲しか出せませんが、最新のiPhoneやMacBook(Display P3対応)は既にその外側の色を表示し始めています。

私たちはアルゴリズムをOKLCHで構築することで、将来どのような高性能ディスプレイが登場しても、その性能をフルに活かせる「未来互換性(Future-Proof)」を確保しました。今日あなたが選んだその色は、10年後のディスプレイで見れば、もっと鮮やかに、もっと美しく輝くはずです。

現在のWeb (sRGB)
Your True Color →
OKLCH色空間とは | 24bitColors