CSS lch与oklch颜色函数如何拓展更广泛色彩显示标准？

本文共计1086个文字，预计阅读时间需要5分钟。

当前版本即可使用，但需注意浏览器和场景支持：

常见错误现象：lch(50% 100 270) 写成 lch(50 100 270)（漏掉百分号），或把 L 当成 0–255（实际是 0–100，对应明度），结果颜色发灰或溢出。

• L 是明度，0% 最黑，100% 最白，不是线性亮度值
• C 是色度，数值越大越饱和，但不同色调下“最大可取值”不同（比如红 vs 绿，在 sRGB 下绿能撑更高 C）
• H 是色调角，0–360 度，和 hsl() 一致，但色域更大

oklch() 比 lch() 好在哪，什么时候该换

oklch() 基于 OKLab 色彩空间，感知更均匀——相同 ΔL 变化，在人眼看来明度变化更一致；lch() 基于 CIELAB，蓝紫区域有压缩，调色时容易误判饱和度。简单说：做深色模式渐变、UI 色阶、无障碍对比度微调，优先选 oklch()。

使用场景差异明显：比如想从主色生成一个稍浅又不失饱和的悬停态，oklch(75% 0.25 240) 比 lch(75% 0.25 240) 更可靠，后者在青蓝色系里可能看起来“突然变灰”。