CSS 与设计令牌：HEX、RGB、HSL 怎么选

同一品牌蓝可以是 #2563EB、rgb(37, 99, 235)、hsl(221, 83%, 53%)。三者都可正确——也都会在舍入、透明度合成或 Figma 微调后 彼此漂移。

本文帮助前端与设计系统工程师选定 规范存储格式，并在不破坏对比度检查的前提下派生其他写法。

各格式擅长什么

格式	优势	劣势
HEX	令牌、diff、交付紧凑	难以心算变亮/变暗
RGB	与设计规范 0–255 一致	冗长；色相关系不直观
HSL	主题微调（同色相、新明度）	非感知均匀；对比度易踩坑

三者无「更准确」之分——除非进入 OKLCH 等更广色域，否则都是同一 sRGB 三元组的不同视图。

每个令牌只选一个真相源

健康的 design system 为语义令牌（如 --color-primary）存 一个权威值，再生成各平台输出：

:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-on-primary: #ffffff;
}

组件引用 --color-on-primary，不要散落 hex。营销更新色板时，只改令牌一次，再重建文档用的 HSL/RGB。

用 颜色转换器 验证换算与 文字配对的 WCAG——不要只看白底上的色块。

透明度合成会改变对比度

白卡片上的 rgba(37, 99, 235, 0.12) 与实心蓝底上的 #2563EB 文字不是同一配对。WCAG 必须用用户 实际看到 的合成前景/背景。

照片上的半透明叠层比纯色底更易失败——测最差背景，而非 Figma 默认画板。

HSL 做程序化色板，hex 做交付

常见流水线：

1. 设计在 Figma 出稿（常为 hex 或 RGB）
2. 工程在令牌中存 hex
3. 构建脚本为主题生成器或图表 API 输出 HSL
4. 邮件/PDF 模板用 内联 hex（hsl() 支持不一致）

若用 HSL 明度减 10% 做 hover，应对新配对 重新跑对比度——「加深 10%」不保证 AA。

舍入与往返漂移

HEX → HSL → HEX 可能字节不完全一致。影响：

• CSS bundle 的 CI 快照对比
• Android XML 颜色与 Web 令牌同步

在令牌仓库 README 写清舍入规则，勿让各端各自 round。

快速决策

• 要紧凑 diff、工具通用？ → 规范 hex
• 接 canvas/WebGL/图表？ → 构建时派生 RGB
• 同一色相做亮/暗主题？ → 用 HSL 或 OKLCH 调，每步验对比度
• 发 HTML 邮件？ → 模板仅 hex

延伸阅读

WCAG 比值、CSS Color Level 4 语法与取色流程见 开发者色彩课程。

小结

HEX、RGB、HSL 是可互换视图，不是宗派之争。 定一种规范形式、有意地派生其余写法，并在真实背景上测对比度——这样 #2563EB 在生产里才会保持一个蓝，而不是五个。