配色常被当成”设计师的审美玄学”，但在广告里，颜色是有明确任务的功能元素：定情绪、建品牌、划层级、把用户的视线拽到 CTA 上。本文把配色拆成一套可执行、可校验的规则——从色彩的心理联想（以及它的文化局限），到配色方案、比例法则，再到最工程化的一环：对比度与可访问性。
这也是 创意设计与合规系列 的第二篇，承接 用户心理学 的三方视角：配色不是只替广告主抢眼球，而是在广告主、媒体、用户三方之间找平衡（见 §6）。
TL;DR
- 颜色先传情绪，再传信息：红=紧迫/热情/危险，蓝=信任/专业/冷静，绿=安全/自然/成交，橙=活力/性价比。选色前先问”我要用户产生什么感觉”。
- 色彩心理有强文化依赖：红在中国是喜庆、在部分西方语境是警示/亏损；出海创意必须做本地化校验（呼应 用户心理学 的边缘路径线索）。
- 四种经典方案：单色（克制）、邻近（和谐）、互补（强对比抓眼球）、三分（活泼平衡）。品牌色定基调，选一种铺开即可。
- 60-30-10 法则：主色 60% + 辅助 30% + 强调 10%。强调色只占 10% 才显眼，用来锁定 CTA。
- CTA 靠对比,不靠饱和：按钮显不显眼取决于它和周围的对比度，不是颜色本身有多艳。
- 可访问性是底线：正文对比度 ≥ 4.5:1（WCAG AA）、大字 ≥ 3:1；别只靠颜色传信息（约 8% 男性红绿色盲），要做图标/文字冗余。
- 三方视角看配色：广告主想最刺激抓眼，用户要不刺眼看得清，媒体要与平台调性/暗色模式协调——配色是在三方之间找平衡，不是把饱和度拉满。
Table of contents
Open Table of contents
1. 颜色先说情绪：色彩心理与文化
用户看到广告的第一眼，颜色比文字更快抵达大脑。这是 ELM 模型 里典型的边缘路径线索——不用动脑，情绪就先被定了调。
| 颜色 | 常见心理联想 | 广告里的典型用途 |
|---|---|---|
| 红 | 紧迫、热情、食欲、危险 | 大促 / 限时、餐饮、警示 |
| 橙 | 活力、亲和、性价比 | CTA 按钮、电商促销 |
| 黄 | 乐观、廉价、警醒 | 提醒、儿童 / 快消 |
| 绿 | 安全、自然、健康、成交 | 环保、金融”通过”、支付成功 |
| 蓝 | 信任、专业、冷静、科技 | 金融、B2B、医疗、SaaS |
| 紫 | 高级、创意、神秘 | 美妆、奢侈、创意行业 |
| 黑/白 | 高级、极简、留白 | 奢侈品、高端 3C |
严谨提醒：色彩—情绪的对应关系是统计倾向，不是物理定律。学界（如 Elliot & Maier 的色彩心理研究）证实颜色确实影响情绪与行为，但效应强度高度依赖情境与文化，上表只宜当经验起点、不宜当铁律。真正可靠的做法是 A/B 测试——让数据而非直觉拍板。
文化不是背景板，是变量。红色在中国是喜庆吉利，在部分西方财务语境里却代表”亏损 / 警示”；白色在东亚部分场景关联丧事，在西方多指纯洁。出海广告的配色必须过一遍本地文化校验，否则情绪就传反了（详见 地区广告政策与合规）。
2. 四种经典配色方案
有了基调色，怎么扩展成一套和谐的配色？色轮上的色相关系给了四个久经考验的模板。
品牌色定基调，选一种方案铺开：内容型广告多用单色 / 邻近保持克制，促销 / CTA 用互补制造冲突感。
- 单色（Monochromatic）：一个色相，靠明度和饱和度拉开层次。最安全、最”高级”，适合品牌广告和内容型素材。
- 邻近（Analogous）：色轮上相邻的几个色相，天然和谐、过渡自然，适合营造氛围。
- 互补（Complementary）：色轮上相对的两色，对比最强、最抓眼球——天生适合”背景一种色、CTA 用它的互补色”。
- 三分（Triadic）：色轮上均分的三点，活泼又平衡，适合年轻化、多信息的活动页。
3. 60-30-10：把比例定下来
选好了颜色，还得定用多少。60-30-10 法则源自室内设计的配色经验，被平面与界面设计广泛借用——它不是精确公式，而是一条帮你分配”视觉预算”的启发式：
强调色只占 10% 才『稀缺 = 显眼』；整屏高饱和反而没有焦点。
- 主色 60%：背景与大面积区域，定整体基调，通常最克制。
- 辅助色 30%：卡片、区块、次级信息，撑起层次。
- 强调色 10%：只留给 CTA 和必须被注意到的焦点。
这条法则的精髓是稀缺：强调色之所以显眼，正因为它稀少。一旦整屏都是高饱和红，视线无处落脚，用户反而不知道该点哪——这是新手最常见的翻车方式。
4. CTA 靠对比，不靠饱和
“让按钮更显眼”最常见的误解是”把它调得更红更艳”。真相是：显眼 = 对比，不是绝对饱和度。一个按钮能不能被看见，取决于它和周围环境的对比——颜色对比、明度对比、留白对比。
同样是『立即购买』，低对比的按钮几乎隐形；高对比按钮才『点得动』。别只靠颜色传信息，配图标/文字做冗余编码。
实践要点：
- CTA 用强调色 + 高对比：让它成为整个画面里对比最强的一块。
- 一屏一个主 CTA：多个同等显眼的按钮 = 没有 CTA，用户会犹豫（决策瘫痪）。
- 对比也是层级工具：标题、正文、辅助说明用不同的明度层次拉开阅读优先级（详见 文案与排版）。
案例：改的是对比，不是”更红”。转化优化专家 Michael Aagaard（Unbounce）在一次产品页测试中，仅重做 CTA 按钮的颜色与形状（提升它与背景的对比、让它更像”可点的东西”），产品页销量提升 +35.81%；但在另一次测试里，他天真地只改了按钮字体颜色，点击率反而 −18%。同一条经验反复验证：让 CTA 显眼的是”和周围的对比 + 可点感”，不是把颜色调得更艳。方向要靠 A/B 定，别靠直觉。
5. 可访问性：这是底线，不是加分项
可访问性（Accessibility, a11y）常被当成”有余力再做”，但在广告里它直接关系到转化：看不清的 CTA 就是漏掉的点击，而且很多地区已把它写进合规要求。以下门槛来自 W3C 的 WCAG 2.2 标准（可访问性事实上的国际基准）：
- 文本对比度（SC 1.4.3 / 1.4.6）：AA 级要求正文 / 小字 ≥ 4.5:1、大字（≥18pt 或 14pt 粗体）≥ 3:1；AAA 增强级要 7:1。
- 非文本对比度（SC 1.4.11）：按钮、图标、输入框边界等 UI 组件与相邻颜色的对比 ≥ 3:1——这正是”CTA 边界要看得清”的标准依据。
- 别只用颜色传信息（SC 1.4.1）：约 8% 的男性、0.5% 的女性有色觉缺陷（CVD，以红绿型的 deutan / protan 为主）。“红=错、绿=对”对他们无效——要做冗余编码：图标、文字、形状、位置一起上（✓ / ✗ 图标 + “成功 / 失败”文字）。
- 闪烁与动效（SC 2.3.1）：任何内容每秒闪烁不超过 3 次，以规避光敏性癫痫风险；高频动画既伤体验，也被不少平台政策明确限制。
- 深浅模式：素材可能被展示在深色或浅色背景上，给关键元素加描边或底板，保证任意背景下都可读。
术语：对比度以两种颜色的**相对亮度（relative luminance）**之比计算，范围 1:1（无对比）到 21:1（纯黑对纯白）。用在线对比度检查器（如 WebAIM Contrast Checker）一测便知，别靠肉眼估。
6. 三方视角看配色
配色不是只替广告主”抢眼球”服务的。把 心理学篇 §1 的三方视角 套到颜色上，就能看清每一方在乎什么、张力在哪：
| 角色 | 在乎什么 | 配色上的诉求 | 常见冲突 |
|---|---|---|---|
| 广告主 | 转化、品牌识别 | 强调色 + 高对比突出 CTA，品牌色建立记忆 | 冲动是”整屏拉满饱和”，反而没焦点 |
| 媒体 / 平台 | 体验、留存、eCPM | 广告配色要与平台调性、深/浅色模式协调，不刺眼、不破坏浏览 | 广告太扎眼 → 用户体验下降 → 长期 eCPM 受损 |
| 用户 | 看得清、不被灼伤、被尊重 | 足够对比度、可访问（色盲友好）、情绪不被过度操控 | 高频闪烁 / 高饱和红制造焦虑，引发反感 |
- 心理学是共同语言：颜色先触发情绪（边缘路径线索），这对三方都成立——所以问题不是”要不要用情绪色”，而是”用到什么程度不越界”。
- 平衡点：用强调色 + 高对比精准点亮 CTA（满足广告主），同时把大面积保持克制、遵守平台规范（满足媒体），并守住对比度与可访问性底线（满足用户）。这正是 60-30-10（§3）和对比度门槛（§4–§5）想达成的效果。
- 平台会替用户和自己立规：不少媒体对广告的闪烁频率、自动播放、配色刺激度有明确限制——这本质是媒体在三角里替”体验”投票。
7. 常见误解 ↔ 正解
| 常见误解 | 正解 |
|---|---|
| 配色是审美，靠感觉 | 配色是功能：定情绪、建品牌、划层级、导向 CTA，可拆解可校验 |
| 按钮越红越艳越显眼 | 显眼靠”和周围的对比”，不是绝对饱和度 |
| 颜色含义全球通用 | 强文化依赖，出海必须做本地化校验 |
| 用色越丰富越有活力 | 遵循 60-30-10，强调色只占 10% 才有焦点 |
| 可访问性是锦上添花 | 是底线：看不清 = 掉转化，还可能违规 |
| 红=错绿=对就够了 | 约 8% 男性红绿色盲，必须图标/文字冗余 |
8. 收尾：一次配色的取色顺序（SOP）
把前面的规则串成一条可复用的操作流程——下次配色按这个顺序走，基本不会翻车：
- 定情绪（§1）：先问”要用户产生什么感觉”，选定情绪基调；出海先过一遍文化校验。
- 锁品牌色：以品牌色为基准展开，别每张素材都另起炉灶。
- 选方案（§2）：用单色 / 邻近 / 互补 / 三分之一，从基准色扩出一套和谐色板。
- 分预算（§3）：按 60-30-10 分配主 / 辅 / 强调，强调色只留给 CTA。
- 点亮 CTA（§4）：让 CTA 成为全屏对比最强的一块——调对比，不是调饱和。
- 过可达（§5）：正文 ≥ 4.5:1、大字 ≥ 3:1，别只靠颜色传信息，动效克制。
- 交给数据：用 A/B 验证，让效果而非直觉拍最终板。
配色的终极目标不是”好看”，而是在 0.5 秒内把用户的情绪和视线安排明白——情绪由色彩心理承接，视线由对比与比例牵引，而效果由 A/B 测试验证。把这套规则和 用户心理学、文案排版 合起来，才是一条完整的创意说服链。
参考文献 / 延伸阅读
- W3C. Web Content Accessibility Guidelines (WCAG) 2.2.——w3.org/TR/WCAG22（对比度门槛 SC 1.4.3 / 1.4.11 等）
- WebAIM. Contrast Checker.——webaim.org/resources/contrastchecker（在线测对比度）
- Elliot, A. J. & Maier, M. A. (2014). “Color Psychology: Effects of Perceiving Color on Psychological Functioning in Humans.” Annual Review of Psychology, 65, 95–120.（色彩心理的实证与边界）
- Aagaard, M. How to Design Call-to-Action Buttons That Convert. Unbounce.——unbounce.com（按钮设计 A/B 案例）
- Colour Blind Awareness——colourblindawareness.org（色觉缺陷人群比例）
创意设计与合规系列 · 建议按序阅读
- 用户心理学与行为哲学——懂人
- 创意配色（本篇）——用色
- 文案与排版——用字
- 视觉构图与动态创意——构图与动
- DCO 动态创意优化与创意疲劳——规模化
- 创意 A/B 测试与有效性度量——用数据验证
- 地区政策与合规——守边界
完整阅读路径见系列页。