OKLCH 颜色选择器
颜色
OKLCH 是 CSS Color 4 采用的色彩空间，让明度、饱和度与色相按人眼实际预期的方式表现：固定 L+C 仅移动色相时感知亮度保持稳定，而旧的 HSL 会出现明显偏移。本选择器暴露三个通道加 alpha，并显示精确的 CSS oklch() 形式、等效的 sRGB hex / rgb / hsl、OKlab a/b 分解，且当颜色过于饱和以致超出 sRGB 显示色域时给出警告（此时浏览器会回退到最接近的 sRGB 颜色）。
—
预设
#0099f0
sRGB 色域超出 sRGB（截断）
- oklch()oklch(65.0% 0.180 240.0)
- Hex（截断）#0099f0
- rgb()rgb(0, 153, 240)
- hsl()hsl(202, 100%, 47%)
- oklab()oklab(65.0% -0.090 -0.156)
明度 0–1（0 = 黑，1 = 白）。色度 0 为中性灰；超过 0.3 的值常落在 sRGB 之外。
使用方法
- 拖动 L、C、H 调整颜色 —— 留意色域徽章。
- 如果希望屏幕色块完全准确，徽章变琥珀时稍微降低色度。
- 复制样式表所需形式：现代栈应优先使用 oklch() 字符串。
常见问题
- 为什么颜色显示「超出 sRGB」？
- 标准显示器只能呈现人类可见色的有限一部分（sRGB）。OKLCH 是更广、感知均匀的空间，因此可指定 sRGB 屏幕无法呈现的颜色。浏览器会将其截至最近的 sRGB 对应色 —— hex 预览即被截断后的结果。
- 为什么用 oklch() 而非 hsl()？
- HSL 建立在 RGB 之上，所以明度在不同色相间不均匀（同 L 下黄色比蓝色看上去亮得多）。OKLCH 依据真实感知数据调校，因此在调整色相时动画、主题令牌与可访问性比率均更可预期。