同一段css颜色在iphone和windows chrome中显示不同，是因为safari默认使用display-p3色域而chrome多用srgb；color(display-p3)需配合color-gamut: p3、@supports包裹及正确p3坐标值才能生效，且图片导出也须转为srgb以保一致。
为什么同一段CSS颜色在iPhone和Windows Chrome里看起来不一样
不是代码写错了，是浏览器对#FF6B6B这类无色彩空间声明的颜色，用了不同坐标系去解释：Safari（macOS/iOS）默认走display-p3色域路径，Chrome（尤其Windows）多数仍按srgb输出。同一串数字，在P3色域里渲染出更饱和的橙红，在sRGB里则被“压缩”成偏灰、偏棕的近似值——这不是显示异常，是语义落地差异。
如何让color(display-p3)真正生效而不是发灰或被忽略
写了color(display-p3 1 0.42 0.42)却还是灰的，常见原因不是值不准，而是上下文没激活：
-
html { color-gamut: p3; }必须提前声明，否则Safari 16.4+直接跳过color(display-p3) -
@supports (color: color(display-p3 0 0 0))必须包裹，旧版浏览器才不会静默丢弃整条规则 -
<meta name="color-scheme" content="light dark">得放在最顶部，早于任何CSS引入 - 别在带
transform或opacity的父容器里设background-color: color(display-p3)——整个层叠上下文强制降级为sRGB
为什么不能把#FF6B6B直接套进color(display-p3)
color(display-p3)不是hex升级版，而是换了一套物理原色坐标系。sRGB的#FF6B6B对应线性值(1, 0.4196, 0.4196)，但直接塞进display-p3函数会严重发灰——因为P3红色原色位置更靠外，同一数值在P3下实际发光强度更高，必须用设计稿导出的真实P3坐标（如Figma“Copy as P3”或macOS颜色面板Display P3模式查得的(0.98, 0.35, 0.35)）。
参数还必须是0–1浮点数，不能是0–255或十六进制；rec2020等更宽色域目前所有主流浏览器都不解析，写了等于删掉整行。
fallback顺序和background-image替代方案
background-color是P3支持最脆弱的属性，iOS和部分Android WebView常绕过色彩管理直出sRGB。更可靠的写法是用单色渐变兜底：
button {
background-color: #FF6B6B;
@supports (color: color(display-p3 0 0 0)) {
background-image: linear-gradient(color(display-p3 0.98 0.35 0.35), color(display-p3 0.98 0.35 0.35));
}
}
注意两点：降级必须按顺序写，后声明覆盖前声明；避免用background:简写，它会覆盖前面定义的background-image。
真正容易被忽略的是：色彩一致性从设计阶段就锁死了——Figma导出PNG必须勾选“Convert to sRGB”，否则即使CSS写对了，图片本身已携带P3元数据，在sRGB屏上照样偏色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
