color(display-p3)需设备、系统、浏览器三重支持，否则静默降级为sRGB；常见失效原因包括色域不匹配、meta缺失、@supports未包裹、合成属性触发回退及background-color固有局限；P3值须经专业工具转换，严禁直接映射sRGB数值；必须用@supports加sRGB fallback，且仅Safari在较新iOS/macOS稳定支持。
color(display-p3) 本身不会提升视觉效果——它只是个声明，是否生效取决于设备、系统、浏览器三重条件全部满足。不满足时，它会被静默降级为 srgb，甚至被整条忽略。
为什么写了 color(display-p3 1 0 0) 却还是灰的
这不是你写错了值，是浏览器根本没启用 P3 渲染管线。常见原因包括：
-
window.matchMedia("(color-gamut: p3)").matches返回false—— 设备不支持（iPhone 12 以下、多数安卓机、普通 Mac 显示器）或系统禁用了广色域（iOS/macOS 默认开启，但 MDM 策略可能关闭） - HTML 缺少
<meta name="color-scheme" content="light dark">，且该标签没放在<head>最顶部 - CSS 没用
@supports (color: color(display-p3 0 0 0))包裹，导致 Safari 16.3 及更早版本直接跳过整条规则 - 父元素用了
transform、opacity或filter，触发 sRGB 强制合成，整层叠上下文回退
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叠加 - 别指望
rgba()自动 fallback：它和color(display-p3)不共存，整个声明可能被跳过
怎么拿到真正可用的 P3 值，而不是瞎填
把设计稿里的 #FF6B6B 直接改成 color(display-p3 1 0.42 0.42) 是典型错误——sRGB 和 Display P3 是两个不重叠的色域三角形，数值不能线性映射。
- Photoshop：View > Proof Setup > Custom → Device to simulate 选 “Display P3” → 勾选 “Preserve Color Numbers” → 吸管取色 → 右键复制 “Display P3” 值（小数三元组）
- Figma：必须用插件（如 P3 Color Picker）或导出时明确选择 “Export as Display P3”，否则给的十六进制值根本不是 P3 坐标
- 参数只能是 0.0–1.0 范围内的小数，
color(display-p3 100% 42% 42%)、color(display-p3 255 107 107)、color(display-p3 #FF6B6B)全部无效，浏览器静默忽略 - 超出范围（如
1.2）会被截断：color(display-p3 1.2 0.3 0.1)实际等价于color(display-p3 1 0.3 0.1)
兼容性兜底不是可选项，是必须项
不加 @supports 和媒体查询，color(display-p3) 在旧浏览器里就是无效声明，元素颜色可能意外透明或继承。
立即学习“前端免费学习笔记（深入）”；
- 必须先写 sRGB fallback：
color: rgb(255, 0, 0);或color: #ff0000; - 再用
@supports包裹 P3 声明，且括号内必须写完整函数调用：@supports (color: color(display-p3 0 0 0)) - Safari 是目前唯一稳定支持的环境，仅限 iOS 16.4+ / macOS Ventura+ 设备；Chrome 当前（v125）仅在 macOS 上有限支持，Windows/Linux 下静默降级为 sRGB
- Android WebView 和绝大多数安卓浏览器完全不识别
display-p3，写了等于注释
