display p3色域在绿色区域比srgb宽约25%，能呈现更鲜亮饱和的绿色，但仅在支持该色域的硬件（如macbook pro、iphone x+）上生效；不支持设备会就近映射导致发灰。
Display P3的绿色通道物理上更宽
Display P3 色域在 CIE 1931 图中向外扩展了约 25% 的绿色区域，尤其覆盖了 sRGB 无法表达的高饱和、短波长绿光（比如 #00FF00 在 P3 下对应的是更“鲜亮”的坐标）。这不是视觉错觉，而是屏幕背光或 OLED 发光材料能实际激发出更强的绿色光谱能量。
但关键点在于：这个“更鲜艳”只在支持 Display P3 的硬件上成立。MacBook Pro（2016+）、iPhone X 及之后机型、部分 iPad Pro 是可靠载体；普通 Windows 笔记本、老款显示器、未开启 HDR 的 macOS 设备，color(display-p3 0 1 0) 会被就近映射到 sRGB 范围内，结果反而发灰、偏黄。
color(display-p3) 不是“升级 hex”，而是换坐标系
把 #00FF00 直接写成 color(display-p3 0 1 0) 是常见错误。sRGB 的 (0, 1, 0) 和 Display P3 的 (0, 1, 0) 指向完全不同的光谱位置——前者是 sRGB 定义的“标准绿”，后者是 P3 色域顶点的“更纯绿”。强行复用会导致颜色失真。
- 真值必须来自设计工具导出：Figma 中选中色块 → 右键 “Copy as P3” → 得到类似
color(display-p3 0.24 1 0.17)的三元组 - 参数必须是 0–1 浮点数，不是 0–255，也不接受十六进制
- 在线查值可用 Björn’s Color Picker 或 macOS 颜色面板切换至 “Display P3” 模式
浏览器渲染路径比语法更重要
写了 color(display-p3 0 1 0) 不等于屏幕上就跳出鲜绿。最终输出取决于四层叠加：
- 系统是否启用广色域输出（macOS 默认开，Windows 需手动开启 HDR）
- 浏览器是否解析该函数（Chrome ≥117、Safari ≥16.4、Firefox 需开启
layout.css.color-functional-notation.enabled） - GPU 渲染管线是否走 P3 映射（Chrome 有时仍 fallback 到 sRGB 插值，导致发灰）
- 辅助功能是否干扰（如“简化色彩”或“夜览模式”会全局偏移所有像素）
最易被忽略的是：@media (color-gamut: p3) 只表示设备“有能力”，不保证当前页面正在用 P3 渲染；它不能替代 @supports (color: color(display-p3 0 0 0)) 做功能检测。
真正起作用的是全链路控制，不是单行 CSS
想让绿色在支持设备上真正鲜亮，在不支持设备上不崩坏，必须从设计稿开始锁定：
- Figma 导出 PNG 必须勾选 “Convert to sRGB”，否则图片自带 P3 元数据，浏览器照单全收
- CSS 中降级必须按顺序写：
color: #00FF00; color: color(display-p3 0.24 1 0.17); - 禁用
color(display-p3 #00FF00)—— 这是非法语法，color()不接受十六进制参数 - 构建时用
postcss-preset-env自动将color(display-p3)降级为rgb()，但@media查询不会被转译，得手动补 fallback
颜色值本身没有魔法，它只是把一组坐标交给了更大的“画布”。画布再大，笔（屏幕）画不出，人眼也看不见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
