HEX 转 RGB 怎么换算？取色器里 6 种色值的算法与颜色名对不上的原因

#1ea54c 和 rgb(30, 165, 76) 是同一个颜色，前者只是把三个通道值写成了十六进制。打开在线颜色取色器，在任意一栏填进去，其余六栏会一起变：

但有三处最容易看错：HEX 的两位一组怎么拆、HSL 的 L 与 LCH 的 L 为什么差了一截、NAME 为什么把两个不同色值都叫 seagreen。下面逐个说，数都是刚才那次运行里读出来的。

HEX 转 RGB：两位一组，各自换成十进制

把 #1ea54c 拆成 1e / a5 / 4c 三组，每组当一个十六进制数念：

• 1e = 1×16 + 14 = 30
• a5 = 10×16 + 5 = 165
• 4c = 4×16 + 12 = 76

一位十六进制是 0–15（a 到 f 分别是 10 到 15），两位最大 ff = 255，正好对上 RGB 的取值区间。反过来从 RGB 拼 HEX 一样：30 → 1e，165 → a5，76 → 4c。

几条容错规则是实测出来的：

• 三位缩写认：#abc 按 aa/bb/cc 展开成 rgb(170, 187, 204)。但 HEX 栏不会自动补全，输完仍显示 #abc。
• 不带 # 也认：填 1ea54c 照样换算。
• 大小写不敏感：#1EA54C 和 #1ea54c 结果一样。
• 8 位带透明度不认：#1ea54c80 会报错，见下一节。

格式无效时，旁边几栏的数是旧的

CSS 里 #RGBA 和 #RRGGBBAA 是合法写法，MDN 的 hex-color 条目列了四位和八位语法；这个页面只处理 3 位和 6 位。输入 #1ea54c80，HEX 框下方出现红字「格式无效」：

这里有个容易踩的坑：报错时其余栏不清空，仍然显示上一个有效颜色的值。截图里 HEX 是 #1ea54c80，右边的 rgb(46, 139, 87) 其实是之前输入的 #2e8b57 留下来的。看到红字就别拿旁边的数去用。要透明度，在样式里写 rgba() 或直接写 8 位色值。

HSL：一个角度加两个百分比

#1ea54c 对应 hsl(140, 69%, 38%)，三个数都是算出来的：

• 亮度 L = (max + min) / 2 = (165 + 30) / 2 / 255 ≈ 38%
• 饱和度 S = (max − min) / (255 − |max + min − 255|) ≈ 69%
• 色相 H：最大通道是绿，H = 60 × (2 + (B − R) / (max − min)) = 60 × (2 + (76 − 30) / 135) ≈ 140°

由此能看出 HSL 的一个特点：L 只看最大和最小通道的平均值，跟色相基本脱钩。白色 #ffffff 是 hsl(0, 0%, 100%)，黑色是 hsl(0, 0%, 0%)——饱和度归零时，色相填多少都是同一个灰，不必纠结那个 0。

改 HSL 也会反向带动其它栏。实测填 hsl(210, 100%, 50%)，HEX 变成 #0080ff。这里藏着个取整细节：HSL 算出的绿色通道是 127.5，页面输出 rgb 时取整成 128，所以是 80 而不是 7f。

HWB：同一色空间里换一种说法

hwb(140, 12%, 35%) 里的两个百分比是：

• 白度 W = min / 255 ≈ 12%
• 黑度 B = 1 − max / 255 ≈ 35%

MDN 的 hwb() 定义写明 hwb(H 0% 0%) 与 hsl(H 100% 50%) 是同一个颜色，两者都在 sRGB 色空间里，只是描述方式从「饱和度和亮度」换成「掺了多少白、多少黑」。判断一个颜色有多灰，看 W 和 B 是不是都明显大于 0，比读饱和度更直观。

LCH 的 L 不是 HSL 的 L

同一个 #1ea54c，HSL 给 38%，LCH 给 59.62。不是谁算错了：

