前書き#
再度、oklch について考え、短い記事を書くきっかけは、daisyUI が新しい 4.0 バージョンをリリースし、その中で oklch を新たに導入したからです。
さて、この新しいカラーシステムについて話してみましょう。
前書きの後ろに#
まず、oklch という名前の豆について考えてみましょう。
CSS の標準（将来的なもの）では（https://www.w3.org/TR/css-color-4/#lab-colors:~:text=LCH%2C%20Oklab%20and-,Oklch,-9.1.%20CIE）、先頭文字を大文字にして Oklch と書かれていますが、興味深いことに、Lab は先頭文字を大文字にして LCH はすべて大文字で書かれています。
ブラウザの実装では、もちろんすべて小文字の oklch が使用されています。
（https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch ）
（https://www.w3.org/TR/css-color-4/#specifying-oklab-oklch ）。
前述の daisyUI のリリースログでは、すべて大文字の OKLCH が使用されています。
発音の面では、私はフルスペルの発音、「O-K-L-C-H」を好む傾向があります。l が単語の中にある場合、それは簡略化された発音にはならない運命にあるということです。oklab は「ok-lab」と読まれるのはかなり自然です、ハハハ。
はじめに - oklch とは何か#
記事は少し重たくなってしまいましたが、実際には、多くの人々にとって、現在の段階でも、多くのフロントエンドエンジニアやデザイナーにとって、oklch はまだあまり知られていないと言えます。
私はこの記事を非常におすすめします。非常に詳しく説明されています。
https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
（また、複雑なオリジナルの論文もあります https://bottosson.github.io/posts/oklab/ ）
簡単に言えば、oklch とその関連技術は、新しい色の表現方法です。そして、私は oklch が将来の主流の色になると考えています。
oklch は、l は明度、0% - 100%。
c は彩度、0 - 0.37。
h は色相、角度。0 - 360
c と h は極座標の点を構成します。
大きなカラーパレットでは、h は角度を決定することができ、角度は虹の色に直感的に対応させることができます。赤、オレンジ、黄、緑、シアン、青、紫の順に 0 から時計回りに回転します（おおよそ、oklch では赤の角度は 20 です）。c は色の中心からの距離を決定し、距離が遠いほど、0 から遠くなり、彩度が高くなり、色が鮮やかになります。逆に、距離が近いほど、彩度が低くなり、灰色に近づきます。
そして、l は明度であり、私にとって oklch の最も優れた特徴だと思います。oklch は、「知覚される明度」、つまり "perceived lightness" を採用しています。従来の明度ではなく、これに似たものです。音量の db の対数表現法と同様に、"音の音量 - 音のエネルギー" の関係に似ています。"発光の明るさ - 網膜の知覚される明るさ" も非線形で均一ではなく、異なる差異があります。oklch はこの問題を解決しました。これは、以前のどの色のシステム（RGB、CMYK、HSL など）も解決できなかった問題です。この特性は、フロントエンド開発者やデザイナーに非常に好まれるものです。
同様に優れているのは、c と h の組み合わせによる平面上のカバレッジで、非常に広範な色の範囲をカバーすることができます。これは、従来の RGB の混合光表現では実現できないものであり、私が oklch が将来的に大いに輝く理由だと考えています。P3 だけでなく、Rec2020 を超えて、産業の発展に伴い（はい、産業です、コンピュータやインターネットではありません）、将来の色は予測可能な形で事前に網羅されるでしょう。
また、そのため、c を使い切ることはできないかもしれません。0.37 はすべての色が達成できる値ではありません。
l c h の 3 つの要素は、小数値にすることもでき、それによって色の数を表現する精度が決まります。上限はありません。
このカラーフォーマットは、虹とピピ虾の両方の特性を持っています。
何に使うの？#
より赤くする。
( https://oklch.com/#62.795536061455145,0.2872,29.2338851923426,100 )
例えば、RGB の場合、ff、255 よりも大きな数字を指定することはできませんので、より赤くすることはできません。なぜなら、RGB の本質は最も赤い点を規定しているからです。0-ff は赤の成分を均等に分割しているだけです。これが #f00 と #ff0000 が同じ色を表す理由であり、本質的には細分化されたグレースケールの数が異なるだけであり、#fff000000 に追加しても赤をより赤くすることはできません、ただ赤から白へのグラデーションがより細かくなるだけです。
赤をより赤くするだけでなく、先述のブログでも開発者にとってより友好的な理由が多数挙げられていますので、ここでは省略します。簡単に言えば、以前はボタンをホバーしたときに明るくするためには、2 つの異なる色が必要でしたが、今では lch の l 成分を調整するだけで済みます。
:root {
--accent: oklch(70% 0.14 113);
}
.button {
background: var(--accent);
}
.button:hover {
background: oklch(from var(--accent) calc(l + 10%) c h);
}
デザイナーにとっても、より広い色域を使用して、より簡単に色やカラーパレットを生成することができます。
途中で#
oklab と oklch の変換については触れません。lch と oklch の関係についても触れません。先述のブログで非常に詳しく説明されています。
最後に#
実は、私は色について非常に正確な理解を持っている人です。日常の仕事では、大まかに RGB 成分を調整 / 使用して、目的の色を直接得ることができます。また、心の中で 16 進数の背後に隠された景色を窺うこともできます。
しかし、この技術は恐らく絶えてしまうでしょう。（エアタグですね）
oklch は非常に直感的です。そして、より多くの情報を表現しながら、より便利になりました。
次のカラー時代は、きっと虹とピピ虾の時代です。