颜色转换器
在 HEX、RGB、HSL 与 OKLCH 之间转换,实时预览
本地运行
loading…
关于此工具
以任意常见记法输入颜色——#hex、rgb()、hsl() 或 CSS 颜色名——同时得到所有格式:HEX、RGB、HSL 和 OKLCH,旁边是实时色块。Alpha 通道在各格式间保留,输出采用现代 CSS 语法(空格分隔的通道),可直接粘进当下的样式表。
收录 OKLCH 是因为它是 CSS 颜色的前进方向:与 HSL 不同,它的明度轴在感知上是均匀的,两个 L 相同的颜色看起来确实一样亮,调整色相也不会意外改变感知亮度。把现有调色板转成 OKLCH,是构建一致颜色阶梯的第一步。
转换数学在本地运行,使用公开的 sRGB↔OKLab 变换,并且数值可往返:HSL 输入得到的 RGB 与浏览器计算的结果完全一致。
常见问题
- 为什么 HSL 和 OKLCH 的明度值不一致?
- HSL 的明度是 RGB 数值的几何属性,与人类视觉无关——hsl(60 100% 50%) 的黄色看起来远亮于 hsl(240 100% 50%) 的蓝色,尽管 L 相同。OKLCH 的 L 轴按感知设计,L 相等意味着看起来一样亮。这种不一致正是 OKLCH 存在的全部理由。
- Alpha 值是什么意思,在各格式里放在哪?
- Alpha 是不透明度,0(透明)到 1(不透明)。8 位十六进制里是最后一个字节(#RRGGBBAA);现代函数语法里跟在斜杠后:rgb(76 141 255 / 0.5)。这个转换器自动在所有格式间携带 alpha。
- 每个 OKLCH 颜色都能在 sRGB 里显示吗?
- 不能——OKLCH 覆盖广色域,某些色度/明度组合没有 sRGB 对应。从 sRGB 出发转换(本工具即如此)始终可表示;反方向的超色域颜色必须被裁剪或映射,这就是鲜艳的 P3 绿在 sRGB 屏幕上发闷的原因。
- 为什么是空格分隔的 rgb(76 141 255) 而不是逗号?
- CSS Color Module Level 4 标准化了空格分隔的通道加可选的 /alpha,所有现代浏览器都支持。逗号形式仍然有效,但空格形式才是新规范(以及本工具)使用的。