外观
配色方案
配色不是把喜欢的颜色堆在一起，而是按色轮上的位置关系来选。所有颜色排成一圈（色轮），专业设计师选色不是"随便挑几个顺眼的"，而是在色轮上按固定规律取点——取点位置不同，配色的感觉就不同。
配色不是堆颜色，按色轮取点
回到 01 那只微信绿（色相 149°），它就在色轮上。想找它的"对立色"，就在圆上走 180° 取对面的点。
记得 01 的色相环吗？把色相（红橙黄绿蓝紫）排成一圈，就是色轮。配色的核心直觉只有一句话：两个颜色在圆上隔多远，就决定了它们的关系——同一个位置是"同族"，挨得近是"和谐"，隔得远（正对面）是"冲突/强烈"。所以配色的秘密是：想让它们多扎眼，就在圆上放多远。距离 = 关系。
距离 = 关系：圆上离得近的颜色和谐，离得远的扎眼。
四种配色方案：取点的四种规律
想安全不出错 → 单色；想和谐统一 → 类比；想强烈对比 → 互补；想有对比但更柔和 → 分裂互补。
有了"距离 = 关系"，选色就不再靠感觉。专业配色就是把四种取点规律之一：只取一个位置、取相邻的、取正对面的、取对面加两侧。四种方案各有明确的感觉——从最克制的单色到最扎眼的互补。
四种配色方案：
| 方案 | 取点方式 | 感觉 | 一句话 |
|---|---|---|---|
| 单色 Monochromatic | 只用一种色相，换明度/饱和度 | 最克制、最安全 | 一种色相玩到底 |
| 类比 Analogous | 色轮上相邻的颜色 | 和谐、统一 | 色轮上挨着的颜色 |
| 互补 Complementary | 色轮上相对的颜色 | 对比强烈、醒目 | 正对面的颜色，最扎眼 |
| 分裂互补 Split-Complementary | 一个色 + 对面色的两边 | 有对比但柔和 | 对面加两侧，更柔和 |
克制原则：颜色多 ≠ 好看
微信就是一个典型：整个 App 几乎只剩一个品牌绿 + 黑白灰。拆解「我」页配色比例：
| 角色 | 颜色 | 用在哪 |
|---|---|---|
| 背景 | 白 | 整个页面底色 |
| 文字-主 | 黑 | 标题、主要文字 |
| 文字-次 | 灰 | 次要说明、时间 |
| 列表底色 | 浅灰 | 分组卡片区域 |
| 品牌主色（唯一彩色） | 绿 #07C160 | 少数强调点（如"支付"入口图标、按钮） |
真正的 APP 配色，通常主体用 1 个主色 + 中性色（黑白灰），彩色点到为止。"颜色越多越好看"是大错特错——花花绿绿 = 没有重点 = 不够高级。专业 APP 的"高级感"恰恰来自克制：用很少的颜色，让那 1 个主色突出。
一张页面只有 1 个彩色，其余全是黑白灰——颜色越少，那唯一的绿越显眼、越有记忆点。
四种方案各自用在哪
四种方案不是任意选，而是各司其职、各有边界。单色适合数据可视化，类比适合大面积背景，互补适合按钮强调，分裂互补适合"想要对比但不那么冲"。记住一个公式：高级感 ≈ 颜色少 + 层次够（明度/饱和拉开）+ 主色突出。
四种方案适用与边界：
| 方案 | 适合用在哪 | 边界/坑 |
|---|---|---|
| 单色 | 数据可视化、极简风、品牌色系统 | 只有一种色相，容易单调，要靠明度/饱和拉开层次 |
| 类比 | 大面积的页面背景、柔和的产品界面 | 全是近色，对比度低，文字/重点容易看不清 |
| 互补 | 按钮强调、CTA、促销、"打开/关闭"开关 | 对比最强，用多了刺眼，通常只用于少量高亮 |
| 分裂互补 | 想要对比但不那么冲的界面 | 比互补柔和，仍是偏"冲突"的配色 |
微信配色完整比例：中性色（白/黑/灰）约 90%，主色品牌绿 #07C160 约 5%~10%，其他彩色趋近 0（功能态如红=错误、黄=警告才出现）。
深度
为什么克制更"高级"？ 高级感 ≈ 秩序感。颜色一多，人的眼睛不知道往哪看，显得"乱"；颜色少，重点一目了然，显得"有设计"。克制带来三条实实在在的好处：
- 主色突出：全屏只有一绿，那绿就是记忆点（微信绿）。
- 可读性：黑白灰负责文字对比，彩色不抢文字（衔接 01 的对比与可读性）。
- 成本低：颜色越少，换主题、做深色模式、维护 Design Token 越简单（衔接 12 样式 / 23 Token）。
完整比例拆解：#FFFFFF / #000000 / 灰阶约占 90% 面积，撑起背景、文字、分割的骨架；品牌绿 #07C160 约占 5%~10%，做点睛、强调、品牌记忆。微信把 90% 让给中性色（保证可读、不累眼），只留 5%~10% 给品牌绿做"点睛"——彩色点得越少越亮。
编程一眼：一套像样的配色，可能就是 4~5 个色值。微信这套克制配色用十六进制写出来就几条：
css
/* 微信克制配色：1 主色 + 黑白灰中性色 */
--wechat-green: #07C160; /* 品牌主色：唯一彩色 */
--neutral-white: #FFFFFF; /* 背景 */
--neutral-black: #000000; /* 主文字 */
--neutral-gray: #8A8A8A; /* 次要文字/分割线 */颜色越克制，这套 Token 越干净好维护。
误区
| # | 误解 | 正解 |
|---|---|---|
| 1 | 颜色越多越好看 | 致命误区。颜色多 = 乱 = 不高级；真正的 APP 只用 1 主色 + 中性色，彩色点到为止 |
| 2 | 配色靠感觉，没有规律 | 配色有色轮逻辑：距离决定关系，四种方案就是四种取点规律 |
| 3 | 互补色用得多就醒目 | 互补对比最强，但用多了刺眼；只用于少量高亮（按钮、CTA） |
| 4 | 克制 = 单调没意思 | 克制 ≠ 单调。用明度/饱和拉开层次，一个主色也能丰富 |
| 5 | 多几个彩色更专业 | 专业恰恰相反：颜色越少越有设计感，主色越掐得准越高级 |
练习
即时题 Q1：单色配色只用一种什么？换的是什么？（答案：只用一种色相，换的是明度和饱和度，即同一色相的不同深浅/浓淡。）
Q2：想做一个"对比强烈、特别醒目"的按钮，应该用哪种配色方案？（答案：互补 Complementary——在色轮上取正对面的颜色，对比最强。）
Q3：微信整体有没有第二彩色？它靠什么显得高级？（答案：几乎没有第二彩色。它靠极致克制——约 90% 黑白灰 + 5%~10% 品牌绿，颜色少、重点突出。）
Q4（误区题）：把红、黄、绿、蓝、紫全放一个页面，是不是"颜色丰富好看"？（答案：不是，是"花里胡哨不高级"。颜色多 = 没重点 = 乱。专业做法是克制：1 主色 + 中性色。）
模块题 P 先生想让微信首页的"支付"按钮更醒目，但又不希望整体配色变啰嗦。他应该怎么做？为什么不能直接在按钮上堆三个颜色？
参考思路：保持克制——按钮仍用品牌绿 #07C160（或同族的深/浅绿），靠明度/饱和拉开层次来突出，而不是加新彩色。若一定要用对比，可用互补（绿的对面色偏红/品红）做非常小的强调，但要克制——互补对比最强，一多就刺眼，通常只用于按钮这类高亮点。不能堆三个颜色：因为"颜色越多越好看"是误区，三个彩色同时出现 = 没有主次 = 乱、不高级；真正的高级感来自 1 主色 + 中性色，彩色点到为止。
迷你案例 用微信绿，亲手体验"克制配色"从 1 个主色出发：
- 在 Penpot 新建画板，画五个矩形排一排。
- 第一个填品牌绿
#07C160（主色）。 - 第二、三、四个分别填
#FFFFFF（白）、#000000（黑）、#8A8A8A（灰）——这就是微信那套中性色。 - 第五个：试试在色轮上找绿的互补色（红/品红方向），看到对比有多冲。
- 观察：前四个（1 绿 + 3 中性）看着稳、高级；加上第五个互补色反而"破功"了。
- 结论：微信的克制 = 只留那 1 个绿做彩色，其余黑白灰。现在你亲手验证了为什么它高级。
素材
- 👉 打开交互演示：四种配色方案 — 在色轮选主色，单色/类比/互补/分裂互补并排对比，含"微信绿
#07C160"一键对照。 - 色轮工具：在线色轮（Adobe Color、Coolors）可交互切换四种配色方案，实时看取点规律。
- Adobe Color（配色方案生成器）：直接选"单色/类比/互补/分裂互补"，看色轮自动取点。
- 微信绿
#07C160：用 01 学的 HSL/Hex 输入，验证它就是这套克制配色的唯一主色。 - 后续衔接：本知识点（四种配色方案）→ 03 色彩对比度（怎么保证文字看清）→ 12 样式系统（存成可复用色样式）→ 23 Design Tokens（沉淀为 Token）。配色的下一步，是把它变成一套干净的中性色 + 主色。