配色工具怎么选：色阶、协调色与对比度检查
做一套页面配色要用到哪些工具？本文按「定主色—生成色阶—搭协调色—检查可读性」的流程，串联六类配色工具。
核心要点
- 配色的省力路径是：定主色 → 生成色阶 → 搭配协调色 → 检查对比度，全程用工具生成以便复用到代码。
- WCAG 要求正文对比度至少 4.5:1，大字号至少 3:1；浅灰字配白底是最常见的失败组合。
- 调整明暗优先在 HSL 空间做，改 L 通道得到的深浅变化比在 RGB 上乘系数更自然。
做页面配色最省力的路径不是逐个挑颜色，而是：先定一个主色，由它派生出整套色阶，再配出协调色，最后用对比度检查收口。全程用工具生成，能保证色值可控、可复用到代码里。
标准流程
| 环节 | 工具 | 产出 |
|---|---|---|
| 确定主色 | 颜色格式转换 | HEX/RGB/HSL/CMYK 全量值 |
| 派生色阶 | 生成色阶 | 50–900 九级同色阶 |
| 明暗变体 | 明暗调整 | hover、disabled 等状态色 |
| 搭配协调色 | 配色方案生成 | 整体的和谐配色组合 |
| 补充关系色 | 类似色、三角色、互补色 | 强调色与辅助色 |
| 检查可读性 | 对比度 | 是否达到 AA/AAA |
对比度是最容易被跳过的一步
WCAG 要求：正文至少 4.5:1，大字（≥18pt 或 ≥14pt 粗体）至少 3:1，增强级 AAA 分别为 7:1 与 4.5:1。浅灰字配白底、浅色按钮配浅背景是最常见的踩坑处，定稿前请务必用工具核一遍。
两个实用技巧
- 调整明暗优先在 HSL 空间做：改 L 通道得到的深浅变化比在 RGB 上简单乘系数更自然。
- 同色相跨度过大的两种颜色直接混合，中间色容易发灰；需要渐变时先确认过渡是否干净。
写 CSS 时可以直接用渐变停靠点生成代码，边框圆角与留白则可参考圆角推荐、间距阶梯生成。
常见问题
为什么要生成整套色阶，而不是现用现挑？
现用现挑容易出现相近却不一致的色值，导致同一按钮在不同页面颜色略有差别。由单一主色派生的九级色阶能保证一致性，也更容易写进设计变量。
对比度达到什么标准算合格？
WCAG 2.1 要求正文至少 4.5:1，大字号至少 3:1；增强级 AAA 分别要求 7:1 与 4.5:1。图标与图形界面组件通常参照 3:1 的非文本对比要求。
HEX、RGB、HSL 该用哪个？
写代码通常用 HEX 或 RGB；需要按色相、饱和度、明度调整时用 HSL 更直观。多数转换工具可以一次性给出全部格式，不必手工换算。
渐变中间发灰怎么办？
两种色相跨度较大的颜色直接线性混合时，中间容易出现灰浊感。可改用 HSL 空间插值，或在中间插入一个过渡色停靠点。
最后更新：2026-09-19