HEX、RGB 与 HSL

每种格式强调不同的心智模型。了解大致换算可避免 silent 的舍入错误。

HEX

#RRGGBB 用十六进制打包三个字节通道：

• #2563EB → 红 0x25 (37)、绿 0x63 (99)、蓝 0xEB (235)

简写 #RGB 重复半字节：#26E → #2266EE。

HEX 在设计交付与 Git diff 中紧凑；要做「加深 10%」时不如转换器方便。

RGB

rgb(37, 99, 235) 直接命名通道——与设计规范里 0–255 列表对账容易。

函数式写法也支持 alpha：

rgba(37, 99, 235, 0.85)

现代 CSS 更推荐空格分隔：rgb(37 99 235 / 0.85)。

HSL

hsl(色相, 饱和度, 明度) 贴近设计师语言：

• 色相 — 色轮角度（0–360）
• 饱和度 — 鲜艳 vs 灰
• 明度 — 亮 vs 暗

例：hsl(221, 83%, 53%) 对应 #2563EB。

HSL 便于生成 hover/active：保持色相，略降明度。

注意： HSL「明度」并非感知均匀。50% 明度的不同色相可能看起来不平衡——文字配色仍要用对比度工具。

舍入与漂移

HEX → HSL → HEX 往返可能不完全一致。设计令牌应定 一种规范存储格式（常为 HEX 或现代系统的 OKLCH），其余在构建时派生。

何时用哪种

格式	适用
HEX	令牌、Figma 导出、紧凑存储
RGB	Android/iOS 资源规格、图像管线
HSL	主题微调、程序化色板

要点

用转换器在不同视图间移动，但每个令牌只存 一个权威值。文档说明 alpha 是否与令牌合并，或使用独立透明度刻度。