color(display-p3)在iphone上发灰是因为渲染链路未启用p3色域，需同时满足设备支持、系统开启广色域、页面通过meta和css双层声明启用色彩管理三个条件，缺一即降级为srgb。
直接写 color(display-p3 1 0 0) 在 iPhone 上发灰，不是你值填错了，是渲染链路根本没走 P3 —— 缺任一条件都会强制降级为 sRGB。
为什么 color(display-p3) 写了却像褪色
常见错误现象：background-color: color(display-p3 0.9 0.2 0.1) 在 iPhone 15 上看着偏橙；DevTools 的 Rendering 面板显示 “Gamut: sRGB”；window.matchMedia('(color-gamut: p3)').matches 返回 false。
根本原因不是语法错，而是三个硬性条件缺一不可：
- 设备硬件支持（iPhone 12+、iPad Pro、Mac Studio）
- 系统开启广色域（iOS 默认开，但部分 iPadOS 版本需手动确认）
- 页面渲染上下文启用 P3 色彩管理（
<meta>+ CSS 双层声明）
特别注意：<meta name="color-scheme" content="light dark"> 必须放在 最顶部，早于所有 CSS；否则 Safari 16.4+ 仍可能跳过 P3 渲染。
@supports (color: color(display-p3 0 0 0)) 必须用，且不能只靠它
不加这个包裹，Safari 会整条跳过 color(display-p3) 声明 —— 不是报错，是静默忽略。
但仅靠 @supports 还不够，因为：
- 旧版 Chrome（v116 及以前）或 Android WebView 即使匹配
@supports，也可能因系统未启用 P3 输出而实际渲染为 sRGB - Firefox 当前完全不支持
color(display-p3)，@supports永远返回false - 写了
@supports却没提供显式 sRGB fallback（比如color: #FF6B6B），会导致非支持环境变成透明或继承色
正确写法必须是双层 fallback：
.brand-red {
color: #FF6B6B; /* 先写 sRGB 值，保底 */
@supports (color: color(display-p3 0 0 0)) {
color: color(display-p3 0.98 0.35 0.35); /* 后写 P3 值，覆盖 */
}
}
background-color 用 display-p3 就发灰？换 background-image
background-color 是 P3 支持最不稳定的属性。它在 iOS 和部分 Android WebView 中常被绕过色彩管理，直接映射到 sRGB 输出空间。
实操建议：把
background-color: color(display-p3 1 0 0);
换成：
background-image: linear-gradient(color(display-p3 1 0 0), color(display-p3 1 0 0));
注意两点：
- 渐变必须是单色、无角度（如不用
to bottom），避免插值干扰 - 别用
background:简写，它会覆盖掉前面定义的background-image
如果元素需要透明背景，别用 rgba() fallback，改用 background-color: transparent + 单色渐变叠加。
设计师给的 HEX 值不能直接塞进 display-p3
color(display-p3 1 0 0) 和 rgb(255 0 0) 数值相同，但语义完全不同：前者是 P3 色域坐标，后者永远按 sRGB 解释。
把设计稿里的 #CC3344 直接换算成 color(display-p3 0.82 0.2 0.26) 是错的 —— 那是 sRGB gamma 压缩后的值，未经线性校准，填进去会偏暗、偏浊。
必须用专业工具转换：
- macOS 自带 ColorSync Utility（选“Display P3”目标，拖入 sRGB 值导出线性三元组）
- 在线工具如
https://bottosson.github.io/misc/colorpicker/（选 Display P3 profile） - Figma 插件「Color Space Preview」开启 Simulate P3 Color 后取值
关键点：P3 值不是“更亮的 sRGB”，而是落在不同色域三角形里的新坐标 —— 手动乘系数（如 ×1.24）只会溢出或失真。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
