一个前端配色的小困境
拿到需求『把主色调成更柔和一点』，在 RGB 里你会无从下手——改 R 会让色相漂移，改 G/B 又说不清会变得多亮。可如果把它换成 HSL，答案就变成一个数字：把饱和度 S 往下调 20%。这就是理解颜色模型的意义所在。
本篇文章把前端最常用的三套模型讲透，并落地到对比度与无障碍选色。
三种颜色模型怎么看
HEX = RGB 的 16 进制写法
#FF8800
├R=0xFF→255 ├G=0x88→136 └B=0x00→0
#RGB 还有 3 位简写：#f80 = #ff8800。它是 CSS 里最紧凑的写法，但『一眼看不出亮暗』。
RGB：三原色混合
rgb(255, 136, 0)
R=255 G=136 B=0
显示器底层用的就是它，数值直观但调色不直觉。
HSL：把感觉拆成三根轴
hsl(30, 100%, 50%)
H=30°(橘) S=100% L=50%
- H 色相 0–360°：红 0、黄 60、绿 120、青 180、蓝 240、品红 300；
- S 饱和度 0–100%：灰到鲜艳；
- L 明度 0–100%：黑到白。
换算关系速记
| 从 → 到 | 量纲 |
|---|---|
| HEX → RGB | 每 2 位 16 进制转十进制 |
| RGB → HSL | 归一化 → max/min 差定 S、平均定 L、极值位置定 H |
| HSL → RGB | 按 H 区间还原 |
多数取色工具（color-picker）都能让你在 HEX/RGB/HSL 间来回切，正好用于验证换算。
一个含『无障碍』的选色流程
配色不是只看好不好看，还要保证对比度达标。完整流程：
- 选主色：用取色器/调色板定下品牌主色；
- 配中性色：为主色生成明暗变体（同一色相、不同 L/S）；
- 算对比度：对『前景文字 vs 背景』逐对计算；
- 对照 WCAG：正文 ≥4.5(AA) / 常用 ≥3；更严的企业做到 AAA 7.0。
对比度公式
L = 0.2126·R̄ + 0.7152·Ġ + 0.0722·B̄ （R̅/G̅/B̅ 为线性化亮度）
对比度 = (L亮 + 0.05) / (L暗 + 0.05)
WCAG 阈值：
| 级别 | 普通文本 | 大字号/bold/UI 组件 |
|---|---|---|
| AA | ≥ 4.5 | ≥ 3 |
| AAA | ≥ 7 | ≥ 4.5 |
一个常见坑：同样的背景色，配不同明度的文字对比度差异巨大。拿同一主色的深/浅两种文字分别测，往往只有一种达标。
调色板生成器怎么用
很多调色板工具（color-palette-generator / color-picker）内部就是按下述逻辑出片的：
- 取一个基础色相 H0；
- 生成 60° 间隔的类比补色作为多组候选；
- 每组用「同一 H，不同 S/L」产出明暗梯度；
- 返回一组语义可用的 10–12 色，含主色、中性色、强调色。
这样既保证和谐（色相有内在联系），又保证有可用在文字上的高对比色。
自查清单
- [ ] 能在 HEX ↔ RGB ↔ HSL 之间口算/用工具换出同一颜色；
- [ ] 能说清 HSL 三根轴分别控制什么，并解释为什么调 L 比调 RGB 更可预测；
- [ ] 会算对比度，并知道 AA/AAA 对正文与大字号的两档阈值；
- [ ] 会用取色器确认色值、用调色板快速搭一组明暗变体。
把转换、取色、调色板与对比度串成一条流程，配色就不再是『碰运气』。