T
css colors oklch color-mix design

现代 CSS 颜色指南：OKLCH、color-mix() 与网页设计的未来

探索下一代 CSS 颜色。OKLCH、color-mix()、LCH 和相对颜色语法的完整指南。

2026-04-12

现代 CSS 颜色指南：OKLCH、color-mix() 与网页设计的未来

颜色是网页设计的灵魂，但几十年来，我们一直被限制在 sRGB 以及像 RGB 和 HSL 这种非感知色彩空间的束缚中。现代 CSS 已经打破了这些界限，引入了一个高清晰度、感知均匀且动态的颜色系统新时代。

在本指南中，我们将探索正在改变我们在 CSS 中定义和操作颜色方式的革命性颜色函数和特性。

2. 使用 color-mix() 进行动态操作

CSS 中最强大的新成员之一是 color-mix() 函数。它允许您直接在样式表中混合两种颜色，从而消除了对复杂的 Sass 计算或 JavaScript 的需求。

语法：color-mix(in [色彩空间], [颜色1] [百分比], [颜色2] [百分比])

示例：创建即时悬停状态

.button {
  background: var(--primary-color);
}

.button:hover {
  /* 在主色中混合 20% 的白色 */
  background: color-mix(in oklch, var(--primary-color), white 20%);
}

在 oklch 或 oklab 空间中混合通常比在 RGB 中混合产生更自然的效果。

3. 精通 LCH 和 LAB

虽然 OKLCH 因其直观性而通常被首选，但 LCH 和 LAB 是基础。

  • LAB：使用坐标系统（L 代表亮度，a 代表红绿轴，b 代表蓝黄轴）。
  • LCH：LAB 的极坐标版本（亮度、彩度、色调）。

这些空间与设备无关，可以代表人类可见的所有颜色。它们是现代浏览器内部处理颜色的“原生”方式。

4. color() 函数与 Display-P3

color() 函数是访问特定色彩空间（如 display-p3、a98-rgb 或 prophoto-rgb）的通用方式。

/* 访问广色域 P3 空间 */
.p3-green {
  color: color(display-p3 0 1 0); /* 最纯正的 P3 绿色 */
}

如果设备不支持指定的空间，CSS 将自动回退到最接近的 sRGB 等效颜色。

5. 使用 light-dark() 适应主题

随着深色模式成为标准要求，light-dark() 函数简化了主题切换。它会根据用户的系统偏好，自动为浅色模式选择第一个值，为深色模式选择第二个值。

body {
  background-color: light-dark(#ffffff, #121212);
  color: light-dark(#333333, #efefef);
}

6. 相对颜色语法 (RCS)

相对颜色语法或许是最先进的颜色特性。它允许您“解构”现有颜色，修改其组件之一，并创建一个新颜色——所有这些都在一行代码中完成。

/* 采用现有颜色并更改其透明度或亮度 */
.card {
  --base-color: #3498db;
  background: oklch(from var(--base-color) 80% c h); /* 将亮度提高到 80% */
  border-color: oklch(from var(--base-color) l c h / 0.5); /* 保持颜色，添加 50% 透明度 */
}

现代 CSS 颜色函数总结

函数 最适用于 支持情况
oklch() 感知均匀的设计，无障碍调色板 现代浏览器
color-mix() 混合颜色（悬停状态、覆盖层） 现代浏览器
light-dark() 轻松支持深色模式 较新（检查支持情况）
RCS 从变量派生颜色 新兴

结论

现代 CSS 已将颜色从静态值转变为动态的可编程系统。通过利用 OKLCH 的精确性和 color-mix() 的灵活性，您可以创建不仅更美观，而且更具无障碍性和高性能的网页体验。

准备好升级您的设计了吗？开始尝试我们的 颜色转换器，并关注我们即将推出的 OKLCH 拾色器 和 CSS 颜色混合生成器！

返回博文列表