根本原因是浏览器未启用P3色彩管理，需同时满足设备硬件支持（iPhone 12+等）、系统开启广色域、页面渲染上下文启用P3色域三个条件；缺一即降级为sRGB显示。
color(display-p3) 写了但没生效，根本原因不是语法错
直接写 color(display-p3 1 0 0) 在绝大多数手机上就是灰的——这不是你值填错了，是浏览器压根没把它当 P3 颜色处理。iOS Safari 从 16.4 开始支持，但必须同时满足三个条件：设备硬件支持（iPhone 12+、iPad Pro）、系统开启广色域（默认开）、页面渲染上下文启用 P3 色彩管理。缺一不可。
常见错误现象：background-color: color(display-p3 0.9 0.2 0.1) 在 iPhone 15 上看着像褪色的 sRGB 红；开发者工具里“Rendering”面板显示“Gamut: sRGB”警告；window.matchMedia('(color-gamut: p3)').matches 返回 false。
- 检查是否漏了
@supports (color: color(display-p3 0 0 0))包裹，不加这个，Safari 会跳过整条声明 - 确保 HTML 有
<meta name="color-scheme" content="light dark">，某些 iOS Safari 版本不触发 P3 渲染，除非明确声明支持暗色模式 - 别在带
opacity、filter或transform的父容器里设 P3 背景——整个层叠上下文会被强制降级为 sRGB 合成
background-color 用 display-p3 就发灰？换 background-image
background-color 是 P3 支持最不稳定的属性。它走的是底层合成管线，在 iOS 和部分 Android WebView 中常被绕过色彩管理，直接映射到 sRGB 输出空间。结果就是你写了纯红，它给你吐出一个坐标错位、饱和度打折的“P3 感觉版”。
实操建议：把 background-color: color(display-p3 1 0 0) 改成：
立即学习“前端免费学习笔记（深入）”；
background-image: linear-gradient(color(display-p3 1 0 0), color(display-p3 1 0 0));
渐变层在 Safari 和新版 Chrome 中更大概率保留原始色域，且不会因父级 transform 被降级。注意两点：
- 渐变必须是单色、无角度（如
to bottom），避免引入额外插值干扰 - 不要用
background: color(display-p3 ...)简写——它可能覆盖掉前面定义的background-image - 如果元素需要透明背景，别用
rgba()fallback，改用background-color: transparent+ 单色渐变叠加
@media (color-gamut: p3) 不匹配？先确认设备和系统真支持
@media (color-gamut: p3) 不是“检测屏幕多准”，而是问浏览器：“这台设备默认能输出 P3 色域吗？” 它依赖系统上报，不是硬件探测。小米、OPPO、vivo 等安卓旗舰即使屏幕硬件支持 P3，只要系统 UI 层没开启广色域通道（比如 MIUI 默认关闭），就会返回 sgamut。
验证方法：
- 在手机 Safari 或 Chrome 地址栏输入
javascript:alert(window.matchMedia('(color-gamut: p3)').matches)，看弹窗是否为true - iOS 用户检查「设置 → 显示与亮度 → 原彩显示」是否开启（原彩本身不等于 P3，但关了它 P3 渲染大概率失效）
- 安卓用户需进系统「显示设置 → 色彩模式」或「高级显示 → 色域」手动切到 P3（如小米 13/14 系列需在「设置 → 显示 → 高级显示风格」中选择）
别在 @media (color-gamut: p3) 里覆盖所有颜色——只对品牌主色、关键按钮、图表高亮等少数高价值元素启用，其余一律用 rgb() 或十六进制保底。
display-p3 的三元组不能从 #FF6B6B 直接换算
把设计稿里的 #FF6B6B 拆成 rgb(255 107 107)，再除以 255 得到 color(display-p3 1 0.42 0.42)，这是最典型的错误。sRGB 和 Display P3 的色域三角形根本不重合，同一组数值在两个空间里指向完全不同的 CIE 坐标。
正确做法只有两种：
- 在 Figma / Sketch 中导出时选择“Display P3”色彩配置，复制其原生线性三元组（不是 sRGB 值转过来的）
- 用专业工具校样：打开 Apple ColorSync Utility，载入设计稿 PNG，选“Display P3”作为目标空间，“sRGB IEC61966-2.1”为源空间，点“校样”后读取下方显示的 P3 坐标
- 在线工具辅助：Björn’s Color Picker（https://bjango.com/articles/colorpicker/）可切换色域模式，输入
#FF6B6B后选 “Display P3” 查对应值，但需实机比对验证
最后提醒一句：Chrome on Android 目前（v125）仍不支持 color(display-p3)，写了也白写；而 iOS Safari 对 box-shadow 和 gradient 里的 P3 颜色仍不支持——这些边界情况，文档不会写，但你调试时一定会撞上。
