颜色转换器
在 HEX、RGB 和 HSL 格式之间即时转换颜色。免费，转换在浏览器中完成。
- 在浏览器中处理
- 数据不离开你的设备
- 免费 · 无需注册
用微信扫描以下二维码即可分享
示例、说明与常见问题 带实际输出的示例、与同类工具的差别，以及常见问题。
关于颜色格式
HEX 是网页中最常用的颜色格式。六位代码如
#1a73e8，用两个十六进制数字分别表示红、绿、蓝通道（00–FF）。
RGB 用十进制数（0–255）表示同样的三个通道，便于程序化调整：
rgb(26, 115, 232)。
HSL 代表色相（Hue）、饱和度（Saturation）、亮度（Lightness），是更直观的颜色模型。
色相为 0–360°，饱和度和亮度为百分比：hsl(214, 82%, 51%)。
HSL 非常适合通过调整亮度来生成色阶。
一个颜色的完整换算
以 #1a73e8 为例。每两位十六进制是一个通道：1a = 26，73 = 115，e8 = 232，所以 RGB 是 rgb(26, 115, 232)。
换算 HSL 时，先把三个通道缩放到 0–1，找出最大值（0.910，蓝）和最小值（0.102，红）：
- 亮度 = (最大 + 最小) / 2 = 0.506 → 51%
- 饱和度 = (最大 − 最小) / (2 − 最大 − 最小) = 0.817 → 82%（亮度高于 50% 时用这个公式）
- 色相：蓝色通道最大，色相 = 60 × ((R − G) / (最大 − 最小) + 4) = 214.1 → 214
工具显示 hsl(214, 82%, 51%)。公式与 CSS Color Module Level 4 一致。
用 Ant Design 的色值试一试
Ant Design 的主色 token colorPrimary 默认是 #1677ff（见官方文档定制主题的 SeedToken 表）。粘贴进 HEX 框，得到 rgb(22, 119, 255) 和 hsl(215, 100%, 54%)。
假如设计稿里只记了 HSL，把 hsl(215, 100%, 54%) 输回 HSL 框，HEX 变成 #1476ff：红色通道少了 2，绿色通道少了 1。这就是 HSL 取整带来的误差，写进 ConfigProvider 的 theme.token 时请直接用 HEX。
主色激活态 colorPrimaryActive 的默认值是 #0958d9，对应 rgb(9, 88, 217) 和 hsl(217, 92%, 44%)。
蒙层颜色 colorBgMask 的默认值是 rgba(0,0,0,0.45)。粘贴进 RGB 框后，透明度 0.45 被丢掉，结果是 #000000 和 hsl(0, 0%, 0%)。这类带透明度的 token 不适合用本工具换算，需要自己另外记下 alpha 值。
输入框接受什么
- HEX： 3 位或 6 位，可带
#，不区分大小写。输入到 3 位或 6 位时其他框才会更新；输入 4、5 位的过程中，其他框保留上一个颜色；超过 6 位判为无效。 - RGB： 逗号分隔的
rgb(r, g, b)，每个通道是 0–255 的整数。rgba(...)可以读取，但第四个值被丢弃。百分比（rgb(10%, 45%, 91%)）、小数和空格分隔的写法不接受。 - HSL： 逗号分隔的
hsl(h, s%, l%)，可以用小数，%可以省略。色相超过 360 时绕回一圈，饱和度和亮度超出 0–100% 时截断，与 CSS Color 4 第 7 节一致。214deg这样的角度单位和负色相不接受。
例如 hsl(480, 100%, 25%) 与色相 120 相同，得到 #008000。
输入先按 NFKC 换成半角再读取，所以混入全角逗号的 rgb(26，115，232) 也能换算，得到 #1a73e8 和 hsl(214, 82%, 51%)。离开输入框时，框里的文字会换成半角的 rgb(26,115,232)。
无法识别的输入会让状态栏显示「颜色格式无效」，另外两个框同时清空，这样「复制」不会拿到旧颜色。顿号「、」没有对应的半角字符，用顿号分隔的 rgb(26、115、232) 就属于这种情况。
颜色值后面多出的文字不会被忽略。rgb(26, 115, 232)abc 会显示「颜色格式无效：请删去颜色值后面多余的文字。」三个数之后只允许透明度、右括号和空格，所以还没输完的 rgb(26, 115, 232 仍会正常换算。
从样式表里复制的值末尾带分号或两端带引号时，工具会先去掉再读取：rgb(26, 115, 232); 得到 #1a73e8 和 hsl(214, 82%, 51%)。
限制
- 不支持透明度。 8 位十六进制（
#1a73e880）会被判为无效，rgba(26, 115, 232, 0.5)里的透明度会被忽略。 - HSL 取整。 输入
hsl(214, 82%, 51%)得到的是#1c74e9而不是#1a73e8，因为取整后的数值已经不能精确指回原色。请以 HEX 值为准。 - 只支持三种格式： HEX（3 位或 6 位，
#abc会展开成#aabbcc）、RGB 和 HSL，不支持 HSB/HSV、HWB、OKLCH。
FAQ
支持哪些颜色格式？
HEX、RGB 和 HSL，可以任意方向互转。HEX 接受 3 位或 6 位，可带 #，不区分大小写：#FF5733 和 #ff5733 结果相同，#f53 按 #ff5533 处理。RGB 写成逗号分隔的 rgb(255, 87, 51)，HSL 写成 hsl(11, 100%, 60%)。
支持透明度吗？
不支持，只处理不透明颜色。rgba() 的第四个值会被忽略，#1a73e880 这类 8 位 HEX 会被判为格式无效。
为什么 HSL 换回 HEX 后差了一点？
HSL 按整数显示，多数颜色会损失一点精度。#1a73e8 显示为 hsl(214, 82%, 51%)，把这个 HSL 输回去得到的是 #1c74e9。需要精确颜色时，请复制 HEX 或 RGB。
数据会发送到服务器吗？
不会。换算在浏览器标签页里用 JavaScript 完成，输入的色值不会发送到服务器，也不会保存在浏览器存储里。页面统计只记录你点了哪个「复制」按钮（如 copy_hex），不包含色值。
输入里混入全角逗号或全角字母能识别吗？
能。工具先按 NFKC 把全角字母、数字和标点换成半角再读取，rgb(26，115，232)、＃１Ａ７３Ｅ８ 都按半角换算；离开输入框后，框里的文字也会换成半角，复制出来就是标准写法。顿号「、」没有对应的半角字符，rgb(26、115、232) 仍会显示「颜色格式无效」。