交互式色彩空间沙盒
本色彩工坊支持在 CSS HEX、RGB 以及现代感知均匀的 OKLCH 色彩空间坐标之间进行实时双向转换。OKLCH 格式是 RainLib 布局设计令牌(定义在 DESIGN.md 中)的核心色彩空间,支持高度一致的色彩亮度和饱和度梯度调谐。
OKLCH Coordinatesoklch(0.485 0.18 250)
Lightness (L)0.485
Chroma (C)0.18
Hue (H)250°
// Color Match
Reference Palette Matches
--bg (Light)
#fbfbfd
--bg (Dark)
#050505
--surface (Dark)
#121212
--brand-primary (Light)
#1062cd
--brand-primary (Dark)
#66fcf1
为什么设计系统推荐使用 OKLCH?
- 感知均匀性:与 HSL/RGB 不同,OKLCH 的亮度 (L) 变化完美契合人眼对实际亮度的感受。即使色相不同,相同 L 值的颜色在视觉上亮度完全一致,避免了 HSL 中黄色和蓝色亮感失真的问题。
- 超广色域支持:OKLCH 能够原生映射并展示超出普通 sRGB 的 Display P3 或 Rec. 2020 广色域色彩,在现代高分屏设备上视觉体验更佳。