只有组合使用@media(color-gamut:p3)、@supports(color:color(display-p3 0 0 0))和color(display-p3)语法，并配以srgb fallback，才能在真p3设备上正确显示高饱和色；单独使用媒体查询无效，且p3值须用专业工具获取。

color(display-p3) 本身不输出高饱和色，@media (color-gamut: p3) 也不触发颜色升级——只有把三者组合对了，才可能在真 P3 设备上看到更艳的红、绿、蓝。

为什么 @media (color-gamut: p3) 单独写没用

它只是个硬件能力信号，类似 @media (prefers-color-scheme: dark)，浏览器不会因此把 rgb(255, 0, 0) 自动转成 P3 红。写了 @media (color-gamut: p3) { color: rgb(255, 0, 0); }，结果仍是 sRGB 红，毫无变化。

• Chrome 117+ 和 Safari 16.4+ 支持该查询，Firefox 至今不支持（2026 年 9 月仍返回 false）
• 即使查询命中，若 CSS 中混用 #ff0000 或 rgb()，浏览器仍强制走 sRGB 渲染路径
• 不能把它当“高清屏开关”，也不能嵌套在 @supports 里——逻辑不同，叠加反而增加失效概率

@supports (color: color(display-p3 0 0 0)) 是唯一可靠检测方式

判断浏览器是否能解析 color(display-p3)，必须用这个功能检测，不是媒体查询。它验证的是 CSS 引擎能力，不是设备能力。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 参数必须是 0.0–1.0 小数，color(display-p3 1 0 0) 错，color(display-p3 1.0 0.0 0.0) 对
• 空格不可省略，斜杠用于 alpha：color(display-p3 0.9 0.2 0.3 / 0.8)，不是 rgba() 风格
• 整条声明错一个字符（比如漏空格、写整数、用逗号），WebKit 会静默丢弃整条规则

必须前置 sRGB fallback，且不能塞进 @supports 块里

没 fallback，旧浏览器或不支持环境会直接无颜色（不是变灰，是透明或继承默认色）。

• 正确结构：先写 color: #FF6B6B;，再用 @supports 块覆盖
• 别在 @supports 块里混写 rgb() 或 #hex —— 它不是 fallback，是无效语法
• background-color 对 color(display-p3) 支持最差，iOS Safari 常静默降级；改用 background-image: linear-gradient(color(display-p3 0.98 0.35 0.35), color(display-p3 0.98 0.35 0.35)) 更稳

P3 值必须来自专业工具，不能从 sRGB 直接换算

sRGB 和 Display P3 是两个不重叠的色域三角形，坐标不能线性映射。填错一个数字或漏个空格，整条声明就被 WebKit 静默丢弃。

• Photoshop：View > Proof Setup > Custom → Device to simulate 选 “Display P3” → 勾选 “Preserve Color Numbers” → 吸管取色后右键复制 “Display P3” 值
• Figma：必须用插件（如 P3 Color Picker）或导出时明确勾选 “Export as Display P3”
• 在线验证可用 Björn’s Color Picker 或 macOS 颜色面板切换至 “Display P3” 模式

真机调试前确认三件事：设备是 iPhone 12+/Mac Studio/M3 MacBook Pro、系统广色域已开启、页面通过 HTTPS 加载——file:// 协议不触发。最容易被忽略的是：P3 值不是“更亮的 hex”，而是完全不同的坐标系，靠肉眼调或手动计算，几乎必然发灰。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！