oklch不提供色域限制，超出srgb的颜色会被静默截断或渲染失真；需手动控制c值（如青蓝区h≈210–270时c>0.35易溢出），且色相差超180°须拆段，避免插值失真。
OKLCH 本身不提供色域限制能力，浏览器也不会自动把超出 sRGB 的颜色“拉回”合法范围 —— 它只是静默截断、降级或渲染失真。你必须手动控制参数，否则 oklch(90% 0.4 240) 在 sRGB 屏上可能显示为脏蓝甚至灰块。
为什么 oklch() 值会“溢出” sRGB
OKLCH 是感知均匀空间，不是设备输出空间。它的 C（色度）和 H（色相）组合在某些 L 下天然超出 sRGB 能力边界：
-
oklch(70% 0.35 240)在多数 sRGB 显示器上已接近极限，C > 0.35 容易被 clamp 或插值失真 - 青蓝区间（H ≈ 210–270）对高 C 最敏感；红/黄区（H ≈ 0–60）容忍度稍高
- 低 L（oklch(30% 0.25 240) 可能比
oklch(60% 0.25 240)更容易变灰 - Chrome DevTools 的颜色 picker 显示的 OKLCH 值 ≠ 实际输出 —— 它只反映输入值，不反映 clamp 后结果
安全 C 值怎么定：实测比查表管用
没有通用“最大 C”，必须按 L+H 组合实测。最可靠做法是写一个测试页，在目标设备上观察：
- 用
background-color: oklch(60% 0.28 240)渲染全屏 div - 打开 Chrome/Safari/Firefox DevTools → 点击颜色值 → 切换到 LCH/OKLCH 视图 → 拖动 C 滑块
- 观察预览是否平滑过渡；一旦出现突然变灰、发虚、边缘噪点，就是当前 L/H 下的临界点
- 记录下该组合下“无失真”的最高 C（通常 ≤ 0.28 是较稳妥上限，但不是铁律）
@supports 检测不能替代色域控制
检测 @supports (color: oklch(0% 0 0)) 只说明浏览器支持语法，不保证颜色在设备上可准确呈现：
- 同一段
oklch(80% 0.32 240)在 MacBook Pro（P3）上正常，在 ThinkPad X1 Carbon（sRGB）上可能直接变暗蓝 - 不要依赖
color(display-p3)强制走广色域 —— 它需要 HTML + OS + GPU 三重就绪，且 CSS 无法触发系统 HDR - 真正跨设备一致的做法：固定 H，用 L 和 C 微调，C 值统一 ≤ 0.25，并搭配
color-mix(in oklab, ...)控制混合保真度
渐变里防溢出的实操底线
CSS 渐变不支持 in oklch 插值，所有线性插值都在 sRGB 内进行。这意味着即使两端是 OKLCH 值，中间色仍可能漂移或灰化：
- 避免跨高 C 区间做渐变：
oklch(60% 0.3 240) → oklch(80% 0.3 240)比oklch(60% 0.1 240) → oklch(80% 0.1 240)更危险 - 色相差 > 180° 时必须拆段，否则插值路径绕远，C 被强制压缩：
oklch(0.7 0.25 350), oklch(0.7 0.25 0), oklch(0.7 0.25 10) - 禁用态/悬停态优先调 C，而非 L：
oklch(0.62 0.28 258.5) → oklch(0.62 0.12 258.5)，避免亮度突变导致 WCAG 对比度失效
最常被忽略的一点：OKLCH 的“感知均匀”只在数学空间成立，输出端仍受物理色域钳制。写 oklch(50% 0.4 240) 不等于你能看到那个蓝 —— 它只是告诉浏览器“我想这么亮、这么饱和、这么偏蓝”，而浏览器和屏幕共同决定最终给你什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
