color(display-p3) 是否生效取决于设备、系统、浏览器三重条件，缺一即降级为 srgb；需验证 window.matchmedia("(color-gamut: p3)").matches 并检查开发者工具 rendering 面板。
直接写 color(display-p3 1 0 0) 不会启用 Display P3 渲染——它只是语法合法，是否生效取决于设备、系统、浏览器渲染管线三重条件，缺一即降级为 sRGB。
为什么写了 color(display-p3) 却还是灰的
这不是你值填错了，是浏览器根本没走 P3 渲染路径。常见现象包括：iPhone 上红色发粉/发橙、Safari 开发者工具 Rendering 面板显示 “Gamut: sRGB”、window.matchMedia("(color-gamut: p3)").matches 返回 false。
- 设备硬件不支持（iPhone 12 以下、多数安卓机、Windows/macOS 普通显示器）
- 系统未开启广色域（iOS/macOS 默认开，但某些企业 MDM 策略可能禁用）
- 页面缺少必要上下文：没声明
<meta name="color-scheme" content="light dark">，或没用@supports (color: color(display-p3 0 0 0))包裹 - 父级元素用了
transform、opacity或filter，整层叠上下文被强制回退到 sRGB 合成
color(display-p3) 的参数必须是原生 P3 值，不是换算出来的
把设计稿里的 #FF6B6B 直接改成 color(display-p3 1 0.42 0.42) 是典型错误——sRGB 和 Display P3 是两个不重叠的色域三角形，数值不能线性映射。
- 必须用专业工具导出：Photoshop 中启用
Proof Setup > Display P3+Preserve Color Numbers，再用吸管取色并复制“Display P3”小数三元组 - Figma 需配合插件（如 P3 Color Picker）或导出时明确选择 “Export as Display P3”
- 参数只能是
0.0–1.0范围内的小数，color(display-p3 100% 42% 42%)、color(display-p3 255 107 107)、color(display-p3 #FF6B6B)全部无效，浏览器静默忽略 - alpha 写法唯一正确形式：
color(display-p3 0.98 0.35 0.35 / 0.8)；逗号分隔、空格混用、百分比写法都会导致解析失败
background-color 用 color(display-p3) 最容易失效
这是当前最不稳定的使用场景。底层绘制常绕过色彩管理，尤其在 iOS Safari 和部分 Android WebView 中，background-color 会被直接映射到 sRGB 输出空间。
- 替代方案：改用
background-image: linear-gradient(color(display-p3 1 0 0), color(display-p3 1 0 0))，单色无角度渐变更大概率保留原始色域 - 避免简写覆盖：
background:会清掉前面定义的background-image，要分开写或用background-color: transparent叠加 - 不要指望
rgb()自动 fallback：只写color(display-p3)时，不支持的浏览器（如 Firefox、旧 Chrome）会跳过整条声明，变成透明或继承色——必须显式前置 fallback，例如：
button {
background-color: rgb(255, 0, 0);
background-color: color(display-p3 1 0 0);
}
display-p3 不是万能的，别碰这些地方
目前只有基础属性有稳定支持，其他地方写了也白写，甚至可能破坏样式。
-
box-shadow、text-shadow、gradient（非单色线性渐变）中使用color(display-p3)—— Safari 16.4+ 仍不支持，会静默降级 - 混用色域声明：
color(display-p3 1 0 0); color(srgb 1 0 0);不是 fallback 关系，整个声明可能被浏览器丢弃 - 写
color(rec2020 ...)或color(a98-rgb ...)—— CSS Color 4 草案已有定义，但截至 2026 年 5 月，无任何主流浏览器实现，等于注释 - 依赖
@media (color-gamut: p3)做逻辑分支时，注意它检测的是浏览器上报能力，不是屏幕物理能力；小米/OPPO 等安卓旗舰即使硬件支持，系统层也不上报，该媒体查询仍不匹配
真正难的不是写对函数，而是确认那三个条件同时成立：设备真支持、系统真开启、浏览器真启用。每次调测前，先在控制台跑 window.matchMedia("(color-gamut: p3)").matches 和检查 Rendering 面板，比反复改颜色值更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
