颜色转换器
HEX、RGB、HSL——改任何一栏,其余实时跟随。点色板取色或直接输数值,一键复制 CSS 格式。
在浏览器本地运行
HEX
RGB
HSL
如何使用 颜色转换器
- 输入或粘贴 HEX、RGB 或 HSL 颜色值。
- 也可以用拾色器直接选色。
- 按 CSS 格式一键复制转换结果。
常见用途
- 把设计规范的 HEX 转成 HSL 用于主题系统。
- 把品牌手册里的 RGB 值搬进样式表。
- 调色时看着实时色板微调色相。
- 统一从不同设计工具里复制出来的颜色格式。
使用前须知
- 转换结果不包含透明度通道。
- Display-P3 等广色域不在支持范围内。
- 屏幕上的色板显示受浏览器和显示器色彩配置影响。
接下来可以做什么
常见问题
什么时候用 HSL 比 HEX 好?
HSL 把色相、饱和度、明度拆开——比如让 hover 状态"亮 10%"只需改一个数字,不用做十六进制心算。
转换是精确的吗?
HEX 和 RGB 完全等价。HSL 数学上等价但取整到整度数/百分比——往返转换每通道最多差 1/255。
复制出来是 CSS 格式吗?
是的:#3B62F6、rgb(59, 98, 246)、hsl(228, 85%, 60%)——直接粘进样式表。