display-p3能还原sRGB丢失的爱马仕橙、蒂芙尼蓝等奢侈品常用色，但需硬件支持、meta声明、color-gamut设置、@supports包裹及background-image替代background-color等五要素齐备，缺一则退回到sRGB。
因为奢侈品电商依赖精准、高饱和的色彩传达品牌调性与材质质感，而 display-p3 色域能真实还原设计稿中那些在 sRGB 里被“压缩失真”的关键红、金、翠绿——但前提是整条渲染链路没断。
display-p3 能还原哪些 sRGB 必然丢失的颜色
奢侈品常用色（如爱马仕橙、蒂芙尼蓝、香奈儿红）大量落在 display-p3 比 sRGB 多出的 25% 红/绿区域。例如：color(display-p3 1 0.4 0) 在 P3 屏上是鲜亮饱满的橙，而 #FF6B00 在同一屏幕会被映射为偏棕、发灰的近似值——不是“不够亮”，是坐标系根本不同，原始信息已丢。
- sRGB 值
#FF6B6B直接填进color(display-p3)会严重发灰，必须用专业工具转出线性 P3 坐标（如0.98 0.35 0.35） - 珠宝类页面的金箔反光、丝绒材质的暗部绿调，这些细节在 sRGB 里只剩色块，在 P3 屏上才能呈现层次
- 注意：rec2020 理论更宽，但所有浏览器至今不解析
color(rec2020 ...)，写了等于删掉整行声明
为什么写了 color(display-p3) 却还是灰的
常见现象：iPhone 15 上按钮颜色发粉、渐变褪色、设计师直呼“和 PS 里完全不一样”。这不是值错了，是渲染上下文没激活。
-
必须放在最顶部，早于任何 CSS 引入 - CSS 中必须先声明
html { color-gamut: p3; }，再用color(display-p3)；漏掉这句，Safari 16.4+ 也跳过 -
@supports (color: color(display-p3 0 0 0))必须包裹，否则旧版 Safari 静默忽略整条声明 - 别在带
transform或opacity的父容器里设background-color: color(display-p3)——整个层叠上下文强制降级为 sRGB
background-color 不稳定？换 background-image
background-color 是 P3 支持最脆弱的属性，iOS 和部分 Android WebView 会绕过色彩管理直接输出 sRGB。实测更可靠的写法：
button {
background-color: #FF6B6B; /* fallback */
@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));
}
}
- 单色无角度渐变（如
to bottom）比纯色背景更大概率保留 P3 色域 - 避免用
background: color(display-p3 ...)简写，它会覆盖前面定义的background-image - 透明背景需求下，用
background-color: transparent+ 单色渐变叠加，别用rgba()fallback
真正容易被忽略的不是“怎么写 display-p3”，而是它从不单独生效：设备硬件、系统设置、HTML meta、CSS 声明、fallback 顺序、属性选择，五者缺一即退回 sRGB——你看到的不是“稍淡一点”，而是品牌色被系统自动重映射后的陌生版本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
