在线颜色转换器
输入 HEX、RGB 或 HSL 任一格式，自动识别并换算出另外两种，配大色块实时预览。支持随机颜色与常用色板一键填入。全部换算在浏览器本地完成。
觉得好用？探索更多内容
颜色转换器使用说明
做前端开发、写 CSS、配置主题色、做 PPT 配色时，「同一个颜色要在 HEX、RGB、HSL 之间来回换」是再常见不过的需求：设计稿给的是 HEX，CSS 变量习惯写 rgb()，而想微调颜色深浅时 HSL 才最直观。本工具支持三种格式自动识别、双向换算：你不需要先选择输入格式，直接粘贴颜色值即可，工具会判断它是 HEX、RGB 还是 HSL，并立即换算出另外两种格式，同时在上方大色块中实时预览。
使用步骤：
- 第一步：在输入框粘贴或输入颜色值。支持
#4f46e5、4f46e5、#fff（3 位缩写）、rgb(79,70,229)、hsl(243,75%,59%)等写法。 - 第二步：输入过程中结果自动更新；也可以点击「转换」按钮手动触发。三种结果（HEX / RGB / HSL）各自带复制按钮。
- 第三步（可选）：没有灵感时点「随机颜色」探索配色；下方常用色板提供红橙黄绿蓝紫黑白灰，点击即填入输入框。
输入解析非常健壮：会自动去除首尾空格和多余的 # 号，兼容大小写，兼容中文逗号，非法输入会以红色提示明确报错而不是给出错误结果。
常见问题（FAQ）
HEX、RGB、HSL 三种颜色格式有什么区别？
输入颜色时支持哪些写法？
为什么同一个颜色在不同工具里显示略有差异？
HSL 中的色相、饱和度、亮度分别是什么？
随机颜色按钮生成的是真随机吗？
相关知识：颜色模型与换算原理
HEX 与 RGB 本质相同。HEX 只是 RGB 的十六进制书写形式：#4f46e5 中的 4f、46、e5 分别是红、绿、蓝三个通道的值，十进制即 79、70、229。3 位缩写（如 #fff）是把每位重复展开成两位（ff → ffff → 255）。因此这两种格式的换算不需要任何色彩理论，只是进制转换。
RGB 与 HSL 的换算基于几何模型。把 RGB 三个通道归一化后取最大值 max 和最小值 min：亮度 L = (max + min) / 2；饱和度 S 在亮色与暗色区域使用不同公式（L > 0.5 时为 (max-min)/(2-max-min)，否则为 (max-min)/(max+min)）；色相 H 则由哪个通道最大决定，换算到 0-360 度。反过来，由 HSL 求 RGB 时先算出「中间量」再按色相所在的 60 度区间分配到三个通道。这些公式是 CSS 规范和各大颜色库共同采用的标准算法，本工具严格按此实现。
实际应用小贴士：在 CSS 里用 HSL 搭建设计系统的调色板是主流做法——固定品牌色相 H，让 S、L 形成梯度，就能得到一套和谐的明暗系列。配色确定后如果需要生成品牌图标配色或二维码品牌色，可以配合本站的 二维码生成器 与 图片转 ICO 工具使用；想把带透明度的颜色写成编码形式，也可以看看 URL 编解码 在传参时的注意事项。