OKLCH需用oklch()函数按亮度/色度/色相顺序书写，仅Chrome112+/Safari16.4+/Firefox113+支持；其基于OKLab空间更感知均匀但色域窄于HSL；渐变中须设降级色、避免跨0/360色相插值。
OKLCH在CSS中怎么写才生效
OKLCH目前只在支持 CSS Color Level 4 的浏览器中可用（Chrome 112+、Safari 16.4+、Firefox 113+），旧版本或部分移动端 WebView 会直接忽略并回退到前一个声明。必须用 oklch() 函数，且参数顺序固定：亮度（0–1）、色度（0–0.4+，取决于色相）、色相（0–360deg）。不能省略单位，oklch(0.8 0.2 240) 合法，oklch(0.8, 0.2, 240) 或 oklch(80% 0.2 240) 都会失效。
为什么OKLCH比HSL更均匀，但色域更窄
OKLCH基于 CIE OKLab 均匀色彩空间，相同数值变化在感知上更接近等距——比如 oklch(0.5 0.15 0) 到 oklch(0.5 0.3 0) 的色度提升，视觉明暗/鲜艳度变化比 HSL 中 hsl(0 50% 50%) → hsl(0 100% 50%) 更线性。但 OKLCH 覆盖的是 sRGB 显示设备能实际复现的子集，高色度 + 极端色相（如 oklch(0.9 0.35 30)）可能被浏览器自动 clamp 到最近可显示值，甚至降级为灰阶；而 HSL 可以“算出”超出色域的颜色，只是显示失真。
如何安全地用OKLCH做渐变和主题色系统
直接用 OKLCH 写 linear-gradient 或 CSS 自定义属性是可行的，但要注意三点：
- 务必提供降级色：例如
background: linear-gradient(to right, #f0f0f0, #007bff); background: linear-gradient(to right, oklch(0.95 0.02 250), oklch(0.5 0.25 250)); - 避免在色相轴上跨 0/360 边界做插值（如从 350° 到 10°），OKLCH 不会自动走短弧，会导致渐变绕远、出现意外灰带；应手动拆成两段或改用色相差
- 用
color-mix(in oklch, ...)做混合比用mix-blend-mode更可靠，但注意该函数尚未在 Safari 中支持（截至 Safari 17.5）
调试OKLCH颜色时最容易忽略的坑
开发者工具里无法直接编辑 OKLCH 值（Chrome DevTools 仅显示计算后的 sRGB 十六进制），复制出来的颜色永远是降级结果。想验证真实 OKLCH 行为，得靠 JS 读取 getComputedStyle(el).backgroundColor ——但返回值仍是 sRGB，所以真正可靠的手段只有视觉比对 + 限制色度上限（建议日常使用不超过 0.28，兼顾表现力与兼容性）。另外，oklch() 不支持 alpha 语法糖（如 oklch(0.5 0.2 120 / 0.8) 是合法的，但旧版 Chromium 会拒斥，必须写全 oklch(0.5 0.2 120 / 0.8) 并确认目标环境版本）。
立即学习“前端免费学习笔记（深入）”；
