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

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

以前写颜色，要么写 #fff、要么写 rgb()、hsl()，都是基于 sRGB 色域。sRGB 能表达的色彩范围是有限的——很多纯正的绿色、紫色、橙色，在 sRGB 里根本调不出来，设计师给你的 P3 色值到浏览器里直接被「截断」了，你看到的就是另一个颜色。

CSS Color Level 5 把这件事彻底变了。color() 函数允许你直接指定色彩空间，不只是 sRGB，还可以是 Display P3、Rec.2020、XYZ——这些色域能覆盖人眼能感知的更广色彩范围。

来看最直接的一个例子：

/* 以前：sRGB 里找不到这个绿，只能估算 */
background: #00ff88; /* 不够纯 */

/* 现在：直接告诉浏览器，我要 Display P3 里的这个绿 */
background: color(display-p3 0 1 0.4);

这两行写出来效果完全不同。前者在旧设备上显示的是 sRGB 范围内的近似色，后者是真正的 P3 色彩——前提是你的屏幕和系统支持它。

相对颜色语法：把一个颜色变成一整套设计系统

Color Level 5 还有一个杀手级功能——相对颜色。用 from 关键字，你可以在一个颜色基础上算出变体，不需要手动配所有色值：

:root {
  --brand: color(display-p3 0.7 0.2 0.1);
}

.button-primary {
  /* 在 brand 基础上加深 20%，自动得到一个配套色 */
  background: color(from var(--brand) display-p3 calc(r - 0.1) g b);
}

.button-ghost {
  /* 变淡 50%，得到一个边框色或次要背景色 */
  background: color(from var(--brand) display-p3 r g b / 0.5);
}

.button-text {
  /* 从 brand 的亮度反推一个深色文字色 */
  color: color(from var(--brand) display-p3 calc(r * 0.3) calc(g * 0.3) calc(b * 0.3));
}

以前这套逻辑要么靠 Sass 变量做运算，要么靠运行时 JS 算——现在一行 CSS 直接原生支持，而且支持所有色彩空间，不只是 sRGB。

渐进增强：写一句 @media 就能兼容旧设备

有人会说「我的用户不一定有 P3 屏幕」。对，所以 color() 天然支持渐进增强：

.hero {
  background: #1a1a2e; /* sRGB 后备，兜底所有设备 */
}

@supports (color: color(display-p3 0 1 0)) {
  .hero {
    background: color(display-p3 0.1 0.1 0.18); /* P3 设备上的真实色彩 */
  }
}

还有一个更精准的检测方式——color-gamut 媒体查询：

@media (color-gamut: p3) {
  /* 只在支持 P3 色域的设备上生效 */
  .gradient {
    background: linear-gradient(
      to right,
      color(display-p3 0 0.8 0.6),
      color(display-p3 0.4 0 1)
    );
  }
}

浏览器支持现状（2026 年 8 月）

color() 函数 + 相对颜色语法：Chrome 111+、Firefox 113+、Safari 15.2+ 全部支持。Display P3、Rec.2020、XYZ 等色域在主流桌面和移动设备上均已覆盖。

唯一要注意的是：这个颜色最终能不能正确显示，取决于用户屏幕和操作系统的色彩管理能力——不是 CSS 本身的问题，是硬件和系统配置的事。

下一步：怎么用起来

1. 先把品牌色迁移到 P3：用 Figma 或者 Chrome DevTools 的颜色面板，把设计师给的 P3 色值直接写进 CSS，用 color(display-p3 …) 格式，不再经过 sRGB 转换。

2. 用相对颜色搭建一套组件色板：把主色定义为一个 CSS 变量，用 color(from var(–brand) …) 算出 hover/active/disabled 状态色——再也不用手写十几个十六进制值。

3. 加上 @supports 兜底：写 P3 颜色时，始终给一个 sRGB 后备值，支持 P3 的设备用好颜色，不支持的也不报错。

这件事的本质是：CSS 从「管颜色怎么显示」升级成了「管颜色在哪个色彩空间里显示」。以前这是设计师和色彩管理系统的事，现在前端工程师直接能控制了。