oklch极亮黄色易“消失”主因是参数错误而非色域溢出：c超0.4易超p3/srgb，但更关键的是单位误写（如c用%、l用小数、h加deg）导致浏览器静默跳过声明，且@supports检测必须严格匹配oklch(0% 0 0)格式。
OKLCH 本身不会“溢出”，但用错参数或混用空间会让极亮黄色（如 oklch(95% 0.4 50)）在部分浏览器里直接回退成灰白——这不是颜色溢出，是声明被静默跳过。
为什么极亮黄色在OKLCH里特别容易“消失”
人眼对黄绿色区域的色度（C）敏感度最高，OKLCH 中 C 值超过约 0.4 就可能超出当前显示器 P3/sRGB 色域。但问题不在这儿：真正导致 UI 失效的是单位写错或检测结构松散。
-
oklch(95% 0.4 50)✅ 安全写法：L 带 %、C 是无单位小数、H 无单位 -
oklch(95% 40% 50)❌ C 写成百分比 → 整行静默失效，fallback 不触发 -
oklch(0.95 0.4 50)❌ L 用小数 → Safari 16.x / 旧安卓 WebView 直接忽略 -
oklch(95% 0.4 50deg)❌ H 加deg→ Safari 16.4 及部分 WebView 解析失败
@supports 检测必须带 L 百分比且紧贴降级色
只写两行：background-color: #fff; + background-color: oklch(95% 0.4 50);，在很多安卓 WebView 中会整条跳过 OKLCH 声明——它不报错，也不 fallback，UI 就卡在 #fff 上。
- 降级色必须写在
@supports块外部且正上方 - 检测值必须是
@supports (color: oklch(0% 0 0))✅（L 带 %，C=0，H 无单位） - 绝不能写
@supports (color: oklch(0 0 0))❌ 或@supports not (...)❌
极亮黄色的实际可用 C 值要保守压低
理论最大 C 取决于设备和色相，但工程上别赌上限。实测在主流设备（iPhone 14+/Pixel 8/Chrome macOS）中：
-
oklch(95% 0.32 50)✅ 稳定显示为鲜亮黄，无灰化 -
oklch(95% 0.38 50)⚠️ 在部分 OLED 屏上轻微发白，DevTools computed 里可能已回退为rgb() -
oklch(95% 0.45 50)❌ 多数环境静默失效，最终渲染为 fallback 色
更稳妥的做法是用 color-function(from ...) 动态约束：比如 color-function(oklch from var(--brand-yellow) l c h / 1)，再配合 clamp(0, c - 0.05, 0.35) 类逻辑（需 JS 辅助或 CSS 自定义属性计算）。
深色模式下极亮黄色根本不能照搬 Light 模式参数
同一 oklch(95% 0.32 50) 在深色背景上会刺眼且对比度超标（APCA > 100），但直接降 L 又会让黄变暗沉。正确做法是分离调参：
- Light 模式：用
oklch(95% 0.32 50) - Dark 模式：固定 H，降 C 更多、微调 L —— 如
oklch(82% 0.22 50) - 禁用态：只降 C，L 保持不变（避免文字在浅底上突然变灰）→
oklch(95% 0.12 50)
最常被忽略的是：DevTools 的 computed 面板永远只显示 sRGB 十六进制值，你看不到它是不是真用了 OKLCH 插值——得靠真实设备截图比对或用 color-scheme 工具验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
