配色新手也能配出高级感的 3 条黄金法则：60-30-10 比例分配、互补色 / 类似色 / 三分色和谐、色温一致保持情绪统一。
# 配色 3 大黄金法则：60-30-10 + 互补色 + 色温一致，新手也能配出高级感
配色是设计新手最容易栽的坑——你以为大红 + 大绿 + 大黄就很"丰富"，实际看起来像幼儿节目。这篇把 3 条专业设计师天天用的配色法则讲清楚，照着做配色 +60% 专业度。附件里有 25 套精选配色卡（HEX + RGB + CMYK）和配色 SOP 速查表，保存就能用。
一、黄金法则 1：60-30-10 法则
核心：1 个主色 + 1 个副色 + 1 个强调色 = 永远不踩雷。
| 占比 | 角色 | 用途 |
|---|---|---|
| 60% | 主色（dominant）| 背景色、大面积主视觉 |
| 30% | 副色（secondary）| 文字、按钮、卡片 |
| 10% | 强调色（accent）| 链接、强调按钮、关键提示 |
经典案例：
Apple 官网：60% 白（背景） + 30% 灰（卡片） + 10% 蓝（按钮）
Spotify：60% 黑 + 30% 黑灰 + 10% 翠绿（logo / 强调按钮）
美团：60% 白 + 30% 浅灰 + 10% 黄（logo / 行动按钮）
红 + 绿：可口可乐 / 圣诞
蓝 + 橙：微软 / Mozilla
黄 + 紫：NBA Lakers / Twitch
互补色比例要悬殊（不是 50/50，是 90% 主 + 10% 强调）
两个色都做大面积 = 视觉疲劳
海岸线插画（蓝 + 蓝绿 + 沙黄）
自然品牌（绿 + 蓝绿 + 黄绿）
缺对比 → 文字和背景要明度差大（如 浅蓝 + 深蓝）
适合大面积，不适合"按钮"
Google 早期 logo
儿童产品
节日活动页面
1 个色做主，2 个色做点缀
不要三个色都做大面积
看到喜欢的配色 → 上传图片 → 自动提取 5 个主色
新手设计师必备习惯
8% 男性是色盲（红绿色弱为主）
主按钮 + 关键文字必须有非颜色差异（粗细 / 大小 / 图标）作补充
25 套精选配色卡（HEX + RGB + CMYK，工业可用）
配色 SOP 速查表（PDF）
怎么用：在做每个设计稿前**先定 3 色**，再开始。
二、黄金法则 2：互补色 / 类似色（和谐）
1. 互补色（高对比 · 强行动）
定义：色轮上 180° 相对的两个色（如 红 + 绿 / 蓝 + 橙 / 黄 + 紫）。
效果：1 个主色 + 1 个互补色 = 强对比、行动强、CTA（行动按钮）首选。
用得多：
注意：
反例：大红 + 大绿 1:1 = 圣诞树 + 幼儿节目
2. 类似色（柔和 · 信任）
定义：色轮上相邻 30°-60° 的色（如 蓝 + 蓝绿 + 绿）。
效果：统一、柔和、品牌信任感强。
用得多：
注意：
3. 三分色（活力 · 平衡）
定义：色轮上 120° 等距的 3 个色（如 红 + 黄 + 蓝）。
效果：活力但不冲突。
用得多：
注意：
三、黄金法则 3：色温一致（情绪统一）
1. 暖色调（黄 / 红 / 橙）
情绪：活力、温暖、紧迫
用：餐饮、零售、节日、娱乐、电商促销
代表品牌：可口可乐、麦当劳、肯德基、淘宝、京东
2. 冷色调（蓝 / 绿 / 紫）
情绪：专业、信任、平静
用：科技、金融、医疗、企业
代表品牌：IBM、Facebook、Visa、支付宝
3. 中性色（黑 / 白 / 灰 / 米）
情绪：高级、简约、留白
用：奢侈品、时尚、设计、出版
代表品牌：Apple、Chanel、New York Times
配色铁律：**同一画面只用一种色温**（暖 or 冷），不要暖 + 冷混用。
反例：黄色背景 + 蓝色按钮 = 视觉不协调、不高端。
例外：互补色（蓝 + 橙）是色温对比，但作为"主+强调"组合，而不是大面积。
四、3 个实战工具
工具 1：色轮图辅助
Adobe Color（color.adobe.com）：免费，看色轮选互补 / 类似 / 三分色。
Coolors（coolors.co）：按空格随机生成配色卡，每张卡 5 色都很和谐，5 个一组一键导出。
工具 2：抓图配色
配色提取神器（colorZilla、ImageColorPicker）：从图片 / Logo / 竞品中取色。
工具 3：色盲友好检查
Sim Daltonism（mac）/ Stark（Figma 插件）：看配色在色盲眼里是什么样。
五、配色 SOP（标准流程）
Step 1：明确情绪 → 选色温（暖 or 冷）
Step 2：选主色 → 行业通用色 or 差异化色？
Step 3：按 60-30-10 配 3 色
Step 4：用色轮验证和谐（互补 / 类似 / 三分）
Step 5：检查黑白 + 色盲适配
Step 6：写 Color Guide 文档（全团队用一套色）
六、5 个配色错误不要犯
1. 红 + 黄 + 蓝 + 绿 = 小学课本
→ 限 3 色，3 个就够。
2. 黑 + 亮黄 = 警告标签
→ 黑 + 黄组合视觉刺激，只适合警告场景（如 404），不适合品牌主色。
3. 全文字 + 全彩色背景
→ 文字对比度要够（明度差 ≥ 4.5:1，符合 WCAG AA）。
4. 浅黄底 + 白色文字
→ 看不清（明度差太小）。
5. 渐变 + 渐变叠加
→ 两个渐变会互相干扰，单渐变更高级。
七、配色和品牌气质
| 行业 | 推荐色温 | 主色举例 |
|---|---|---|
| 餐饮 | 暖 | 麦当劳黄、肯德基红、星巴克绿 |
| 科技 | 冷 | IBM 蓝、Twitter 蓝、GitHub 黑 |
| 金融 | 冷 | 支付宝蓝、Visa 蓝、中信红 |
| 母婴 | 暖 + 柔 | 粉红 + 浅黄 + 浅蓝 |
| 美妆 | 暖 + 中性 | 香奈儿黑白 + 玫瑰金 |
| 奢侈品 | 中性 / 冷 | 黑色 + 金 / 银 |
| 体育 | 强对比 | 互补色（红 + 蓝） |
| 教育 | 中性 | 蓝 + 黄 |
写在最后
配色不是感觉，是规则。新人按 60-30-10 + 互补 / 类似色 + 色温一致，90% 设计稿都拿得出手。配色忌讳"5 色堆 + 渐变 + 阴影"，朴素才是高级。
附件里有：
下载收藏，每次设计前先查色卡，照着配色。
立即收藏，下次设计不再配色翻车。
