OKLCH 色彩空间深度解析

OKLCH 是一种现代的色彩表示方法，旨在更贴近人类的视觉感知。它的名字是其三个核心要素的缩写：Lightness (亮度)、Chroma (色度) 和 Hue (色相)。与传统的 HSL 或 RGB/Hex 模型相比，OKLCH 提供了更直观、更可预测的色彩操作体验。

其核心优势在于感知均匀性。这意味着，当你在 OKLCH 模型中调整一个值时，其在视觉上的变化幅度是线性和可预测的。例如，将亮度值从 40% 增加到 50% 的视觉变化，与从 80% 增加到 90% 的变化是相似的。这解决了 HSL 模型中长期存在的问题，即相同亮度的蓝色和黄色在视觉上亮度差异巨大的问题。

核心组件

1. L (Lightness / 亮度): 表示颜色的感知亮度。范围从 0% (纯黑) 到 100% (纯白)。这是决定颜色明暗的关键。
2. C (Chroma / 色度): 表示颜色的鲜艳程度或饱和度。值为 0 时是灰色，值越高颜色越鲜艳。这个值在理论上是无界的，但在 sRGB 色域内通常在 0.37 左右达到最大。
3. H (Hue / 色相): 表示颜色在色轮上的角度，范围从 0 到 360 度。例如，0 附近是红色，120 附近是绿色，240 附近是蓝色。

CSS 中的应用

在 CSS 中，我们可以直接使用 oklch() 函数来定义颜色。这使得创建动态和可维护的颜色系统变得异常简单。

/* 基本语法: oklch(亮度 色度 色相 / 透明度) */
.element {
  /* 一个鲜艳的蓝色 */
  background-color: oklch(55% 0.2 250);
  
  /* 相同的颜色，但有50%的透明度 */
  color: oklch(55% 0.2 250 / 0.5);
}

/* 使用 calc() 动态调整颜色 */
:root {
  --brand-hue: 250; /* 蓝色 */
}
.button-primary {
  --lightness: 55%;
  background-color: oklch(var(--lightness) 0.2 var(--brand-hue));
}
.button-primary:hover {
  --lightness: 60%; /* 悬停时仅增加亮度，效果可预测 */
}

超越 sRGB 的色彩

OKLCH 的另一个强大之处是它原生支持宽色域 (Wide Gamut)，如 Display-P3。这意味着在支持的现代显示设备上，你可以使用比传统 sRGB 色域鲜艳得多的颜色，创造出更丰富、更具冲击力的视觉效果。由于其感知均匀性，它也大大提升了网页可访问性 (Accessibility)，因为可以更可靠地计算和保持颜色之间的对比度。