核心答案：HEX、RGB、HSL 是 CSS 三种等价的颜色写法——#10b981 = rgb(16,185,129) = hsl(160,84%,39%)。透明度在 HEX 加两位（#10b98180=50%）、RGB 用 rgba 第 4 参、HSL 用 hsla。
CSS 颜色三格式对照
| 格式 | 写法示例 | 适合场景 |
|---|---|---|
| HEX | #10b981 | 最常用，设计稿标注 |
| RGB | rgb(16 185 129) | JS 操作、canvas |
| HSL | hsl(160 84% 39%) | 调色最直观（改亮度/饱和度） |
HSL 调色技巧：固定色相 H，只改 S（鲜艳度）和 L（明暗）即可生成同色系梯度——L 从 90% 到 30% 递减得到 10 级色阶，这是 Tailwind 色板的生成逻辑。
透明度写法
| 需求 | 写法 |
|---|---|
| HEX 50% 透明 | #10b98180（两位十六进制，FF=不透明，00=全透明） |
| RGB 半透明 | rgba(16,185,129,0.5) |
| HSL 半透明 | hsla(160,84%,39%,0.5) |
| 全局透明 | opacity:0.5（会影响子元素文字！） |
无障碍对比度（WCAG 2.1）
| 级别 | 正文文字 | 大标题（≥18pt） |
|---|---|---|
| AA（最低合规） | 4.5:1 | 3:1 |
| AAA（增强） | 7:1 | 4.5:1 |
白底（#fff）上：#777 恰好 4.5:1，#999 只有 2.8:1 不合规。浅色文字是最容易踩的坑。
常见误区
- opacity 与 rgba 混用：opacity 让整个元素（含文字）透明，只要背景半透明请用 rgba/hsla。
- HEX 透明度位置记错：透明度加在最后两位（#RRGGBBAA），不是前面。
- 深色模式不反转：prefers-color-scheme 下用 CSS 变量切换色值，别只写一套浅色。
- 颜色仅作唯一信息：错误状态不能只靠红色，需配合图标/文字（8% 男性红绿色盲）。
常用颜色三制式对照表
| 颜色 | HEX | RGB | HSL |
|---|---|---|---|
| 纯红 | #FF0000 | 255,0,0 | 0°,100%,50% |
| 纯绿 | #00FF00 | 0,255,0 | 120°,100%,50% |
| 纯蓝 | #0000FF | 0,0,255 | 240°,100%,50% |
| 黄 | #FFFF00 | 255,255,0 | 60°,100%,50% |
| 品红 | #FF00FF | 255,0,255 | 300°,100%,50% |
| 青 | #00FFFF | 0,255,255 | 180°,100%,50% |
| 黑 | #000000 | 0,0,0 | 0°,0%,0% |
| 白 | #FFFFFF | 255,255,255 | 0°,0%,100% |
| 灰 | #808080 | 128,128,128 | 0°,0%,50% |
实例：HEX 与 RGB 互算
HEX→RGB：#3A7BD5 → 3A=58、7B=123、D5=213 → rgb(58,123,213)。
RGB→HEX：rgb(255,136,0) → 255=FF、136=88、0=00 → #FF8800。
HEX 速读：每两位一个通道（RRGGBB），值越大该通道越亮——#20D020 明显偏绿。
用[颜色转换工具](/c/dev/color-convert)实时互转 HEX/RGB/HSL 并预览。