移动端颜色发灰主因是p3渲染链路未启用或对比度失控，需同时满足meta声明、color-gamut: p3、@supports包裹三条件，background-color用display-p3最不稳定，应改用单色渐变；文字发灰须控hsl明度与饱和度而非调alpha，p3值不可直接换算srgb十六进制。
移动端颜色发灰，不是颜色值写错了，而是渲染链路没走广色域或对比度失控——color(display-p3)写了却像褪色、rgba(0,0,0,0.9)在OLED上发虚、深色背景里#888直接糊成一团，全是因为底层条件没对齐或策略用错。
color(display-p3)写了但还是灰：缺三要素就降级为sRGB
iPhone 15 上 color: color(display-p3 0.98 0.35 0.35) 看着偏橙？DevTools 的 Rendering 面板显示 Gamut: sRGB？那说明 P3 渲染链路根本没启动。必须同时满足：
-
<meta name="color-scheme" content="light dark">放在最顶部，早于所有 CSS - CSS 中先声明
html { color-gamut: p3; }（哪怕只是占位），再用color(display-p3) -
@supports (color: color(display-p3 0 0 0))必须包裹，且里面要提供显式 fallback，比如color: #FF6B6B
漏任一环，Safari 就静默降级，不报错、不警告，只吐 sRGB 值。
background-color 用 display-p3 就发灰：换 background-image
background-color: color(display-p3 1 0 0) 是 P3 支持最不稳定的属性。iOS 和部分 Android WebView 会绕过色彩管理，直接映射到 sRGB 输出空间。解决方法不是调参数，是换载体：
- 改用单色渐变：
background-image: linear-gradient(color(display-p3 1 0 0), color(display-p3 1 0 0)); - 渐变必须无角度（如
to bottom）、无插值干扰（避免to right top） - 别用
background:简写覆盖掉前面的background-image - 需要透明背景时，用
background-color: transparent+ 单色渐变叠加，别用rgba()fallback
文字在深色背景下发灰：别调 alpha，改 hsl 的 L 和 S
rgba(0,0,0,0.9) 在 OLED 上柔化失败，在 LCD 上反而发灰——半透明黑色和背景混合后对比度必然下降。真正有效的是控明度与饱和度：
- 深色模式下，
hsl()的L值拉到 65%–85%，S比浅色模式高 15–25% - 用 CSS 自定义属性统一管理：
--text-l: 75%;+color: hsl(210, var(--text-s), var(--text-l)); -
@media (prefers-color-scheme: dark)里覆盖变量，而不是写两套颜色值 - 实测对比度：Chrome DevTools 的 Accessibility Panel 或 WebAIM Contrast Checker，别信眼睛
@media (color-gamut: p3) 不匹配？它不测硬件，只问系统上报
window.matchMedia('(color-gamut: p3)').matches 返回 false，不代表屏幕不支持 P3。它依赖系统是否上报该能力，不是硬件探测：
- iPhone 12+、iPad Pro 默认上报；部分 iPadOS 版本需手动确认“显示与亮度”→“原彩显示”已开
- 安卓旗舰（小米、OPPO）即使屏幕硬件支持 P3，系统层常不报，
@media (color-gamut: p3)就返回unknown或false - 别用它做条件加载，它在 Safari 里不稳定；优先靠
@supports+meta+color-gamut: p3声明组合来触发 - 真机调试时，打开 DevTools → Rendering → 勾选 “Layer Borders”，看是否意外分层——分层即降级，颜色必漂移
最易被忽略的点：P3 值不能从 sRGB 十六进制直接换算。把 #FF6B6B 当成 color(display-p3 1 0.42 0.42) 是错的，必须用 ColorSync Utility 或专业 P3 转换器重新映射坐标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
