做设计、做 PPT、做网站、发朋友圈海报——每个人都会遇到同一个问题：颜色怎么配？
选配色这件事，看起来是审美问题，其实背后是科学问题。学过配色的人和没学过的人，差距不在于"审美天赋"，而在于是否理解色彩的基本规律。
这篇文章，我把配色的底层逻辑一次讲清楚。
一、先搞懂：颜色的三个维度
任何一个颜色，都可以用三个属性描述：色相、饱和度、明度。
1. 色相（Hue）
就是我们平时说的"红、黄、蓝、绿"——颜色的种类。
色相是一个圆圈，从 0°（红）到 360°（回到红），转一圈。专业叫色相环。
色相环：颜色按角度排列，0° 到 360° 转一圈
2. 饱和度（Saturation）
颜色的纯度或鲜艳程度。
同一色相，饱和度从 100% 降到 0%，颜色越来越"灰"
3. 明度（Lightness / Brightness）
颜色的明暗程度。
同一色相，明度从 90% 降到 15%，颜色越来越"暗"
关键：任何颜色，改变其中一个维度，就会变成另一个颜色。这是配色的第一个基础。
二、配色的 4 种基本模式
配色的核心，是在色相环上选择一组颜色。有 4 种经典模式：
1. 单色配色（Monochromatic）
只用一个色相，通过改变明度和饱和度，产生多个颜色。
优点：简单、安全、和谐，绝对不会丑。
缺点：单调，缺乏对比。
适用：企业官网、正式场合、极简设计。
2. 邻近色配色（Analogous）
在色相环上，选择相邻的 2-3 个色相。比如：红、橙红、橙。
优点：和谐、柔和、自然，像黄昏的颜色。
缺点：对比度低，不容易突出重点。
适用：温馨、舒适的设计，如咖啡馆、书店、家居。
3. 互补色配色（Complementary）
在色相环上，选择相对的两个色相（相差 180°）。比如：红和青、黄和紫、蓝和橙。
蓝色和橙色在色相环上相隔 180°，是经典互补色
优点：对比强烈、醒目、有冲击力。
缺点：用多了刺眼，容易俗气。
适用：运动品牌、促销活动、需要抓眼球的设计。
4. 三角配色（Triadic）
在色相环上，选择等边三角形的三个色相（相差 120°）。比如：红、黄、蓝。
红、黄、蓝在色相环上形成等边三角形
优点：丰富、活泼、有层次。
缺点：难控制，容易杂乱。
适用：儿童品牌、创意设计、需要活泼感的设计。
三、配色好不好，关键看"比例"
很多人配色丑，不是因为选错了颜色，而是因为比例不对。
一个好的配色方案，通常遵循60-30-10 法则：
- 60%：主色调（背景、大面积）
- 30%：辅助色（次要区域）
- 10%：强调色（按钮、重点、点睛）
举个网站的例子：
- 60% 白色（背景）
- 30% 浅灰（卡片、分隔）
- 10% 蓝色（按钮、链接）
如果把蓝色从 10% 扩到 50%，整个页面就会变得刺眼、累。
一句话记住：大面积用低饱和，小面积用高饱和。
四、为什么你配的色总是"脏"？
很多人配色时遇到的一个典型问题：颜色发灰、发脏、不够清透。
错误示例 vs 正确示例
纯色相，饱和度过高，刺眼廉价
降低饱和度，柔和不刺眼，更"高级"
原因通常是这三个：
1. 饱和度太高
直接取纯红（#FF0000）、纯绿（#00FF00）、纯蓝（#0000FF）——这是新手最常犯的错误。
纯色虽然"鲜艳"，但用于大面积会刺眼、廉价、像 Windows 画图工具。
正确做法：把饱和度降到 70-90%，明度调到 40-60%。
比如纯红 #FF0000 → 改成一个成熟的红色 #E74C3C。
2. 颜色没"呼应"
页面里每个颜色都"各管各的"，没有主次关系，就会显得乱。
正确做法：让所有颜色都轻微偏向同一个色相。
比如背景、卡片、文字，都带一点点蓝——整体就会协调。
3. 明度差不够
两个颜色明度太接近，就没有对比，看起来"糊"在一起。
❌ 明度太近，对比弱
✅ 明度拉开，对比强
正确做法：让对比色之间的明度差至少在 30% 以上。
五、配色的 5 个实用原则
原则 1：一个页面，最多用 3 种主色
超过 3 种主色，页面就会乱。颜色越多，越难控制。
如果非要加颜色，加同一色相的不同明度，而不是新色相。
原则 2：先定主色，再定辅助色
别一上来就"五彩缤纷"。先定一个主色（比如品牌色），再选 1-2 个辅助色。
辅助色最好和主色邻近或互补，不要"随便挑"。
原则 3：文字和背景的对比度至少 4.5:1
这不是审美问题，是可读性问题。
WCAG（国际无障碍标准）要求：正文文字和背景的对比度至少 4.5:1，小字要 7:1。
清晰易读，符合 WCAG AAA 标准
灰字配浅灰，读起来费眼睛
原则 4：重要信息不要只靠颜色传递
比如表单错误提示：
色盲用户看不出这是错误
所有人都能看懂
这一点和色盲设计相关，具体可以看我们另一篇色盲科普文章。
原则 5：用中性色"垫底"
中性色（黑、白、灰、米色）是配色的缓冲剂。它们不抢眼，用来分隔、垫底、留白。
一个成熟的配色方案，通常有 60% 以上是中性色。花花绿绿的颜色只是点缀。
六、常见场景的配色建议
1. 企业官网 / 产品页
整体：干净、克制、专业。
2. 电商 / 促销
整体：热烈、急促、有紧迫感。
3. 博客 / 阅读类
整体：安静、易读、不打扰。
4. 儿童 / 教育
整体：明亮、活泼、有童趣。
5. 高端 / 奢侈
整体：克制、留白、有质感。
七、配色的 3 个常见误区
误区 1：配色要"好看"
配色不是艺术问题，是功能问题。
一个"好看"的配色，如果用户看不清文字、分不清按钮、看不懂图表，那它就是失败的配色。
配色的第一目标是清晰，第二目标是美。
误区 2：多就是好
新手常犯的错：一个页面用了 8 种颜色，觉得"丰富"。
实际上，颜色越少，设计越高级。知名品牌几乎没有超过 3 种主色的。
误区 3：照着别人的配色抄
抄配色不是不行，但要抄"关系"而不是"颜色"。
- ❌ 直接抄别人的色值：他用 #4A90E2，我也用 #4A90E2
- ✅ 抄他的配色逻辑：他主色是蓝色，辅助是浅灰，强调是橙——我也按这个结构选颜色
抄颜色会"水土不服"，抄逻辑才能举一反三。
八、配色的"捷径"：工具
如果你想快速配出一组协调的颜色，用这些工具：
- Coolors——在线配色生成器，一键生成方案
- Color Hunt——手工精选配色，好看又多
- Adobe Color——专业配色工具，可调规则
- Contrast Checker——检查对比度是否达标
KeyGoto 也上线了在线配色工具，可以直接用：
功能包括：
- 一键生成配色方案（单色/邻近/互补/三角）
- 实时预览
- 复制色值（Hex、RGB、HSL）
- 导出图片
- 纯本地运行，无需注册
九、总结：配色的 8 条黄金法则
- 一个页面最多用 3 种主色——颜色越多越难控制
- 60-30-10 比例——大面积低饱和，小面积高饱和
- 先定主色，再选辅助——别一上来就五彩缤纷
- 文字背景对比度 ≥ 4.5:1——可读性第一
- 重要信息不只靠颜色——加图标、文字
- 用中性色垫底——60% 以上是灰白黑
- 抄"关系"不抄"颜色"——学配色逻辑，别抄具体色值
- 配色是功能，不是艺术——先清晰，后好看
配色不难，难在克制。少即是多，是配色的第一原则。
想动手试试？打开 配色生成器，自己生成一组配色。
十、常见问题
Q：我是完全不懂设计的人，怎么快速配出一组不出错的颜色？
用"单色配色"——只选一个颜色，然后用不同明度。比如深蓝、中蓝、浅蓝、淡蓝。绝对不会丑。
Q：为什么我从网上抄的配色，放到自己的设计里就不搭？
因为配色的关键在于比例和上下文，不是色值本身。抄配色时，要连"用在哪里、占多少比例"一起抄。
Q：配色和色盲有什么关系？
有很大关系。全球 8% 的男性有色盲/色弱。如果你的设计只靠颜色区分信息（比如红色 = 错误，绿色 = 正确），这部分用户就"看不见"。
想深入了解，可以看我们的色盲科普文章。
Q：怎么判断一个配色"高级"还是"廉价"？
看三点：
- 饱和度是否克制——高级的配色，饱和度高但很少
- 明度是否有层次——高级的配色，明暗对比清晰
- 是否有留白——高级的配色，敢用大面积空白
反之，如果页面里所有颜色都饱和、明度相近、密密麻麻没有留白——就是"廉价感"的来源。
结语
配色是一门可以学的手艺，不是"天赋"。
掌握色彩三要素（色相、饱和度、明度）、4 种基本模式（单色、邻近、互补、三角）、60-30-10 比例——你就能超过 90% 的人。
剩下的，就是在实践中不断调整。
如果你想现在就试试，打开 配色生成器，动手配一组颜色。
祝你配色愉快。