oklch颜色在手机浏览器中显示为灰色，是因为其色度c与色相h组合超出了srgb色域边界而被静默截断；青蓝区（h≈210–270）对高c最敏感，低明度l下更易失真，多数srgb手机安全上限为c≤0.25。
OKLCH 颜色在部分手机浏览器上显示为灰色，不是语法写错了，也不是设备“不支持”，而是颜色值本身超出了该屏幕的 sRGB 色域边界，被浏览器静默截断或降级渲染 —— 你写的 oklch(60% 0.35 240) 在 iPhone 或安卓旗舰机上可能直接变灰块，但同一行代码在 MacBook Pro 上却正常。
为什么 OKLCH 值一用就发灰？
OKLCH 是感知均匀空间，不是输出空间。它的 C（色度）和 H（色相）组合在某些 L（明度）下天然超出 sRGB 能力范围：
-
H ≈ 210–270（青蓝区）对高C最敏感：oklch(60% 0.3 240)可能尚可，oklch(60% 0.35 240)就大概率被 clamp 成灰蓝 - 低
L更危险：oklch(30% 0.25 240)比oklch(60% 0.25 240)更容易失真变灰 - Chrome DevTools 的颜色拾取器只显示输入值，不反映实际输出 —— 你看到的
oklch(70% 0.4 250)并不等于屏幕上渲染出来的颜色
手机浏览器特别容易中招的三个原因
移动端渲染链更短、色彩管理更弱，以下情况会放大溢出风险：
- 安卓 WebView 和旧版 Safari（如 iOS 16.3 及更早）对
oklch()解析更严格，C > 0.28时失败率陡增 - 很多安卓旗舰（小米、OPPO）硬件虽支持 P3，但系统未向浏览器暴露
color-gamut: p3，导致强制走 sRGB 渲染路径 - 使用
background-color设置oklch()时，iOS Safari 会绕过色彩管理管线，直接映射到 sRGB 输出空间 —— 改用background-image: linear-gradient(...)反而更稳
怎么验证并压住灰度？
别查表，实测才是唯一可靠方式。在目标真机上跑一个最小测试页：
- 写一个全屏
<div style="background-color: oklch(60% 0.28 240)"></div> - 打开 Chrome/Safari DevTools → 点击颜色值 → 切换到 LCH/OKLCH 视图 → 拖动
C滑块 - 观察预览：一旦出现突然变暗、边缘发虚、色相偏移，就是当前
L/H下的临界点 - 记录安全上限 —— 多数 sRGB 手机上，
C ≤ 0.25是较稳妥的通用线，但青蓝区往往要压到0.22甚至更低
渐变里灰得更厉害？那是因为插值没走 OKLCH
CSS 的 linear-gradient() 对所有颜色函数都强制在 sRGB 空间插值，哪怕两端是 oklch() 值：
-
oklch(60% 0.25 240) → oklch(80% 0.25 240)看似安全，但中间段仍可能因 RGB 插值路径穿越灰区而发灰 - 色相差 > 180°（比如
350° → 10°）必须手动拆段：linear-gradient(oklch(0.7 0.25 350), oklch(0.7 0.25 360), oklch(0.7 0.25 10)) -
in oklch关键字在所有浏览器中均被静默忽略，写了等于没写
真正跨设备一致的做法，是把 C 值统一压到 ≤ 0.25，固定 H 微调 L，并在关键交互态（如 :hover）优先降低 C 而非提高 L —— 因为人眼对彩度突变比明度突变更敏感，稍一溢出，灰就来了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
