color(display-p3 r g b) 的参数必须是经专业工具导出的 p3 色域线性值（0.0–1.0），而非 srgb 换算值；需显式声明 srgb fallback，且 html 和 css 必须配置 color-scheme 与 color-gamut: p3 才能在 ios safari 正确渲染。
直接给结论：color(display-p3 r g b) 本身不“匹配”设计稿，它只是渲染指令；真正匹配靠的是把设计稿里那个 P3 色值原样抄进来——不是换算，不是估算，是导出。
为什么用 Photoshop/Figma 导出的 sRGB 值不能直接塞进 color(display-p3)
常见错误现象：设计师给一个 #FF6B6B，你写成 color(display-p3 1 0.42 0.42)，结果在 iPhone 上红得发灰、偏橙或泛紫。
这不是浏览器 bug，是色域坐标系错位：sRGB 的 [0.64, 0.33] 和 display-p3 的 [0.792, 0.299] 是两个不重叠的三角形。硬套数值等于把地图坐标直接贴到另一张地图上。
必须用专业工具做“色域映射”，而不是“数值缩放”。
- Photoshop：选中图层 →
View > Proof Setup > Custom…→ Device to simulate 选Display P3→ 勾选Preserve Color Numbers→ 然后用吸管取色，右键复制“Display P3”值（小数三元组） - Figma：插件如
P3 Color Picker或导出时启用Export as Display P3（需 macOS 系统级支持） - 命令行验证：用
colorsync -i input.png -o output.p3.png -p "Display P3"批量转换 PNG 后再取值
color(display-p3) 的参数必须是 0.0–1.0 线性值，不是百分比也不是十六进制
错误写法：color(display-p3 100% 42% 42%)、color(display-p3 #FF6B6B)、color(display-p3 255 107 107) —— 全部无效，浏览器静默忽略或降级为 sRGB。
正确写法只有一种：color(display-p3 0.98 0.35 0.35)（三位小数足够，超出会被截断）
注意：这个值不是“亮度×对比度调节”，而是 P3 色域坐标系下的绝对位置。填错一个数，颜色就偏出整个色域边界。
- alpha 通道可加但非必需：
color(display-p3 0.98 0.35 0.35 / 0.8) - 不能混用空格和逗号：
color(display-p3, 0.98, 0.35, 0.35)是语法错误 - 命名色、
currentColor、transparent都不支持作为display-p3的输入
fallback 必须显式声明，且顺序决定是否生效
浏览器不会自动 fallback。如果你只写：background-color: color(display-p3 0.98 0.35 0.35);，旧版 Chrome、Firefox、所有安卓 WebView 都会当它不存在，变成透明或继承色。
必须手动写两行，且 sRGB 版本在前：
button {<br> background-color: rgb(255 107 107);<br> background-color: color(display-p3 0.98 0.35 0.35);<br>}这样，不支持 color() 的浏览器读第一行，支持的覆盖第二行。
- 别用
@supports (color: color(display-p3 0 0 0))包裹——它在 Safari 16.4+ 和 Chrome 117+ 才稳定，而 fallback 本身不需要条件 - 别依赖
@media (color-gamut: p3)控制显示逻辑——它在 iOS Safari 上常返回 false，即使设备完全支持 - 不要在同一个声明块里混写
color(display-p3)和color(srgb)，整条声明可能被丢弃
移动端真要生效，HTML meta 和 CSS 渲染上下文都得对齐
iOS Safari 16.4+ 对 color(display-p3) 的支持仍受限于根级色彩上下文。只写 CSS 不够。
必须在 最顶部加：
<meta name="color-scheme" content="light dark">同时，在 CSS 中确保至少一个祖先元素（通常是
html 或 body）声明了：html { color-gamut: p3; }否则，iOS 可能拒绝启用 P3 渲染管线，哪怕你写了正确的 color(display-p3)。
-
color-gamut: p3是声明“我这整页要用 P3”，不是媒体查询，也不带括号 - 这个声明必须出现在任何使用
color(display-p3)的规则之前，否则 Safari 不认 - 如果页面用了
transform、opacity或filter，整个层叠上下文可能被强制回退到 sRGB，此时改用background-image: linear-gradient(...)更可靠
最常被忽略的一点：P3 值不是“调得更艳就好”，它是硬件能力边界。同一组 color(display-p3 0.98 0.35 0.35) 在 MacBook Pro 上可能是精准红，在 iPad mini 上可能已轻微溢出——没有“通用完美值”，只有“目标设备校准后的真实值”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
