HEX、RGB、HSL 颜色表示法怎么选
一句话结论
设计交付和静态配色用 HEX，需要程序控制透明度用 RGB(A)，需要生成配色变体（调深浅、做 hover 态）用 HSL。三者可以精确互转，选哪个只看"你要怎么操作这个颜色"。
核心区别对照
| 表达维度 | HEX | RGB | HSL |
|---|---|---|---|
| 写法示例 | #D9480F | rgb(217, 72, 15) | hsl(17, 87%, 45%) |
| 透明度 | 8 位写法支持（#D9480F80） | rgba() 支持 | hsla() 支持 |
| 人能否直观理解 | 不能，看不出是什么颜色 | 较难 | 能，色相直接对应"什么颜色" |
| 调亮/调暗 | 要整体重算 | 要整体重算 | 只改 L 一个值 |
| 典型用途 | 设计稿、CSS 静态值、品牌规范 | Canvas、图片处理、动态改色 | 主题生成、配色算法、状态色 |
HEX
把 RGB 三个通道压成 6 位十六进制，最紧凑、最好复制粘贴，是设计稿和 CSS 里最常见的写法。缺点是完全不可读——不借助工具你无法从 #D9480F 看出这是橙色。8 位写法（末尾加两位）可表达透明度。
RGB / HSL
RGB 直接对应屏幕的三原色通道，程序处理图片、Canvas 绘制时最直接，rgba() 加透明度也很自然。HSL 则是按人的直觉组织：H 是色相（红橙黄绿青蓝紫），S 是鲜艳程度，L 是明暗。想给主色做一个更亮的 hover 态，HSL 只需要把 L 从 45% 改到 55%，RGB 和 HEX 都要整体重算。
怎么选
- 写死在 CSS 里、设计交付 → HEX
- 程序计算、图片处理、要改透明度 → RGB(A)
- 生成主题、做深浅变体、配色算法 → HSL
相关工具
常见问题
三者能无损互转吗
可以，三者描述的是同一个 RGB 颜色空间，本页工具即可实时互转，转换后视觉上完全一致。
为什么设计师给的色值是 HEX 而要我改成 HSL
因为产品里经常需要 hover 态、禁用态、深色模式变体。用 HSL 只需调整 L 分量，改起来最可控。
8 位 HEX 后面的两位是什么
透明通道。00 是全透明，FF 是完全不透明，例如 #D9480F80 约为 50% 不透明。