• HSL 的 L 是 (max + min) / 2，纯几何平均；
• LCH 来自 CIELAB，L 是感知亮度，0 是黑、100 是白，跟人眼对明暗的感受更接近。

MDN 在 hwb() 页面也提到，色相角度在 sRGB（hsl/hwb）、CIELAB（lch）、Oklab（oklch）三套色空间里并不共用同一套刻度。所以拿 LCH 的 H 去和 HSL 的 H 对比没有意义，两个 L 也不能直接比大小。

小数点后两位对不上也别慌。实测 #0080ff 这一栏给的是 lch(54.58, 73.65, 285.02)；用整数 rgb(0, 128, 255) 复算得 54.71 / 73.36 / 284.83，只有把绿色通道当 127.5 算才和页面完全一致——说明这一栏用的是取整前的中间值。同一个页面里不同栏位来自计算链的不同阶段，差一点是正常的。

CMYK：能算，但不是印刷厂用的值

页面给的是朴素换算：K = 1 − max/255，C = (1 − R/255 − K) / (1 − K)，M、Y 同理。

色值	页面 CMYK	按公式复算
#1ea54c	cmyk(82%, 0%, 54%, 35%)	82 / 0 / 54 / 35
#2e8b57	cmyk(67%, 0%, 37%, 45%)	67 / 0 / 37 / 45
#ff0000	cmyk(0%, 100%, 100%, 0%)	0 / 100 / 100 / 0

数字能完全对上，说明它做的是数学换算，不涉及 ICC 配置文件、纸张和油墨。同一组 CMYK 在不同印刷条件下印出来不一样，真要交付印刷，把 RGB 或 HEX 给设计或印厂，让他们用自己的色彩配置转一次。

NAME 栏：给的是最接近的命名色

这一栏最容易误导人。两次实测：

输入	RGB	NAME
#1ea54c	rgb(30, 165, 76)	seagreen
#2e8b57	rgb(46, 139, 87)	seagreen

seagreen 的标准色值是 #2e8b57（MDN named-color 表），和 #1ea54c 差了 16 / 26 / 11 个通道单位，显然不是同一个颜色，页面却都叫它 seagreen。再极端一点，输入 #010203（肉眼几乎全黑）会显示 black，输入 #123456（深蓝灰）会显示 darkslategray——而 darkslategray 的标准值是 #2f4f4f：

反过来，从名字查色值是精确查表：cornflowerblue → #6495ed、dodgerblue → #1e90ff，和 MDN 的 named-color 表一致。名字写错（比如 notacolor）时，其它栏位不动。

所以名字适合口头描述、快速判断色系；要写进 CSS，用 HEX/RGB，或者从名字查出来的精确值。

取色器不负责的两件事

一、不判断能不能看清。 它只换算色值，对比度要自己按 WCAG 2.x 的相对亮度公式算：

前景 / 背景	对比度	正文 4.5:1
白字 / #1ea54c	3.21:1	不达标
黑字 / #1ea54c	6.54:1	达标
白字 / #2e8b57	4.24:1	不达标
白字 / #0080ff	3.80:1	不达标

18pt 以上的大字按 3:1 判定，白字压 #1ea54c 才勉强算过；正文按 4.5:1，就不行了。

二、不处理透明度。 没有 alpha 输入，要半透明就自己写 rgba(30, 165, 76, 0.5)。

页面写明转换在浏览器本地完成，色值不会上传到服务器；页面另有只记事件类型的使用统计，不含色值。贴公司配色时，色值本身不出浏览器。

怎么用

1. 打开颜色取色器；
2. 在 HEX、RGB、HSL、HWB、LCH、CMYK、NAME 任一栏输入，其余六栏实时更新；
3. 也可以点页面上的取色面板直接选色；
4. 每栏右侧有复制按钮，单独复制某一种格式。

核对时记住三条：HEX 是两位一组对应 RGB 三个数；LCH 的 L 不能和 HSL 的 L 直接比；NAME 是就近取名，不是精确值。看到「格式无效」，先别用旁边那几栏的数。