如何在CSS中使用color()定义Display-P3颜色？-css教程-PHP中文网

color()函数目前不支持display-p3色彩空间，仅safari 17.4+在部分场景下有限支持color(display-p3...)，且需@supports检测和color-gamut:p3媒体查询配合，其他浏览器均忽略或回退为srgb。

如何在css中使用color()定义display-p3颜色？

color() 函数在 CSS 中不支持 Display-P3

目前（截至 Chrome 125 / Safari 17.5 / Firefox 127），color() 函数**无法直接指定 Display-P3 色彩空间**。CSS Color Level 4 规范虽定义了 color() 语法（如 color(srgb 0.5 0.2 0.8)），但浏览器尚未实现对 display-p3 基色空间的支持——所有主流引擎都只认 srgb、rec2020 和 a98-rgb，display-p3 被忽略或回退为 sRGB。

Display-P3 实际可用的写法只有 color(display-p3 …)？

不是。即使你写成 color(display-p3 0.8 0.2 0.3)，Chrome 和 Safari 会静默丢弃该声明（DevTools 中显示为无效），Firefox 直接不解析。真正能生效的 Display-P3 写法仅限：

color(display-p3 0.8 0.2 0.3) —— 仅 Safari 17.4+ 在部分场景（如 background-color）下有限支持，且需页面启用 color-gamut: p3 媒体查询配合；
rgb(r g b / a) 或 #rrggbb 等传统格式 —— 它们始终解释为 sRGB，无论设备是否支持 P3；
color(display-p3 ...) 必须搭配 @supports (color: color(display-p3 0 0 0)) 才能安全降级，否则会被整个规则块跳过。

为什么 display-p3 在 Safari 上有时“看起来有效”？

那不是 color() 的功劳，而是 Safari 对 rgb() 和 hex 的**隐式扩展行为**：当 macOS/iOS 设备启用了广色域屏幕且网页声明了 <meta name="viewport" content="width=device-width, initial-scale=1.0">，Safari 会把某些高饱和度的 sRGB 值（比如 #ff0080）映射到 P3 色域内更接近的点——但这不可控、不精确，也无法指定坐标。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

真正可控的 P3 颜色必须用：

Safari 专属的 -webkit-color-correction: optimize-contrast（已废弃，不推荐）；
或通过 <picture></picture> + srcset 提供 P3 校准的 PNG/WebP 图片；
或使用 CSS @media (color-gamut: p3) 分离样式，再配合 color(display-p3 ...) —— 但仅限 Safari，且值必须是 0–1 浮点数，不能用百分比或十六进制。

现在最稳妥的 Display-P3 实践方式

放弃依赖 color()，改用渐进增强策略：

先写 sRGB fallback：color: #ff4d88;
再叠加 Safari-only P3 声明：color: color(display-p3 1.0 0.3 0.53);

用 @supports 包裹 P3 行，避免其他浏览器报错：

@supports (color: color(display-p3 0 0 0)) {
  .btn { color: color(display-p3 1.0 0.3 0.53); }
}

注意：Display-P3 坐标不是“调高饱和度”，而是不同原色三角形——display-p3 1 0 0 是比 sRGB 更红的红，但 display-p3 0.8 0 0 可能反而比 srgb 1 0 0 暗，需用色彩工具（如 Apple 的 ColorSync Utility）校验。