色彩基础：色相、明度、饱和度与配色方案

上一篇把工具箱理顺了，这一篇开始碰审美里最硬的一块：配色。我最早做页面的方式是打开一个色卡网站，看着顺眼就吸色，东拼西凑攒成一套。结果每次都一样——单看每个颜色都不丑，塞进同一个页面就脏、乱、糊，文字压在背景上还看不清。后来我才想明白，问题不在"选的颜色不好看"，而在我没有用一套参数去控制颜色之间的关系。这篇要解决的就是这件事：把"我觉得这个蓝好看"换成"我要 H 220、S 72%、B 52% 的蓝，因为它和 H 220、B 92% 的浅蓝构成同一色相下的明度层级"。听着有点硬，但上手之后，配色会从玄学变成一道可复现的工序。

先用 HSB 思考，而不是 RGB

RGB 是给显示器看的语言：三个通道各 0–255，加色混合。它对机器友好，对人脑极不友好——#3B82F6 和 #2563EB 差在哪？我只能说"一个浅一个深"，说不出所以然。

设计软件里的拾色器默认给的是另一套：HSB（色相 Hue、饱和度 Saturation、明度 Brightness），也叫 HSV。三个参数分别对应人判断颜色的三个直觉：

参数	取值范围	直觉含义	调它会发生什么
色相 H	0–360°	这是"什么颜色"	沿色环转圈：0 红、60 黄、120 绿、180 青、240 蓝、300 品红
饱和度 S	0–100%	颜色"有多艳"	降到 0 就是灰，升高就越来越"冲"
明度 B	0–100%	颜色"有多亮"	降到 0 是黑，升到 100 接近白

在 Figma 里选中任何色块，右侧面板的填充色点开，右上角能切换 Hex / RGB / HSB / HSL。建议把默认切成 HSB：要加深品牌色时只动 B，要让它更沉一点就降 S，色相锁死不动——这样整套颜色永远在同一族里，不会出现"深蓝配紫灰"这种说不清的脏。

写 CSS 时同理，别到处搬十六进制：

:root {
  --brand-h: 220;
  --brand-100: hsl(var(--brand-h) 80% 94%);
  --brand-500: hsl(var(--brand-h) 72% 52%);
  --brand-700: hsl(var(--brand-h) 72% 38%);
  --ink-900:  hsl(var(--brand-h) 12% 12%);
}

改一个 --brand-h，整站换色。这里用的是 hsl() 的空格写法（现代浏览器都支持），老写法 hsl(220, 72%, 52%) 也照样能用。

再补一个正在普及的选项：oklch()。它的 L 通道是"感知均匀"的明度，同样降 20% 明度，人眼感觉就是均匀暗一档，而 HSL 里蓝色降明度会先发紫再发黑。Chrome 111+、Safari 15.4+、Firefox 113+ 已支持，做新项目可以直接用：

--brand-500: oklch(58% 0.16 258);
--brand-700: oklch(44% 0.14 258); /* 只降 L，色相不变味 */

明度定层级，饱和度定情绪

我给自己定过一条规矩，至今最有效：先只用黑白灰做一版，层级立得住，再往里加颜色。 因为网页 90% 的可读性问题本质是明度问题，不是色相问题。

一套够用的中性色阶，明度大致这么分：

角色	建议明度	示例值	用在哪
页面底色	100%	#FFFFFF	大面积背景
卡片/分区	97–98%	#F7F8FA	卡片、表格斑马纹
分隔线/描边	90–92%	#E5E7EB	1px 边框、分割线
次要文字	45–50%	#6B7280	说明、时间戳、占位符
正文	12–18%	#1F2328	段落文字

两个新手最常踩的点，都在这张表里：

第一，正文别用纯黑 #000。 纯黑压在纯白上是 21:1 的极限对比，短标题还行，长文读十分钟眼睛会累，字看起来像在纸上"跳"。用 #1A1A1A 到 #262626，对比度仍在 15:1 以上，观感稳得多。

第二，灰色别用纯灰。 S=0 的灰放在暖色背景里会发青，放在冷色背景里会发黄。给灰一点点同族色相，比如 hsl(220 8% 96%)，它就会"融进去"而不是"贴上去"。这也是为什么很多设计系统里的 neutral 其实带一点蓝。

