Seiry: "写在前边再次想到oklch，并且想写篇简短的文章的诱因是daisyUI发布了新的4.0版本，其中全新引入了oklch"

Seiry·a year ago

写在前边

再次想到oklch，并且想写篇简短的文章的诱因是daisyUI发布了新的4.0版本，其中全新引入了oklch。

https://github.com/saadeghi/daisyui/releases/tag/v4.0.0#:~:text=Breaking%20changes-,%F0%9F%8C%88%20OKLCH%20colors,-daisyUI%204%20uses

是时候想想，说说，这个新的颜色系统了。

写在前边的后边。

首先，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);
}

对于设计师，也可以在使用更广的色域的基础上，更加轻松的生成一系列颜色或者调色板。