设计师给你了一个 P3 色域的色值，你写进 CSS 里——今天发现旧手机直接偏成了另一个颜色。这就是 sRGB 的天花板，CSS 终于把它彻底原生化了。

配了一个 P3 色值的颜色，写进 CSS 之后设计师在旧手机上打开——颜色直接偏了。sRGB 的天花板卡在这里，2026 年 CSS 终于把高动态色彩这件事彻底原生化了。

color()、相对颜色语法、oklch()——这三条一起，把设计系统的颜色管理方式彻底变了。

color() 进了宽色域的门

CSS 以前所有的颜色函数默认都在 sRGB 色域里跑。sRGB 覆盖不了 P3 屏幕能显示的那些更鲜艳的红和绿。你在 Figma 里配了一个 P3 色值，写进 CSS 里，Safari 打开一看——颜色变了。

color() 函数把这个事情原生化了。它接受一个显式的色彩空间标识符：

/* 直接写 Display P3 色值 */
background-color: color(display-p3 0.42 0.36 0.91);

Chrome 111、Firefox 113、Safari 15.2 全部支持，这条路 2023 年就通了。但光能写进去还不够——问题在于旧设备看到 P3 颜色会做 gamut mapping，把颜色「压」进 sRGB，结果就是颜色偏差。

所以正确的写法是叠一层后备：

.button {
  background-color: #6C5CE7;  /* sRGB 后备 */
  background-color: color(display-p3 0.42 0.36 0.91);  /* P3 设备用这个 */
}

支持 P3 的屏幕显示鲜艳的颜色，不支持的设备回退到 sRGB。

相对颜色语法：设计系统终于不用靠 Sass 了

Color Level 5 真正改变游戏规则的，是相对颜色语法。

以前你想从主色派生一个 hover 颜色，要靠 Sass 写一个函数，或者在 JavaScript 里算。现在 CSS 自己会了：

:root {
  --brand: oklch(65% 0.25 260);
}

.button:hover {
  /* 在主色的基础上把亮度提高 15% */
  background-color: oklch(from var(--brand) calc(l + 0.15) c h);
}

.button:active {
  /* 把主色的亮度降低 20%，色相旋转 30 度 */
  background-color: oklch(from var(--brand) calc(l - 0.2) c calc(h + 30));
}

from 关键字把原始颜色拆成通道变量，calc() 直接做算术。l 是亮度，c 是色度（饱和度），h 是色相。一个主色驱动所有变体——改一处，全部更新。

为什么推荐 oklch() 而不是 hsl()？因为 oklch() 的亮度通道是感知均匀的。HSL 的「L」不是真的亮度，调同样的值在不同色相上看起来差很多。OKLCH 的「L」是心理物理学的亮度，增减 0.15 看起来始终一致。

color-mix()：终于能好好混色了

color-mix() 接受两个颜色和一个混合比例：

.card {
  background-color: color-mix(in oklch, var(--brand) 85%, white);
  color: color-mix(in oklch, var(--brand) 90%, black);
}

in oklch 关键字告诉浏览器在感知均匀空间里做混合，结果比 RGB 混色自然很多。

2026 年了，颜色管理变成什么样了

CSS Color Level 5 在 2026 年 5 月达到完整跨浏览器 Baseline：oklch()、color() 相对语法、color-mix() 全部进入生产可用状态。不用 polyfill，不用预处理器。

设计系统的颜色管理现在变成这样：

:root {
  /* 一个主色，全系统的颜色源头 */
  --primary: oklch(65% 0.25 260);

  /* 用相对语法派生所有变体 */
  --primary-hover: oklch(from var(--primary) calc(l + 0.1) c h);
  --primary-active: oklch(from var(--primary) calc(l - 0.1) c h);
  --primary-muted: oklch(from var(--primary) l calc(c * 0.5) h);
  --primary-text: oklch(from var(--primary) calc(l + 0.55) c h);
}

改一个 –primary，所有变体自动更新。这以前是 Sass 的领地，现在是 CSS 本身的能力。

下一步：翻出你的设计系统色板，把那个手动维护的颜色变体列表删掉，用 oklch() + 相对颜色语法重新写一遍。你会发现颜色管理的代码少一半，维护起来省心得多。