饱和度决定的是情绪和注意力分配：

• 大面积背景，S 压到 12% 以下。超过这个数，屏幕一亮就像警示牌。
• 主色（按钮、链接），S 落在 60–80%。太低了没记忆点，太高了显廉价。
• 强调色（价格、徽标、错误提示），才允许冲到 85% 以上，而且面积要小。

同一个色相，S 和 B 各降一点，就是 hover；B 降 8% 左右最自然，直接叠一层黑会让颜色发闷。

五种配色结构，选一种就够

配色不是从色环上随机点三个点，而是有固定结构。常用的五类：

结构	色相角差	给人的感觉	主要风险	适合
单色 Monochromatic	0°（同色相不同明度）	克制、专业、稳	容易闷，缺焦点	工具类、文档、后台
邻近色 Analogous	±30° 以内	柔和、连贯	对比弱，找不到重点	品牌页、氛围型落地页
互补色 Complementary	180°	强对比、有冲击	面积一比一就刺眼	促销、强调 CTA
分裂互补 Split-complementary	150° / 210°	有对比但不生硬	三个色都想用，失焦	大多数商业站点
三角 Triadic	120°	活泼、有活力	最难平衡，必须一主两辅	儿童、文创、活动页

如果你只想记一条，记分裂互补：主色取一个，另外两个取它对面的两侧。它比互补色好控制，又不像邻近色那样平。

具体到页面上，配比用 60-30-10：60% 是背景（通常就是白或浅灰），30% 是次要色块（导航、页脚、卡片），10% 是强调色（按钮、链接、图标）。网页里的 10% 基本就等于"用户该点的地方"，把这个比例守住，页面自然有主次。

在 Coolors 里验证结构很快：打开 coolors.co，按空格生成一组五色，看到喜欢的就点色块上的锁固定住，再按空格让其余的重roll，直到锁住的几块和生成的能凑成上面的某一种结构。右侧能看每块的 HEX / RGB / HSB 值，也能直接导出 CSS 变量。Adobe Color（color.adobe.com）更适合反向操作：色轮上选"互补""三角"这些规则，它会自动帮你把角度卡准；还有"从图像提取主题"，把一张照片丢进去提五色，做品牌延展时很好用。

有一点要提醒：这两个工具生成的都是"候选"，不是"答案"。 它们不知道你的文字要多长、按钮要多大。生成完必须回到 Figma 里，把真实文字压上去看对比度。

在 Figma 里搭一套能用的色板

生成器给的是五个孤立颜色，设计稿要的是一条能扩展的色阶。我的做法固定三步：

第一步，定主色相。 只在 HSB 里选 H，S 和 B 先按 72% / 52% 起。这个区间的颜色压白字基本都能过 4.5:1，不用反复试。

第二步，拉 10 档色阶。 在 Figma 里复制色块（Option/Alt 拖拽），只改 B，H 和 S 微调，得到 50 到 900。明度我一般按这个节奏走：

50  → B 96%     100 → B 92%     200 → B 84%     300 → B 74%
400 → B 63%     500 → B 52%（主色）              600 → B 44%
700 → B 36%     800 → B 28%     900 → B 20%

低明度那几档记得把 S 稍微降一点（比如 72% → 64%），否则深色会"发荧光"。

第三步，存成变量或样式。 在 Figma 右侧面板点 + → Color styles，或者用 Local variables → Color（新版本推荐这个，能直接导出成 JSON 给开发）。命名统一成 brand/500、neutral/100 这种「组/档位」格式，别用"深蓝2""浅灰最终版"。

存完做两件事验收：

1. 在 Figma 里装 Contrast 或 Stark 插件，选中文字图层和它下面的背景，插件会直接给对比度比值。正文要 ≥ 4.5:1，18.66px 以上加粗或 24px 以上的大字可以放宽到 3:1（这是 WCAG AA 的线）。
2. 把整个画板切到灰度看（Figma 里加一个 Saturation = 0 的图层样式盖上去，或者截图后在预览里关掉色彩），层级如果还清楚，说明结构成立；如果一灰度就全糊，说明你靠颜色硬撑层级，得回去调明度。

