现代 CSS 颜色函数完全指南：OKLCH, color-mix() 及更多
我们在 Web 上定义颜色方式正经历着一场巨大的变革。几十年来，开发者一直依赖 rgb() 和 hex 代码，后来又采用了 hsl() 以获得更好的可读性。然而，随着显示技术的发展（HDR 和广色域屏幕的出现）以及无障碍访问（Accessibility）成为核心需求，这些旧模型正逐渐显露出它们的局限性。
新一代 CSS 颜色函数应运而生：OKLCH、color-mix() 和相对颜色语法（Relative Color Syntax）。这些工具不仅仅是“旧瓶装新酒”，它们解决了颜色理论和 Web 无障碍设计中的根本性问题。
1. 为什么 OKLCH 是新标准
如果你曾尝试使用 HSL 创建一套配色方案，你可能会发现一个问题：具有相同亮度（Lightness）值的不同色调，在肉眼看来亮度并不相等。例如，在 50% 的亮度下，“纯蓝色”和“纯黄色”看起来的明暗程度完全不同。
OKLCH 的感知均匀性
OKLCH 代表：
- O: Oklab（它所基于的颜色空间）
- L: Lightness（感知亮度）
- C: Chroma（色度，即颜色的纯度或强度）
- H: Hue（色相，色轮上的角度）
OKLCH 中的“K”代表 感知均匀性（Perceptual Uniformity）。这意味着如果你保持亮度（L）不变并更改色相（H），颜色在人眼看来将具有相同的明暗程度。
代码示例：
.button-primary {
/* 一种美观、感知平衡的蓝色 */
background-color: oklch(60% 0.15 250);
}
.button-secondary {
/* 更改色相，同时保持完全相同的感知亮度 */
background-color: oklch(60% 0.15 20);
}
OKLCH 的优势：
- P3 色域支持：比标准 sRGB (RGB/HEX) 多出 50% 的颜色。
- 更简单的设计系统：只需调整亮度值即可创建符合无障碍标准的主题。
- 色彩不“发灰”：调整色彩时，颜色依然保持鲜艳，不像 HSL 那样容易变灰。
2. 使用 color-mix() 动态混合颜色
color-mix() 函数允许你直接在 CSS 中混合两种颜色，以前这需要 Sass 等预处理器或 JavaScript 库才能实现。
语法：
color-mix(in <color-space>, <color1> <percentage>, <color2> <percentage>)
实际应用场景：悬停状态
:root {
--brand-color: #3b82f6;
}
.btn:hover {
/* 将品牌色与 20% 的白色混合，获得完美的浅色调 */
background-color: color-mix(in oklab, var(--brand-color), white 20%);
}
在 oklab 空间中混合颜色通常会产生最自然的效果，避免了 RGB 混合中常见的“浑浊”感。
3. 相对颜色语法：颜色操作的未来
相对颜色语法（RCS）可能是 CSS 颜色功能中最强大的补充。它允许你获取一个现有颜色，将其拆解，修改其组件，然后再重新组合。
语法示例：
.alert {
--base-color: blue;
/* 获取 'blue'，保留色相和色度，但将亮度设置为 90% */
background-color: oklch(from var(--base-color) 0.9 c h);
/* 设置相对于原始颜色的透明度 */
color: oklch(from var(--base-color) l c h / 0.8);
}
这实际上让每个 CSS 颜色变量都成了其变体（浅色、深色、透明版）的“工厂”，而不再需要几十个独立的变量。
4. 广色域颜色 (Display-P3)
大多数现代智能手机和笔记本电脑（如 MacBook 和高端安卓手机）都支持**广色域（Wide Gamut）**显示。传统的 CSS 颜色仅限于 sRGB 空间，这意味着它们无法显示这些屏幕所能呈现的最鲜艳的绿色、红色和橙色。
通过 color() 函数配合 display-p3，你可以解锁这些“高清”颜色。
.neon-green {
/* 这种绿色在标准 HEX/RGB 中是无法表示的 */
color: color(display-p3 0 1 0);
}
5. 使用 light-dark() 优化暗黑模式
新的 light-dark() 函数通过根据用户的系统偏好自动选择正确的值，简化了主题的实现。
body {
/* 简单的颜色设置不再需要复杂的 @media (prefers-color-scheme) 代码块 */
background-color: light-dark(#ffffff, #1a1a1a);
color: light-dark(#333333, #efefef);
}
常见问题 FAQ
问：为什么我应该使用 OKLCH 而不是 HSL？
答： HSL 不是感知均匀的。如果你在 HSL 中更改色相而保持亮度为 50%，肉眼观察到的明暗程度会剧烈波动。OKLCH 解决了这个问题，使得构建符合无障碍标准的设计系统和一致的 UI 组件变得更加容易。
问：所有浏览器都支持 OKLCH 吗？
答： 截至 2024 年，OKLCH、color-mix() 和相对颜色语法已得到所有主流常青浏览器（Chrome, Firefox, Safari, Edge）的支持。对于旧版浏览器，你应该提供一个 HEX 后备方案。
问：混合颜色的最佳颜色空间是什么？
答： 对于大多数 UI 任务，oklab 或 oklch 是 color-mix() 最好的插值空间。它们可以避免渐变或混合中间经常出现的 sRGB “灰色死区”。
准备好尝试了吗？
现代 CSS 让设计工具更强大，代码更易于维护。尝试使用我们的 颜色转换器 看看你的品牌颜色在不同格式下的效果。
注意：我们目前正在开发专门的 OKLCH 调色板和相对颜色语法生成器，敬请期待！