color-gamut不是meta标签合法参数，仅用于CSS媒体查询；适配P3需协同color-scheme meta标签、color-gamut媒体查询和color(display-p3)函数，缺一不可且顺序敏感。
color-gamut 不是 meta 标签的合法参数，它只存在于 CSS 媒体查询中，不能写在 <meta> 里。想让页面适配 P3 等广色域屏幕，得靠三样东西协同：HTML <meta name="color-scheme">、CSS color-gamut 媒体查询、以及 color(display-p3) 函数本身——缺一不可，且顺序和位置极敏感。
为什么 <meta> 里不能写 color-gamut
HTML 规范中根本不存在 name="color-gamut" 这个 <meta> 属性。浏览器遇到这种写法会直接忽略，不报错也不生效。你真正需要的是 <meta name="color-scheme" content="light dark">，它是所有后续色彩行为的前提——没有它，color(display-p3) 就算写对了也大概率被降级为 sRGB，原生控件也不会随系统主题变色。
@media (color-gamut: p3) 在 Safari 里经常失效
这个媒体查询在 Safari 上返回 false 是常态，哪怕设备硬件支持 P3（比如 iPhone 13+、MacBook Pro M1+）。不是你代码写错了，是 Safari 的实现策略保守：它倾向于在页面加载完成前就做判断，而此时渲染上下文还没建立好。
- 不要用它做“是否启用 P3”的唯一开关
- 更可靠的做法是：先无条件声明
color(display-p3)，再用@supports (color: color(display-p3 0 0 0))包裹 fallback - 如果必须用
color-gamut，至少加一层兜底：@media (color-gamut: p3), (prefers-reduced-transparency: reduce) { ... }避免整块样式被跳过
color(display-p3) 生效的硬性前置条件
写了函数 ≠ 走 P3 渲染路径。以下五点全满足，才可能触发：
-
<meta name="color-scheme" content="light dark">必须放在<head>最前面，早于所有<link rel="stylesheet">和内联<style> - CSS 中任意父元素（至少
html或:root）要声明color-gamut: p3，例如：html { color-gamut: p3; } - 不能有强制 sRGB 合成的属性干扰，比如
opacity、transform、filter、backdrop-filter应用在同层或祖先元素上 - 参数必须是 0–1 范围的小数，
color(display-p3 1 0.42 0.42)对，color(display-p3 100% 42% 42%)错 - 值必须来自专业工具导出（ColorSync、Photoshop Proof Setup、Figma P3 插件），不能手动把
#FF6B6B换算过去
低色域屏上颜色发灰？别改 CSS，先改开发流程
你在廉价笔记本上看到的 rgb(74, 144, 226) 偏灰，不是代码问题，是屏幕物理限制。浏览器输出的是正确 sRGB 值，但屏幕只能还原其中一部分。
立即学习“前端免费学习笔记（深入）”；
- 禁用所有
color(display-p3)、lab()、lch()等宽色域函数，只用rgb()和hsl() - 团队共用一套色卡工具（如 ColorSlurp），在目标设备上实采主色，而非依赖设计稿 HEX
- CI 流程中用 Puppeteer 提取
getComputedStyle(el).backgroundColor字符串，跳过像素渲染环节做比对 - 真机测试前，别信本地开发环境里的“所见即所得”——这句话值得贴在显示器边框上
