同一段css颜色代码在不同显示器上色差源于srgb与display p3色域对同一数值的不同光谱映射；color(display-p3)非hex升级，而是需用设计稿导出的真实p3坐标（如figma“copy as p3”），不可由#ff6b6b直接换算，参数必须为0–1浮点数，且@media(color-gamut:p3)仅表示设备能力而非实际渲染色域。
同一段 CSS 颜色代码（比如 #FF6B6B）在不同显示器上看起来不一样，不是代码错了，而是浏览器用不同的色域解释了这串数字——sRGB 和 Display P3 对同一组数值的光谱映射完全不同。
color(display-p3) 不是“更高级的 hex”，而是换了一套坐标系
把 #FF6B6B 直接套进 color(display-p3 1 0.42 0.42) 是常见错误。这不是“升级写法”，而是把 sRGB 坐标硬塞进 P3 坐标系，结果会偏暗、发浊。
- Display P3 的红绿通道比 sRGB 更宽，同一数值在 P3 下实际发光更强
- 设计稿里导出的 P3 值（如 Figma 中“Copy as P3”）才是真值，不能从 hex 换算
- 在线工具 Björn’s Color Picker 或 macOS 颜色面板的 “Display P3” 模式可查对应线性三元组
-
color(display-p3)参数必须是 0–1 的浮点数，不是 0–255，也不是十六进制
@media (color-gamut: p3) 不代表颜色正在用 P3 渲染
这个媒体查询只说明设备“有能力显示 P3”，但不保证当前页面正以 P3 色彩空间渲染。很多未校准的 MacBook 返回 p3，实际仍走 sRGB 管线。
- 它不能替代
@supports (color: color(display-p3 0 0 0))的功能检测 - 不要用它做颜色降级开关，比如写
@media (color-gamut: p3) { color: color(display-p3 ...) }会误导降级逻辑 - 真正起作用的是系统设置（macOS 默认开，Windows 需手动启用 HDR）、GPU 渲染路径、浏览器版本（Chrome ≥117 / Safari ≥16.4）
Chrome 和 Safari 对 color() 的处理差异直接影响颜色观感
同一行 color(display-p3 1 0 0)，Safari 16+ 直接输出原生 P3 红，Chrome 可能仍在 sRGB 管线里做近似映射，导致颜色发灰、饱和度不足。
- Chrome 需确认
chrome://flags/#css-color-adjust已启用，且未被启动参数（如--force-color-profile=srgb）覆盖 - 降级必须按顺序写：
background-color: #FF6B6B; background-color: color(display-p3 1 0.42 0.42);，后者覆盖前者 - 构建工具如 Vite +
postcss-preset-env可自动将color(display-p3)降级为rgb()，但@media (color-gamut: p3)不会被转译，得手动补 fallback
最易被忽略的一点：色彩一致性不是靠 CSS 单方面控制的，而是设计切图阶段就定死的事——Figma 导出 PNG 必须勾选“Convert to sRGB”，Photoshop 存图要启用“Embed Color Profile”，否则后续所有 CSS 都白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
