用 CSS HSL 來寫顏色吧！（以及更好的方法）

用 CSS HSL 來寫顏色吧！（以及更好的方法）

在CSS中编写颜色时，通常我们会使用十六进制（HEX）或RGB来定义颜色。然而，这两种方式都存在一些问题。十六进制格式对人类来说不容易阅读，例如#27cc95，仅凭这些数字很难想象出颜色是什么样子。虽然十六进制容易解析，但通过三原色的多寡来呈现颜色并不直观。

此外，在设计系统中，相同色系的颜色会根据各种亮度制作色盘，方便设计师配色。然而，即使是颜色的亮度发生变化，HEX或RGB也可能出现极大不同。例如，#BEDBFE与#1E40AF，前者比后者亮，但仅从HEX或RGB的表现方式中很难看出这一点。

CSS和浏览器的大幅进化后，现在可以用一个更容易理解颜色定义的格式——HSL来写颜色。

HSL是什么

HSL是用人类比较容易理解的方式来表达颜色，分为H（色相）、S（饱和度）、L（亮度）三个维度。色相环以正上方为0度开始，分别对应红橙黄绿蓝靛紫橘等颜色。

在CSS中，hsl可以这样表示：

.my-color {
  color: hsl(220deg, 30%, 20%);
}

在看到实际颜色之前，我们就可以知道以下信息：

• 在色相的220度，大概会是偏蓝的颜色
• 是个饱和度偏低、有点暗（或者说是暗色）的蓝

感知亮度会随色相改变

尽管HSL用起来很直观，但有些颜色尽管HSL的亮度相同，人眼感觉起来仍然比较亮。最显而易见的例子是黄色。例如，hsl(236deg,100%,50%)和hsl(61deg, 100%, 50%)，同样是亮度50%，黄色看起来就是比较亮。这是由于每个颜色波长不同的原因。

HSL作为设计工具

在非纯色背景中呈现文字时，可以通过调整饱和度与亮度让整体更加和谐。例如，可以减少背景色的饱和度并降低亮度，除了使用黑色外还可以染上一点背景色，使颜色看起来更协调。

HSL只支持sRGB色彩空间

sRGB是最广泛使用的色彩空间，涵盖了大多数显示器和网络应用的色域。然而，像Apple推出的P3等更广的色彩空间，可以在高端显示器上展现更丰富的色彩范围。

HSL的下一步——OKLCH

为了解决HSL中颜色感知亮度的问题，CSS4推出了新的颜色定义方式——OKLCH。OKLCH不仅能更准确地反映人眼对亮度的感知，还支持更广的色彩空间如P3，并能自动匹配最接近的可渲染颜色。

总结

在网页开发中，传统的HEX和RGB颜色表示法虽然广泛使用，但存在不易阅读和直觉性不足的缺点。HSL通过色相、饱和度和亮度三个维度来描述颜色，使得颜色的调整更加人性化。然而，HSL也存在局限性，例如不同色相的感知亮度不同。CSS4推出的OKLCH作为解决方案，不仅提升了颜色表现力，还支持更广的色彩空间，为未来的色彩标准做好了准备。