mobile wallpaper 1mobile wallpaper 2mobile wallpaper 3mobile wallpaper 4
97 字
1 分钟
OKLCH 颜色空间入门
2026-04-18

OKLCH 是感知均匀的颜色空间,改变亮度时色相不会偏移。

语法#

color: oklch(L C H);
/* L: 亮度 0~1, C: 彩度 0~0.4, H: 色相角度 0~360 */
color: oklch(0.7 0.15 250); /* 蓝紫色 */
color: oklch(0.55 0.12 55); /* 琥珀色 */

对比 HSL#

HSL 中蓝色和黄色相同亮度值,视觉亮度差异巨大;OKLCH 修正了这一问题。

生成调色板#

同一 L 值、不同 H 值 → 视觉亮度一致的多色调色板,非常适合主题设计。

分享

如果这篇文章对你有帮助,欢迎分享给更多人!

OKLCH 颜色空间入门
https://example.pages.dev/posts/test-css-oklch/
作者
博主
发布于
2026-04-18
许可协议
CC BY-NC-SA 4.0

部分信息可能已经过时

目录