写在前边#
再次想到 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 实在是太直观了。而且是在能表达更多的内容的情况下，在更便捷的情况下，更直观了。
下一个颜色时代，注定是彩虹皮皮虾的时代。