CSS 中最好的颜色函数？

我之前说过 HSL 是我们拥有的最佳颜色格式。我们大多数人都不像 David DeSandro，他可以读取十六进制颜色代码。HSL(a) 代表色相、饱和度、亮度和 alpha 通道（如果需要）。

hsl(120, 100%, 40%)

色相并不直观，但也不是很奇怪。您可以在色轮上从 0 到 360 度旋转。饱和度更直观，0% 时颜色全部被吸走，就像灰度一样，100% 时则是在该色相下的完全饱和颜色。亮度在 50% 时为“正常”，随着您分别向 100% 和 0% 移动，会添加白色或黑色。我确定这不是解释它的正确科学或技术方法，但这正是大脑的逻辑。

使用 HSL 仍然存在一些问题，Brian Kardell 在文章中深入解释了这些问题。我离颜色专家还差得很远，但我认为我理解了 Brian（和 Adam）在文章中所说的内容。**假设您有三种不同的颜色，它们在 HSL 中具有完全相同的亮度。但这并不意味着它们实际上都具有相同的亮度。**这有点奇怪，尤其是在您**将此颜色格式用作颜色系统的一部分**时。

好消息是，有一些颜色功能已在 CSS Level 4 模块中指定，可以帮助解决此问题：Lab 和 LCH。查看 Adam 的示例，其中 Lab 中的颜色值更准确地反映了我们感知到的实际亮度。

HSL 与 LAB:: 亮度💡

来自我们棘手颜色投票的相同颜色，但这次我显示了相同颜色的 LAB 版本。请注意，LAB 的亮度值与我们投票结果的接近程度！

🎨颜色空间并不都一样！https://#/AIEs0amdWY pic.twitter.com/xkEguq3KZG

— Adam Argyle (@argyleink) 2019年12月3日

Brian

有一些颜色空间，例如 Lab 和 LCH，它们处理整个光谱并具有感知均匀性等特性。因此，如果我们想要优秀的颜色函数用于真实的設計系統，每个人似乎都同意在 Lab/LCH 颜色空间中进行上述数学运算的支持是理想的启用功能。

在Chrome 的错误单中，Tab 认为这些实现起来几乎微不足道。

请注意，lab()/lch()/gray() 都可以被积极地转换为我们现有的颜色基础设施；它们没有引入任何根本性的新概念，它们只是指定颜色的更好方法，更贴近我们眼睛的实际功能，而不是与 rgb 像素的功能紧密相关。

转换为 rgb 的转换函数只是一些代码，但只是一些指数运算和一些矩阵乘法，并且在规范中得到了很好的记录。

我认为这应该是一个 GoodFirstBug 之类的东西。