CSS 中的 OKLCH：设计系统的感知准确颜色

OKLCH：CSS 中专业界面颜色模型的下一个演进

现代 Web 界面需要先进的颜色系统：主题支持、适配不同显示器，以及无障碍合规性。像 HEX 和 HSL 这样的传统模型在这些方面捉襟见肘，导致调色板不一致且需要没完没了的手动调整。OKLCH 是 CSS 中的新型颜色模型，它通过紧密贴合人类感知来应对这些挑战。它能实现可预测的渐变、自动化主题切换，以及简化设计系统维护，同时不牺牲品质。

颜色模型的演进：从 HEX 到 OKLCH

Web 早期依赖 HEX 代码和 RGB。这些模型技术上简单，但忽略了人类视觉的细微差别。在 RGB 中调整亮度往往会不自然地扭曲颜色，渐变也容易显得“浑浊”。HSL 引入了直观的参数（色相、饱和度、明度），但它保留了一个致命缺陷：HSL 中的等量数值变化并不会产生等量的视觉感知。例如，将蓝色和黄色的明度各降低 20%，主观上的暗度却不同。

LAB 和 LCH 是首批考虑感知均匀性的模型。然而，它们复杂的数学计算和不直观的数值范围阻碍了广泛采用。OKLCH 消除了这些障碍：它使用相同的圆柱表示（L 表示明度，C 表示色度，H 表示色相），但系数经过优化。关键改进在于线性明度标度，其中 0.5 是中灰色，0.1 的变化在任何颜色上都能产生一致的视觉差异。

为什么 OKLCH 更好：对开发者的优势

OKLCH 的主要优势在于感知均匀性。这意味着：

• 颜色间的渐变平滑无带状 artifact
• 自动生成变体（例如悬停状态）保持视觉和谐
• 颜色对比计算更准确，这对无障碍至关重要

这些优势在深色主题中最为突出。在 HSL 中，从浅色切换到深色模式需要手动调整数十个 token。而使用 OKLCH，只需调整一个明度参数，整个调色板就能按比例缩放。例如，在深色模式下，将基础颜色的明度降低 0.15，同时保持对比度比例。

OKLCH 还支持宽色域（P3、Rec.2020），这对现代显示器很重要。在仅限 sRGB 的模型中，鲜艳的强调色会失去冲击力，但 OKLCH 即使转换到较窄的色域也能保持视觉强度。

项目中 OKLCH 的实际实现

CSS 中的 OKLCH 语法简单明了：

.button {
  background-color: oklch(0.62 0.18 264);
}

这里：

• 0.62 — 明度（0 到 1）
• 0.18 — 色度（0 到 sRGB 的 ~0.4）
• 264 — 色相（度）

为平滑 rollout，请遵循以下步骤：

• 识别项目中的关键颜色 token（主色、次色、错误色等）
• 使用浏览器开发者工具将基础颜色转换为 OKLCH
• 用相对颜色重写组件状态（color-mix、color-contrast）
• 通过 @supports 为旧浏览器添加 fallback
• 用新的 CSS 函数（color-contrast()）验证对比度

按钮迁移示例：

:root {
  --primary: #3498db; /* 旧浏览器 fallback */
  --primary: oklch(0.62 0.18 264);
}

.button {
  background-color: var(--primary);
  /* 悬停时，明度降低 0.05 */
  &:hover {
    background-color: color-mix(in oklch, var(--primary) 95%, black);
  }
}

重要提示：不要自动转换所有颜色。始终检查视觉效果——某些传统妥协可能会破坏一致性。

OKLCH 适用的场景：使用案例

OKLCH 在以下项目中特别值得：

• 复杂设计系统（10+ 颜色 token）
• 浅色/深色主题支持
• 严格的无障碍需求（WCAG AA/AAA）
• 宽色域显示器（P3）

对于仅用 2-3 色的简单单页应用，收益微乎其微——继续用 HSL 即可。关键提醒：OKLCH 无法取代手动检查。始终在真实设备上测试界面，因为色域模拟器可能不准确。

关键要点

• 感知准确性：OKLCH 确保数值变化与视觉变化匹配，消除“浑浊”渐变
• 主题自动化：只需调整一个明度参数，即可为深色模式适配整个调色板，无需手动编辑
• 面向未来：宽色域支持避免现代屏幕上鲜艳强调色的问题
• 渐进迁移：从核心 token 开始，通过 @supports 为旧浏览器保留 fallback
• 并非万能药：仍需手动对比检查和视觉审查——尤其是复杂渐变

OKLCH 不仅仅是另一个模型；它是系统化处理颜色的工具。它将颜色从临时 styling 提升为界面架构的核心部分。对于具有长生命周期的可扩展项目，切换能减少技术债。关键在于深思熟虑的实现，聚焦项目真实需求而非炒作。

— Editorial Team