OKLCH 是什么？现代 CSS 颜色格式详解
OKLCH 是现代设计系统正在迁移到的颜色格式。它看起来像 HSL，却修好了 HSL 最大的毛病：数值相等不代表看起来一样。下面讲它在实践中意味着什么。
- OKLCH = 亮度、彩度、色相——像 HSL，但感知均匀
- OKLCH 里相等的亮度步长看起来间距均匀；HSL 里则不然
- 它能描述 HEX/RGB 表达不了的广色域（P3）颜色
- 所有现代浏览器都支持，通过 CSS 的 oklch() 函数使用
OKLCH 代表什么
OKLCH 有三个分量：L（亮度，0–100%）、C（彩度——大致是饱和度/鲜艳度）、H（色相，0–360°）。听起来像把 HSL 重新排序，其实差不多——区别在底层数学。OKLCH 建立在 OKLab 色彩空间上，而 OKLab 是为匹配人眼视觉而设计的。
关键：感知均匀
在 HSL 里，亮度 50% 的黄看起来比亮度 50% 的蓝亮得多——数值相等，亮度却差很远。这会毁掉色阶：HSL 色阶的跳变不均匀。而 OKLCH 的亮度按"感知亮度"校准过，所以相等的步长看起来就相等。这正是设计系统用它来生成干净均匀的 50–950 色阶的原因。
更广色域（P3）
HEX 和 rgb() 局限于 sRGB 色域。OKLCH 能表达更广色域（如 Display P3）里的颜色——也就是现代手机和笔记本能显示的更鲜艳的颜色。在旧屏幕上浏览器会自动回退到最接近的 sRGB 颜色，所以放心用。
什么时候用
当你要生成色阶、构建设计系统色板，或在调整品牌色时想要可预测的亮度，就用 OKLCH。对于一次性的背景色，HEX 依然够用。语法：oklch(62% 0.19 256)——亮度、彩度、色相。
常见问题
CSS 里的 OKLCH 是什么？
OKLCH 是一个 CSS 颜色函数——oklch(亮度 彩度 色相)——建立在感知均匀的 OKLab 色彩空间上。它让你指定颜色时，相等的数值步长看起来间距也相等。
OKLCH 和 HSL 有什么区别？
两者都用亮度、类似饱和度的值和色相。但 HSL 的亮度不匹配感知亮度，所以色阶不均匀。OKLCH 感知均匀，还能表达更广的 P3 颜色。
浏览器支持 OKLCH 吗？
支持——所有当前主流浏览器都支持 oklch() 函数，且在旧屏幕上会优雅回退到最接近的 sRGB 颜色，可放心用于生产环境。
生成感知均匀的色阶
用 OKLCH 生成视觉上均匀过渡的色阶