OKLCH 色阶生成器

在感知均匀色空间中生成色阶——每一档对眼睛的明度跨度真正相等

选色

色度模式

OKLCH 色阶

点击色块查看完整色值；色块下方显示对应的 CSS oklch() 函数值

与 HSL 色阶对比

灰度行展示感知明度——OKLCH 的灰度行比 HSL 更均匀，说明每档明度跨度真正相等

OKLCH 感知明度曲线 HSL 感知明度曲线

CSS 输出

现代浏览器直接支持 oklch()；附 sRGB HEX 兜底注释

OKLCH色阶生成器使用说明

OKLCH色阶生成器，在感知均匀色彩空间中生成过渡视觉自然的颜色色阶，适合CSS Color Level 4设计系统，亮度变化更线性，无色阶变灰问题。色阶按照 OKLCH 感知均匀模型生成，每一步的亮度间隔在视觉上是真正等距的，不会出现传统 HSL 色阶跳变发灰的问题。

适合正在搭建或升级设计系统色彩规范的团队，尤其是已经决定采用 CSS Color Level 4 新特性的项目。

常见问题

为什么用 OKLCH 生成色阶？ OKLCH 感知均匀，相等的亮度步长看起来间距也相等——色阶平滑，不会像 HSL 那样跳变不齐。

浏览器支持 OKLCH 吗？ 支持，所有当前主流浏览器都支持 oklch() 函数，旧屏幕上会回退到最接近的 sRGB 颜色。

OKLCH 能显示 HEX 表达不了的颜色吗？ 能——它可表达超出 sRGB 的广色域 P3 颜色，也就是现代屏幕能显示的更鲜艳的颜色。