超出C=0.35后浏览器静默降级或渲染异常，如变暗、发灰、跳变、色块甚至黑/白闪；Chrome/Safari/Firefox依设备色域动态妥协，非统一截断，因OKLCH的C是欧氏距离，无法安全clamp，需依赖color-gamut媒体查询校准。
超出C=0.35后，浏览器不会报错，但会静默降级或渲染异常——颜色变暗、发灰、跳变，甚至在动画中出现色块。
Chrome/Safari/Firefox对超大C值的实际响应
主流浏览器（Chrome 112+/Safari 17.4+/Firefox 121+）对 C > 0.35 的处理不是统一裁切，而是依设备色域和渲染路径动态妥协：
-
C = 0.4–0.49：多数sRGB屏上自动压缩为低彩度，视觉上像“褪色蓝”；P3屏可能勉强维持但饱和度不线性增长 -
C ≥ 0.5：Chrome 115+ 和 Safari 17.5+ 在transition或@keyframes中易触发插值跳变，中间帧出现明显色块或短暂黑/白闪 -
C > 0.55：部分安卓 WebView（如 Samsung Internet 24.x）直接丢弃整条声明，fallback到上一条颜色（若没写 fallback，则显示透明或继承色）
为什么不是简单“截断到0.35”？
OKLCH 的 C 是 OKLab 空间中离灰轴的欧氏距离，不是可缩放标量。浏览器无法安全“clamp”，只能：
- 在 sRGB 输出阶段做色域映射（导致明度偏移，比如
oklch(60% 0.45 240)渲染成比预期更暗的蓝） - 在插值时放弃感知均匀性，退回到近似 sRGB 的线性插值（破坏 OKLCH 设计初衷）
- 某些 GPU 后端对超距向量做归一化失败，返回 NaN → 颜色通道置零 → 显示为纯黑或纯白（尤其在
color-mix()中）
如何验证你的C值是否超标？
别依赖 DevTools 的 computed 样式——它只显示降级后的 sRGB 值。真实判断靠三步：
- 用
colorjs.io输入你的oklch(L% C H)，看右下角 “Gamut Clipping” 是否标红 - 在真机上开深色模式 + P3 屏（如 iPhone 14 Pro），对比
C=0.28和C=0.42的按钮，若后者明显更“闷”或边缘泛灰，即已超标 - 加一段 2s 的
transition: background-color，从C=0.1到C=0.45，慢速播放时观察中间是否有 1–2 帧突兀变暗或偏品
真正难控的不是上限数值，而是同一 C 值在不同 L 和 H 下的设备适配表现——C=0.3 在黄（H≈90）上可能刚进安全区，在蓝（H≈240）上已轻微塌缩。必须把 @media (color-gamut: p3) 当作校准开关，而不是可选装饰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
