前言#
再次想到 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 的 release log 裡，使用全大寫OKLCH。
讀音方面，我更傾向於全拼讀讀法，"O-K-L-C-H"。l在詞的中間的話，注定它不會太好簡化讀法。oklab讀做 "ok-lab"，倒是蠻順口的，哈哈哈。
開頭 - 什麼是 oklch#
ok，文章有些頭重腳輕了，其實對於大多數人來說，甚至在當前階段，對於很多 frontend engineer 和 designer 來說，oklch 還是有些陌生的。
我最為推薦這篇文章，講的十分的詳細。
https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
（另外，複雜的原作者的論文 https://bottosson.github.io/posts/oklab/ ）
簡單來說，oklch，及其家族，是新的顏色表示方式。並且我認為，oklch 將成為未來一段時間內的主流顏色。
oklch，l for lightness，亮度，0% - 100%。
c for chroma， 飽和度，0 - 0.37。
h for hue，角度。0 - 360
c和h組成了一個極座標的點。
在一個大色盤上，h可以決定一個角度，角度可以很直觀的用彩虹🌈來對應，紅橙黃綠青藍紫，從 0 順時針🔁旋轉（近似的，oklch 中紅色的角度是 20）。c決定顏色距離中心點的巨鹿，距離越遠，越遠離 0，飽和度越高，顏色越鮮豔；反之越低就越接近灰色。
而l亮度，是我覺得 oklch 中最優秀的地方。oklch，採取 “感知亮度”，aka "perceived lightness"。而並非傳統的亮度。類比的話，類似於聲音的 db 自然對數表示法。因為同 “耳朵聽覺音量 - 聲音能量” 的關係類似，“發光亮度 - 視網膜感知亮度” 也是非線形的，不均勻的，有差異的。oklch 解決了這個問題。這是之前的任何顏色系統，從 rgb cmyk，到 hsl，都沒能解決，也無法解決的問題。這個特性，實在是太討好前端開發者和設計師們了。
同樣優秀的，c 和 h 在平面的組合，可以覆蓋非常廣的顏色範圍，這也是傳統 rgb 混合光表示法，所沒有辦法實現的，這也是我覺得 oklch 能在未來大方光彩的原因。不僅 p3，甚至不僅 Rec2020，隨著工業的發展（是的，是工業，而不是計算機或者互聯網），未來的顏色都以可預測的形式，被提前囊括。
也正因為如此，你甚至都用不完c，0.37 並不是所有顏色能達到的值。
l c h 三者，都可以是小數值，決定了他們的精度，也就是可以表示的顏色數量，是沒有上限的。
這個顏色格式，擁有了彩虹和皮皮蝦的雙重特質。
有什麼用？#
比紅更紅。
( https://oklch.com/#62.795536061455145,0.2872,29.2338851923426,100 )
rgb 為例，你沒有辦法給出比 ff，255 更大的數字，所以你就沒有辦法表示更紅。因為 rgb 的實質是規定了一個最紅的點。0-ff 只是在均分紅色這個組份。這也是為什麼#f00 和#ff0000表示同一種顏色，其實本質只是細分的份數，也就是灰階，的數量不同而已，新增加到#fff000000，並不會讓紅更紅，只會讓紅 - 白漸變更加細膩。
除了比紅更紅，在上文博客中，提到了很多對於開發更友好的原因，不再贅述。簡單的道理，原先實現一個，按鈕 hover 之後，顏色更亮，需要兩種顏色 的效果；而現在，只需要調整 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 組份，來直接獲得我想要的顏色；或者在心中窺測六個十六進制數背後，隱藏的是什麼樣的光景。
但是，這門技藝，恐怕要失傳了。（air tag 是吧）
oklch 實在是太直觀了。而且是在能表達更多的內容的情況下，在更便捷的情況下，更直觀了。
下一個顏色時代，注定是彩虹皮皮蝦的時代。