HEX、RGB、HSL 颜色格式指南：从设计稿到 CSS

HEX、RGB、HSL 描述的是同一批颜色，区别只在表示方式。选择哪种格式不改变视觉结果，但会明显影响改色时的效率与出错概率——这正是它们各自的定位差异所在。

一、三种表示法的本质

• HEX：把红、绿、蓝三个通道值写成十六进制，紧凑、易复制，是设计稿与 CSS 之间最通用的交换格式；
• RGB：同样三个通道，用 0–255 的十进制表示，便于程序计算与插值；
• HSL：色相（0–360 度）、饱和度（0–100%）、亮度（0–100%），贴近人「调色」的直觉；
• HSV / HSB：与 HSL 类似但亮度定义不同，多见于取色器与设计工具。

二、HEX 的简写与透明度

• #RGB 是 #RRGGBB 的简写，仅在每对通道的两个字符相同时可用。例如 #aabbcc 可写作 #abc，而 #a1b2c3 不能简写；
• 带透明度的写法是 8 位：#RRGGBBAA，分别表示三个通道与透明度，因此 #00000080 是半透明黑；
• 四位简写 #RGBA 同理，要求四个通道各自成对重复；
• 透明度的数值含义容易记错：00 是完全透明、FF 是完全不透明，与「0% 不透明」的直觉相反。

三、为什么调色推荐 HSL

用 RGB 或 HEX 做「同色系深浅变化」时，需要同时改动三个通道，且改动量与视觉亮度不成正比，很难一次调到位。HSL 把亮度单独拆成一个维度，于是：保持色相与饱和度不变、只调亮度，就能得到稳定的深浅序列；保持色相与亮度、只调饱和度，就能得到灰度到鲜艳的过渡。

生成配色方案、做悬停态与禁用态的派生色时，HSL 的优势最明显：一套基准色加几个亮度偏移即可，不必手工试色。

四、一个常被忽略的事实：亮度不等于感知亮度

HSL 的亮度是数学定义，与人的感知亮度并不一致。同样亮度值为 50% 的黄色与蓝色，黄色看上去要亮得多。原因是人眼对绿色最敏感、对蓝色最不敏感，而 HSL 的亮度没有考虑通道权重。

实践影响有两个：一是「看起来一样亮」的配色不能靠亮度值相等来实现；二是判断文字与背景的对比度不能凭专业直觉，必须按对比度公式计算。

五、对比度与可读性

• 正文文字与背景的对比度建议达到 4.5:1 以上，大号文字（约 18.66 px 粗体或 24 px 常规以上）可放宽到 3:1；
• 纯黑配纯白对比度最高，但长时间阅读容易疲劳，深灰配浅灰往往更舒适——前提是仍满足对比度阈值；
• 不要仅靠颜色传达状态（例如只用红绿区分成功失败），色觉障碍用户会丢失信息，应同时提供图标或文字；
• 半透明叠加后的实际颜色取决于背景，不能只看前景色的对比度，需要在真实背景上验证。

六、常见错误清单

• 把 HSV 与 HSL 混用：取色器给出 HSV 值，直接当作 HSL 填进 CSS，颜色明显偏亮；
• 简写用错：#a1b2c3 被写成 #abc，颜色与设计稿不符；
• 透明度方向记反，把 FF 当成全透明；
• 在不同位置分别写死同一个颜色，改主题时漏改若干处；
• 把「亮度 50%」当作「中等亮度」用于文字颜色判断，实际对比度不达标。

七、工具与延伸

在 HEX、RGB、HSL、HSV 之间换算可用 颜色格式转换工具，它同时显示各格式的对应值，便于排查格式混用问题。单位与显示相关的问题另见《数据存储单位换算指南》。