使用 OKLCH 解锁鲜艳色彩

简介

多年来，网页设计发生了显著变化，我们处理颜色的方式也是如此。虽然 RGB 和十六进制代码几十年来一直是标准，但为了解决它们的局限性，出现了一个新的竞争者：OKLCH 颜色模型。

什么是 OKLCH？

OKLCH 是基于 Oklab 颜色模型的色彩空间，旨在实现感知均匀。它解决了 HSL 和 RGB 等旧模型中存在的许多问题，特别是关于我们要如何感知亮度和饱和度的问题。

OKLCH 这个名字代表：

• L - 亮度 (Lightness)
• C - 色度 (Chroma)
• H - 色相 (Hue)

OKLCH 的组成部分

亮度 (L)

亮度控制颜色的明暗程度。

• 0% 是绝对黑色。
• 100% 是绝对白色。

与 HSL 不同（在 HSL 中，50% 的亮度在不同色相下看起来差别巨大，比如黄色对比蓝色），OKLCH 的亮度是一致的。60% 亮度的值在所有色相下看起来都一样亮。

色度 (C)

色度代表颜色的强度或纯度（类似于饱和度）。

• 0 是完全灰色。
• 0.4 (大约) 是大多数 sRGB 颜色的最大值。
• 对于广色域显示器 (P3, Rec.2020)，该值可以更高（例如 0.5 或更多）。

色相 (H)

色相是色轮上的角度，类似于 HSL。

• 0 - 360 度。
• 0 大致是红色，120 是绿色，240 是蓝色。

为什么要使用 OKLCH？

1. 感知均匀性

在 HSL 中，保持亮度不变而改变色相可能会使颜色在视觉上变亮或变暗。在 OKLCH 中，感知亮度保持一致，这使得创建无障碍调色板变得容易得多。

2. 访问广色域色彩

sRGB（十六进制和 RGB 所使用的）只能显示有限范围的颜色。现代显示器支持 P3 和 Rec.2020，可以显示更生动的绿色和青色。OKLCH 允许你访问这些以前无法在 CSS 中指定的“超饱和”颜色。

3. 可预测的色彩混合

由于其感知均匀性，在 OKLCH 中创建渐变和混合颜色可以产生平滑、自然的过渡，而不会出现 RGB 渐变中常见的“灰色死区”。

在 CSS 中使用 OKLCH

所有主要现代浏览器现在都支持 OKLCH。

.my-element {
  /* 鲜艳的粉色 */
  background-color: oklch(60% 0.25 330);
}

.semi-transparent {
  /* 带透明度 */
  color: oklch(80% 0.1 120 / 0.5);
}

结论

OKLCH 是网页色彩的未来。通过提供一种符合人类感知并释放现代屏幕全部功能的颜色定义方式，它为设计师和开发人员提供了一个强大的新工具，用于创建美观、无障碍的数字体验。