HEX、RGB、HSL 互转：改一处另外两处跟着变

三种写法描述的是同一个颜色，只是坐标不同：HEX 与 RGB 用「红绿蓝各多少」，HSL 用「色相、饱和度、亮度」。做设计时用 HSL 调色更直觉，交付给开发时用 HEX 更通用。

三者的换算关系

• HEX：#RRGGBB，每两位十六进制表示一个通道（00–FF）。#rgb 是缩写（每位重复一次，#f0a = #ff00aa）。
• RGB：三个 0–255 的整数，或百分比。CSS 里写作 rgb(255 0 170) 或 rgb(255,0,170)。
• HSL：色相 0–360°、饱和度 0–100%、亮度 0–100%。hsl(320 100% 50%)。

HEX 与 RGB 是一一对应的整数换算；HSL 是另一套坐标，一个 RGB 值对应唯一 HSL，但同一个 HSL 在不同色彩空间实现下可能有细微差别。

为什么设计时用 HSL

要「把这个蓝调深一点」，用 RGB 得同时改三个数，还得保证色相不变；用 HSL 只改亮度一个数。要保持色相、只调明暗或饱和度时，HSL 是唯一好用的坐标。

做设计系统时这一点很关键：主色定一个 HSL，然后明度 ±10%、饱和度 −20% 就派生出 hover、active、disabled 一整套，色相一致，不会跑色。

交付时转成 HEX，因为 HEX 兼容性最好、复制最短、任何工具都认。

带透明度的写法

#rrggbbaa 的后两位是 alpha（00 全透明，ff 不透明），等价于 rgba(r,g,b,a)。HSL 对应 hsla()。

注意 alpha 不是「透明度百分比」的直接映射：80（十六进制）≈ 50% 不透明，因为 0x80 = 128，128/255 ≈ 0.5。

非法输入会怎样

会就地给出明确提示，不会改动你当前的颜色，也不会让页面出错。支持 #rgb、#rrggbb、#rrggbbaa 以及 rgb()、rgba()、hsl()、hsla() 写法，也支持空格或逗号分隔的三个数字；无法识别时提示具体原因。

常见失败：少了 #、位数不对（5 位）、混用了全角字符、把 rgb 写成 RGB( 但参数用了百分比。