HEX、RGB、HSL 颜色格式有什么区别？应该用哪个
HEX、RGB、HSL 可以表示同一个颜色，但适合的场景不一样。
选择哪种格式，取决于你是在复制设计色值、设置透明度，还是手动调整颜色深浅。
HEX
HEX 很紧凑：
color: #2563eb;适合：
- 从设计工具复制颜色
- 定义稳定的品牌色
- 保持 token 简短
- 兼容旧 CSS 或文档
HEX 也可以表示透明度，但很多团队在需要透明度时更喜欢 rgb() 写法。
RGB
RGB 直接对应红、绿、蓝三个通道：
color: rgb(37 99 235);
color: rgb(37 99 235 / 80%);需要数值通道或透明度时，RGB 更直观。
HSL
HSL 使用色相、饱和度、亮度：
color: hsl(221deg 83% 53%);如果你想手动把颜色调亮、调暗、降低饱和度，HSL 更好理解。
CSS 里应该用哪种？
做设计系统时，格式本身不是最重要的，统一才重要。建议先选一种作为 token 的默认格式，只有在具体场景需要时再转换。
| 需求 | 更适合的格式 | 原因 |
| -------------- | ------------ | ---------------------------------------- |
| 固定品牌色 | HEX | 简短，适合文档和设计稿对照。 |
| 透明度 | RGB | 现代 CSS 可以写 rgb(37 99 235 / 80%)。 |
| 手动调色 | HSL | 调整亮度、饱和度更直观。 |
| 程序化计算颜色 | RGB 或 HSL | 通道值更容易做转换。 |
如果你是在手动扩展色板，HSL 往往更好用，因为色相可以保持不变，只调整亮度或饱和度。如果只是从设计文件复制固定值，HEX 通常已经足够。
转换时容易踩的坑
同一个可见颜色可以有多种合法写法。#2563eb、rgb(37 99 235)、hsl(221deg 83% 53%) 可能表示同一个蓝色，但多次来回转换可能因为四舍五入产生微小差异。
不要在源文件里反复转换同一组颜色。更好的做法是保留一个 canonical token，再按需要生成 RGB、HSL 或带透明度的版本。
简短结论
固定色值用 HEX；需要通道数值或透明度时用 RGB；需要手动调整色相、饱和度、亮度时用 HSL。
参考资料：