方案配色
一句话:先问清「用在哪、给谁看、想让人感觉什么」,再从配色库里调出一组,把色值和用法一起交出去。
不发明新颜色,只做匹配。库里没有合适的时候,再按同样的结构现配。
第一步:确认三个前提(缺一不可,问不清就先问)
| 前提 | 为什么问 | 常见答案 |
|---|---|---|
| ① 载体 | 决定用哪一档色 | 手机长图 / 公众号推文 / 方案页 / PPT / Excel 表 / 海报封面 / 名片 |
| ② 受众 | 决定专业度与亲和度的配比 | 客户(非专业)/ 同行 / 领导 / 泛流量 |
| ③ 情绪 | 决定选哪一族 | 让人信任 / 让人想行动 / 让人觉得温暖 / 让人觉得高级 / 让人专注 |
对方说不清情绪时,用二选一逼出来,别让他自由发挥:
- 你希望对方看完的第一反应是「这人靠谱」还是「这东西有意思」?
- 你希望它是「冷一点」还是「暖一点」?
三个前提里,情绪是必问项。载体和受众可以从上下文推,情绪推不出来。
第二步:情绪 → 配色族(速查)
| 想传递的感觉 | 选这一族 | 首选 |
|---|---|---|
| 让人信任、显专业、要沉稳 | 科技商务质感 | 2.1 深炭蓝 + 暖金 |
| 冷静、理性、长文阅读 | 经典配色 | 1.3 雾霾蓝 + 米杏 |
| 温和、高级、不刺激 | 经典配色 | 1.1 灰豆绿 + 灰玫瑰 |
| 年轻、轻快、女性向 | 经典配色 | 1.2 马卡龙 |
| 温暖、烟火气、有人情味 | 暖色生活 | 6.1 焦糖 + 深棕 · 6.3 暖驼灰 |
| 要催人行动、有活力 | 暖色生活 | 6.2 落日橙 + 暖阳黄 |
| 稀缺、贵、仪式感 | 奢侈品 · 高端 | 4.3 纯黑 + 香槟金 |
| 科技感、数据感、AI 工具 | 互联网科技 | 5.1 Stripe 紫 · 5.2 Linear 紫蓝 |
| 内容为王、界面不要干扰 | 互联网科技 | 5.3 纯白 + 墨灰 |
| 实体店、品牌辨识度 | 咖啡茶饮品牌 | 3.1 星巴克绿 · 3.2 瑞幸蓝 · 3.3 极简米白 |
> 详细色值、心理依据、适用与避坑 → 读 references/配色库.md
> 按情绪词反查具体配色 → 读 references/情绪索引.md
第三步:套用通用规则(选完族也必须守)
1. 主色不超过 3 个。 一组里选 1 个主色(面积最大)、1 个辅助色、1 个强调色。第 4 个只当底色或文字色,不参与抢眼。
2. 面积按 60-30-10 分。
- 60% 底色(白 / 米白 / 深底)
- 30% 主色(标题、色块、头图)
- 10% 强调色(按钮、数字、关键结论)
强调色超过 15%,重点就不叫重点了。
3. 文字色不用纯黑纯白。
- 浅底文字用 #1F1F1F ~ #2D2D2D,不用 #000000
- 深底文字用 #FFFFFF 降到 88%~92% 不透明度,或直接 #E8EEF2
- 浅底纯黑、深底纯白,是最常见的廉价感来源
4. 深浅要拉够。 主色和底色亮度必须拉开。同族相近色(如青蓝 #3D8BC9 和薄荷青 #5DD9C1)亮度差不够时,只留一个做主色。
5. 强调色只有一个。 两个都想强调 = 都不强调。
6. 永远连文字色一起给。 只给色值不给「哪个当底、哪个当字」,等于没给。
第四步:输出(三种形态,按需要给)
形态 A · 色值清单(最常用)
三列表:色名 / HEX / 用途。末尾补一行文字色建议。
形态 B · 预览页(要给人看效果时)
python3 scripts/build_preview.py 1.1 2.1 --out 配色预览.html
参数是配色编号(见配色库),可传多个。输出白底、细线分割、系统字体的 HTML,浏览器直接打开即可看效果。加 --dark 输出深色底版本。
形态 C · 直接落到交付物(海报 / 方案页 / PPT / Excel)
把色值套进对方要的载体,同时守住第三步六条规则。
- HTML 页面:色值写进 CSS 变量,一处改全局
- Excel / PPT:只在表头、标题、强调数字三处用色,不要给整张表上色
常见错误(照着避)
| 错误 | 后果 |
|---|---|
| 4 个颜色都当主色 | 没有重点,像调色盘 |
| 强调色面积超过 15% | 重点失效,页面变吵 |
浅底用 #000 黑字 |
生硬、廉价 |
| 只给色值不给用途 | 对方不知道怎么用,等于没给 |
| 情绪与配色不匹配(马卡龙做金融方案) | 轻快感削弱专业度 |
| 深色相直接相邻 | 糊成一团,看不清 |
| 品牌注册色直接商用 | 侵权风险,见配色库备注 |
配色库索引(18 组)
| 编号 | 配色 | 情绪 |
|---|---|---|
| 1.1 | 灰豆绿 + 灰玫瑰 + 燕麦白 | 平和、内敛、高级 |
| 1.2 | 薄荷绿 + 樱花粉 + 奶黄 + 香芋紫 | 活泼、甜美、轻盈 |
| 1.3 | 雾霾蓝 + 青石灰 + 米杏色 | 冷静、理性、克制 |
| 2.1 | 深炭蓝 + 暖金色 + 玻璃白 | 深邃、品质、可信 |
| 2.2 | 墨蓝 + 青蓝光 + 薄荷青 | 前沿、智能、冷静 |
| 2.3 | 曜石黑 + 琥珀橙 + 水泥灰 | 硬朗、力量、专业 |
| 3.1 | 星巴克绿 + 咖啡棕 + 纸杯米 | 成熟、慢节奏、稳定 |
| 3.2 | 瑞幸蓝 + 米白 + 奶咖 | 明快、亲民、日常 |
| 3.3 | 米白 + 墨黑 + 米色 | 极简、留白、禅意 |
| 4.1 | 爱马仕橙 + 马鞍棕 + 深褐黑 | 稀缺、传承、仪式感 |
| 4.2 | 蒂芙尼蓝 + 银白 + 墨黑 | 浪漫、纯净、女性化 |
| 4.3 | 纯黑 + 纯白 + 香槟金 | 经典、永恒、力量 |
| 5.1 | Stripe 紫 + 电光蓝 + 深蓝黑 | 智能、活力、信任 |
| 5.2 | 深炭黑 + Linear 紫蓝 + 雾灰 | 极客、效率、克制 |
| 5.3 | 纯白 + 墨灰 + 暖灰 | 朴素、专注、内容为王 |
| 6.1 | 焦糖 + 深棕 + 奶泡色 | 温暖、烟火气、家 |
| 6.2 | 落日橙 + 暖阳黄 + 暗砖红 | 活力、温暖、行动力 |
| 6.3 | 暖驼灰 + 浅褐灰 + 羊绒米 | 温柔、包裹感、静奢 |
边界
- 本 skill 只做配色匹配,不做内容策划、不写文案。
- 品牌注册色(蒂芙尼蓝、爱马仕橙、星巴克绿、瑞幸蓝等)仅作参考,商用前请自行确认授权。
- 18 组是起点不是全部。要新配色时按「1 主色 + 1 辅助 + 1 强调 + 1 底/文字色」的结构现配,并守住第三步的规则。