落地到代码，以及六个常见坑

色板定完，写进 CSS 就是一层映射。别在组件里写十六进制，全部走变量，深色模式才换得动：

:root {
  --brand-500: hsl(220 72% 52%);
  --brand-600: hsl(220 72% 44%);
  --neutral-50:  hsl(220 20% 98%);
  --neutral-200: hsl(220 14% 91%);
  --neutral-500: hsl(220 9% 46%);
  --neutral-900: hsl(220 14% 13%);

  --bg: var(--neutral-50);
  --text: var(--neutral-900);
  --text-muted: var(--neutral-500);
  --border: var(--neutral-200);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(220 12% 8%);
    --text: hsl(220 10% 90%);
    --text-muted: hsl(220 8% 62%);
    --border: hsl(220 8% 22%);
  }
}

注意深色模式不是把黑白对调：背景用 8% 而不是 0%，文字用 90% 而不是 100%，两边都留一点余量，长时间看才不刺眼。

下面这张表是我实际踩过的，按"现象 → 原因 → 怎么查"整理：

现象	真正的原因	排查与修法
灰字看不清	对比度不足 4.5:1（#999 在白底只有 2.85:1）	用 Figma 的 Contrast 插件，或 DevTools 里选中元素看颜色块旁的比值；灰字最深可用到 #767676（4.54:1）
品牌蓝做正文很累	高饱和色做大段文字	正文一律用 neutral-800/900，品牌色只留给链接和按钮
页面整体"脏"	混用了不同色相的灰	全套中性色锁同一个 H，只动 S 和 B
按钮 hover 变闷	直接叠了黑色蒙层	改成 B 降 6–8%、S 升 2%，保持色相
别人电脑上看偏色	图片没锁 sRGB，或用了 Display P3	导出时选 sRGB；Figma 导出面板确认色彩配置
一屏三个强调色	每个模块都想要"重点"	全页只保留一个强调色，其余降为 neutral

最后一条我认为最重要：配色的问题，八成不是"颜色选错了"，而是"颜色用多了"。 一套页面里，色相数量控制在三个以内（主色 + 中性 + 一个强调），剩下的全部靠明度解决。这条守住，哪怕色板很朴素，页面也是干净的。

🛠 本篇要用到的软件

• Figma：本篇主力。用来在拾色器里读 HSB 值、拉 10 档色阶、把颜色存成 Color styles 或 Variables、装 Contrast / Stark 插件验对比度。支持 macOS、Windows，也有浏览器版（Chrome / Edge / Safari），iPad 有独立 App。免费版（Starter）个人学习够用，团队协作的文件数量和版本历史有额度限制，付费按编辑者席位订阅，具体价格以官网为准。免费替代：Penpot（开源，可自建，浏览器直接用，支持颜色令牌）、即时设计（国内产品，个人免费额度较宽）。
• Coolors：用来快速生成和验证配色结构——按空格 roll 色板、点锁固定、导出 CSS 变量。网页版免费可用，免费版对保存色板和去广告有限制，Pro 为订阅制，价格以官网为准；也有 iOS App。免费替代：Adobe Color、Color Hunt（现成配色合集，只能挑不能调）、Huevy 之类的小工具。
• Adobe Color（color.adobe.com）：用色轮按互补 / 三角 / 分裂互补的规则精确取角，或用"从图像提取主题"把照片变成五色色板。网页版免费，需注册 Adobe ID，不强制订阅 Creative Cloud。免费替代：Coolors、Paletton（老牌在线色轮，规则齐全，免费）。
• Contrast / Stark（Figma 插件，补充）：直接在画板上量文字与背景的对比度比值，判断是否过 WCAG AA 的 4.5:1。两个都有免费档，Stark 的部分功能需付费。免费替代：WebAIM Contrast Checker（网页版，输入两个色值即可出结果）。
• Chrome DevTools（补充，浏览器自带）：上线后复核真实渲染的对比度——选中文字元素，Styles 面板的颜色块旁会显示对比度数值和 AA/AAA 判定。内置于 Chrome，全平台免费。免费替代：Firefox DevTools、Safari Web Inspector。

下一篇预告

下一篇：中文字体与网页排版：新手最容易踩的坑