RGB/HSL/HEX颜色互转

功能说明

本工具支持 RGB、HSL、HEX 三种常用颜色格式的实时互转：修改任意一端的数值，其他格式立即联动更新，并配滑块拖拽调节与色块实时预览。

三种格式的定位各不相同——RGB：红绿蓝各 0-255，显示器常用，如 rgb(24, 144, 255)；HSL：色相 0-360、饱和度与明度 0-100%，按「色相/深浅」思考时最直观，设计调色常用，如 hsl(207, 100%, 55%)；HEX：十六进制简写如 #1890FF，前端开发最常用。

RGB/HSL/HEX 颜色互转使用步骤

1. 在任意一端输入数值或拖动滑块设定颜色；
2. 观察色块预览确认效果；
3. 查看另两种格式的自动换算结果；
4. 点击「复制 RGB」「复制 HSL」或「复制 HEX」获取需要的格式。

RGB/HSL/HEX 颜色互转适用场景

• 设计稿到代码：把设计软件的颜色转成 CSS 用的 HEX；
• 调色：在 HSL 端只动色相快速生成同风格色系；
• 前端取色与设计规范文档的颜色标注。

常见问题

为什么 HSL 更适合调色？

HSL 把颜色拆成色相、饱和度、明度三个直觉维度，想「换个色相但保持深浅」时只改一个值即可，RGB 则要三个值联动。

HEX 里的简写形式（#FFF）合法吗？

合法。三位简写是六位形式的缩写，工具输出的是完整六位，两者等价。

转换有精度损失吗？

RGB 与 HEX 是整数一一对应无损换算；RGB 与 HSL 之间经四舍五入可能有个位数的微小出入，不影响视觉。

相关工具

相关内容