接到一张海报，最省事的做法是打开配色网站，看中一排色块，拷下四五个色值。问题不在于网站推荐得好不好，而在于你拿到的是几个颜色，不是一套分工——哪个铺底、哪个写字、哪个只出现一次，没人告诉你。
这篇把这件事拆成可操作的步骤：先分角色，再用同一个色相定出深浅，最后用读数确认字压上去还读得清。做完你手上就是一套三个颜色的配色。
开始前准备三样东西：一张正在做的物料（没有就开个空白画布，随便放几行字）；软件自带的拾色器，要能看到 H、S、B（或 L）三个滑块的那一版；一个在线对比度检查器，搜 contrast checker 就有，只用来读数字。
第一步：先分角色，别先挑颜色
一张物料上，颜色按活儿分工，只有三个位置：
底色——占面积最大，所有字都压在它上面。正文色——承担全部要读的字，包括标题。强调色——只指向一个东西，价格、按钮，或者标题里的一个词。
先对着你手上的图回答三个问题：面积最大的那块颜色是哪个？绝大部分字是什么颜色？唯一一处跳出来的是什么颜色？第三个问题答不出来很常见——说明这张图上只有两个颜色在干活，层级全靠字号撑，这就是“说不出哪里平”的典型来源。
用量可以借一个经验说法：60-30-10，底色约占六成，次级色三成，强调色一成2。它是经验，不是定律；对新手真正有用的是后半句——强调色必须少。占到三成，它就是第二个底色，不再是强调。
第二步：底色和正文色用同一个色相，只改明度
拾色器三个滑块各管一件事：
- H（色相）：0 到 360 度的圆环，0 度是红、120 度是绿、240 度是蓝，决定“这是什么颜色”。
- S（饱和度）：0 是纯灰，100 是最艳。
- B 或 L（明度）：决定多深多浅。HSL 里 50% 是最纯的颜色，100% 是白，0% 是黑3。
三个里只有明度管可读性。两个颜色能不能被眼睛分开、字压上去能不能看清，几乎只取决于明度差；色相差管的是另一件事——这东西看起来算不算“一家”。所以定色的顺序是：先定明度差保证能读，再定色相决定气质。
具体两步：
- 底色选浅的：明度拉高、饱和度压低。比如 H=40、S=20%、L=95%，得到一个暖白。
- 正文色取 同一个 H，明度压到 15–20%，饱和度也压回 20% 左右，得到同族的暖黑。
这样两色天然同源。前面讲重复时提过，颜色是“该一套到底”的四类元素之一；所谓固定一套颜色，固定就是这一对。
用不用纯黑纯白？纯黑压纯白是 21:1，谁也读不错，但整张图会显得冷硬。赶时间就先用黑白，别在这上面耗。
第三步：读一次数，再谈好不好看
对比度比值是这么算的：
、 是两个颜色中较亮和较暗那个的相对亮度，都在 0 到 1 之间，所以比值落在 1:1 到 21:1。
WCAG 2.2（AA 级）给出的门槛是：正文和小字至少 4.5:1；大字——18pt（约 24px）以上，或 14pt（约 18.5px）以上的粗体——可以降到 3:1；图标、色块这类图形对象 3:1；计算不四舍五入，4.49:1 不算过线1。
拿刚才那套配色和两个常见反例对一下：
| 组合 | 对比度 | 能干什么 |
|---|---|---|
正文 #2B2622 压底色 #F4F1EC | 约 13:1 | 小字正文都够 |
中灰 #999999 压白底 | 约 2.85:1 | 小字不合格 |
砖橙 #C8511B 压 #F4F1EC | 约 4:1 | 大标题、色块可以，小字不合格 |
读法只有一句：灰字不是不能浅，而是浅到某个点就掉线。 而你的眼睛判断不了那个点——亮屏、暗屏、手机、投影，看到的都不一样。这件事交给数字，一目了然。
第四步：强调色只要一个，它自己也要过线
选强调色有两条要求：
- 跟底色、正文不同族。 同一个色相深一点浅一点不算强调，那只是深浅。
- 差别要够大。 落在正文色的“隔壁”，眼睛会读成没配好——和字体搭配里那个中间地带是同一种失误。
用法上限是一处。价格、报名按钮，或者标题里唯一那个词。两处以上就不再存在“你最想让人先看的地方”，这跟对比那篇讲的是同一个毛病：到处都在喊，等于没人喊。
如果强调色上还要写字，那组“字色 + 强调底色”也得过 4.5:1。白色字压在 #C8511B 上大约 4.5:1，是刚好压线的位置——这种“刚好”最容易在印刷或换屏时翻车，宁可把橙色再压深一档。
第五步：上版之后的两项自检
眯眼。 把图缩小，或者眯起眼看。应该只剩一处跳出来，就是强调色；如果底色和正文混成一片，说明明度差不够，回去动明度。
转灰阶。 把图转成黑白。层级如果还在，说明这套颜色本身站得住；一转灰就全糊，说明你是靠色相在撑层级，换个黑白打印的场合就没了。
收尾
顺序就三步：分角色 → 同色相定深浅 → 用读数验一次。
三个颜色足够用。如果还需要一个位置放辅助信息（日期、地址、单位），别新增色相，用正文色的浅一版——但同样要过 4.5:1，这是整套配色里最容易掉线的地方。
最后一句检查，比记规则管用：把图给没看过的人看两秒，问他图上最显眼的是哪个词。答对了，这三个颜色就分好工了。