CSS中color()函数直接使用display-p3色域（如color(display-p3 1 0 0)）仅Safari 16.4+部分支持，主流浏览器均不支持；可靠跨浏览器方案需结合@color-profile引用真实ICC文件，或用@media(color-gamut:p3)渐进增强。
color()函数在CSS中不支持P3色域直接写法
目前所有主流浏览器（Chrome、Firefox、Safari 16.4+ 除外）都不支持 color() 函数以 display-p3 为色彩空间名来直接指定颜色，比如 color(display-p3 1 0 0) 会解析失败或回退为黑色。Safari 16.4+ 是唯一实现该语法的浏览器，且仅限于 macOS/iOS 原生渲染上下文（如 WebKit 内核下的 Canvas 或部分 CSS 属性），并非全场景稳定可用。
Safari 16.4+ 中 color(display-p3 ...) 的实际限制
即使在支持它的 Safari 中，color(display-p3 ...) 也存在明确边界：
-
display-p3参数值必须是 0–1 范围内的十进制数（不能用百分比或十六进制） - 仅对部分属性生效：如
background-color、color、border-color在多数情况下可渲染，但box-shadow、gradient等常被忽略或降级 - 无 fallback 机制：若浏览器不识别该语法，整条声明会被丢弃，不会退回到备用颜色
- 开发者工具中可能显示为「invalid value」或直接不渲染预览色块
更可靠的方式：用 @color-profile + color() 引用自定义 P3 配置
真正跨浏览器可控的 P3 方案，是配合 @color-profile 规则显式注册一个 P3 配置，再通过 color() 引用它。但注意：@color-profile 目前仅 Safari 支持，且要求 profile 数据以 icc-format 提供（不能只写矩阵）：
/* 必须放在样式表最前面 */
@color-profile --p3 {
src: url('p3.icc');
}
div {
background-color: color(--p3 1 0 0);
}
其中 p3.icc 是真实 ICC v4 文件（如 Apple 提供的 Display P3 Profile），不能用伪路径或 base64 内联替代 —— 浏览器会静默失败。
生产环境建议：用 media query 检测 + 渐进增强
如果真要为 P3 设备提供更饱和的红色/绿色，推荐绕过 color()，改用 @media 检测 color-gamut 并叠加声明：
@media (color-gamut: p3) {
.hero { background-color: #ff0000; } /* Safari 会尝试映射到 P3 红 */
.hero::before { content: ''; background: linear-gradient(to right, #ff0000, #00ff00); }
}
这种写法虽不精确控制 P3 坐标，但能触发 WebKit 对 sRGB 值的 P3 映射逻辑，实测在 iPhone 12+ 和 M1 Mac 上效果明显，且降级安全。
真正需要精确 P3 坐标（比如设计系统原子色板校准）的场景，目前仍得依赖原生 App 或 Canvas 2D Context 的 ctx.fillStyle = 'color(display-p3 1 0 0)'（仅 Safari），CSS 层面尚无稳定、可交付的方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
