色彩和谐：如何构建真正有效的配色方案

色彩和谐不是品味问题，而是几何问题。每一个感觉正确的配色方案，都是色轮上固定的关系，而且你可以有意识地重现它。

这就是大多数"色彩理论"文章埋在色块展示下面的全部秘密。好配色方案中的颜色，不是恰好相处融洽的朋友，而是被刻意放置在色轮特定角度上的点，那个角度正是它们有效的原因。

一旦你看到了几何关系，选色就不再是你追逐的感觉，而是你做出的决定。这是一套系统，不是情绪板。

色彩和谐的真正含义

色彩和谐是一种颜色排列方式，让眼睛读取为有序而非随机。和谐发生在颜色之间的关系一致时，而不是每种颜色单独好看时。

为什么要在意？因为判断发生得又快又无情。根据 Interaction Design Foundation 引用巴塞尔大学和 Google 的研究，人们在大约 17 到 50 毫秒内就会判断一个设计的吸引力，而这种快速判断主要基于颜色和构图。你没有第二次留下第一印象的机会。

和谐也承载着意义。正如 Joann 和 Arielle Eckstut 所说，"颜色可以象征与品牌形象相符的情感"，这被 Interaction Design Foundation 所引用。在读到任何文字之前，颜色关系就已经定下了感受的基调。如果你想深入了解每种色调传递的信息，我们单独分析了每种颜色真正传达的信号。

色轮就是全部

色轮是每种色调相对于其他色调位置的地图。和谐方案只是你放在那张地图上的形状。旋转形状，得到新配色，保持同样的平衡。

这不是民间传说。正如 Sensational Color 所解释的，经典和谐"是平衡色谱的颜色组合"，你可以"用几何形状来帮助你可视化色轮上各色调之间的关系"。形状是食谱，色轮是厨房。

三种关系承担了大部分工作：

• 对立色调位于色轮的另一侧，制造对比。
• 相邻色调并排而坐，制造凝聚力。
• 均匀分布的色调将色轮分成相等的切片，制造平衡。

掌握这三种关系，你就覆盖了 90% 的品牌实际使用的配色方案。

六种值得了解的配色方案

有六种经典和谐值得了解。根据 Sensational Color，每一种都是在色轮上旋转的几何形状，每一种都产生可预期的感受。

你不需要从第一天就掌握全部六种。大多数职业设计师只用其中三种：互补色、类比色和三元色。其他三种是当基础方案用尽空间时才会使用的变体。以下是三种核心方案各自的适用时机。

互补色：最大对比，最小代价

互补色是指色轮上直接对立的两种色调，比如蓝与橙、红与绿、紫与黄。对立本身就是重点。

为什么它在视觉上有效？对立色调几乎不共享相近的波长，所以眼睛读取到最大的分离感。那种分离就是对比，而对比就是注意力。这就是为什么在中性背景上使用互补色点缀，是设计中最可靠的"看这里"工具。

FedEx 是教科书案例：一个紫色和橙色的字标，两种色调在色轮上正好相对。对比如此干净，在任何尺寸下都能成立，甚至隐藏在负空间箭头中也清晰可辨。

有个问题：互补色在全饱和度、并排、等量使用时会产生震动感。两种对立色以同等音量喊叫，争夺同样的注意力，让眼睛疲惫。解决方法是比例，我们稍后会讲到。

类比色：平静、凝聚、低风险

类比色是指色轮上彼此相邻的三到四种色调。想象黄色渐变到黄绿色再到绿色。它们是邻居，所以能自然融合。

感觉平滑的原因在于波长接近。相邻色调共享大部分光谱范围，所以它们之间的过渡是平缓的，眼睛将它们读取为一个家族。没有冲突，因为没有对立。

Stripe 的品牌是科技领域最清晰的例子。它标志性的主视觉渐变流经相邻的蓝色、紫色和蓝绿色，这些色调在色轮上彼此相邻。效果高端而平静，因为渐变中没有任何颜色在争吵。

类比色是你能选择的风险最低的方案，这也正是为什么它可能看起来平淡。没有对立，你必须通过明度（明暗对比）而非色调来制造对比。把明度处理好，类比色看起来高档；忽略明度，它看起来像一团雾。

三元色：平衡的活力，没有混乱

三元色是指在色轮上均匀间隔的三种色调，相互间隔三分之一。在色轮上放一个等边三角形，读取三个顶点。

均匀间隔正是它有效的原因。每种色调与另外两种等距，所以没有任何单一颜色因位置而主导。你获得了多种鲜明颜色的活力，却没有互补色对的正面冲突。这是有裁判的能量。

陷阱在于，三种等强度的鲜艳色调很快就会变成马戏团。三元色只有在一种色调主导、另外两种辅助时才能保持平衡。几何关系给你的是位置平衡，不是比例平衡。比例仍然是你的工作。

这是每种方案的主线：色轮给你关系，你决定每种颜色倒入多少。

真实品牌如何选择配色方案

品牌选择配色方案不是为了好玩。他们选择能产生品牌所需感受的方案，然后有纪律地执行。以下四个品牌与几何关系完美对应。

Spotify 是纪律性的典范。品牌标识建立在单一绿色上，通过深浅变化而非新色调来演绎。这是单色方案做对了的样子：深度来自明度，而非添加颜色。一种色调，完整记忆。

Duolingo 在实际产品中运行相同的逻辑。界面以主导绿色领头，引入少量和谐点缀色用于状态和奖励。色彩丰富却不混乱，因为点缀色服务于绿色，而不是与之竞争。

注意，这些品牌没有一个使用超过所需的颜色。克制本身就是品牌。

需要一套能在整个品牌中成立、而不仅仅是在一个屏幕上的配色方案？Brainy 构建色彩系统。让 Brainy 为你的品牌打造配色方案。

破坏和谐的错误

大多数糟糕的配色方案因同样少数几个原因而失败。这些原因都不是关于选了"丑"颜色，而是忽视了关系。

• 等量比例。 给每种颜色同等的空间，消除了层次感，眼睛无处安歇。
• 处处全饱和度。 当每种色调都达到最大强度，没有什么能主导，整体嗡嗡作响。
• 没有明度对比。 明度相同的颜色，尤其在类比色方案中，放在一起的瞬间就变成了泥浆。
• 色调太多。 超过四种色调，手动维持和谐变得非常困难，这就是为什么四元色方案破坏的配色比它拯救的更多。
• 忽视使用情境。 在你显示器上惊艳的配色，可能在阳光下的手机屏幕上毫无生机。关系必须在真实屏幕上经受考验。

最深层的修复是统一感，这里有一个老画家的技巧。正如艺术家 Mallery Jane 所描述的，"创造色彩和谐的一种方法是使用一种叫做'母色'的技法，取少量一种颜色（母色）加入所有混合色中。"所有颜色最终共享一个共同的底调，所以配色读起来像一个家族，而不是一个委员会。

从一种颜色构建配色方案的工作流程

在 coolors.co 生成配色方案

你不需要灵感，你需要流程。Interaction Design Foundation 列出了一个职业设计师实际使用的可重复流程：寻找灵感、选定主色、参考色轮关系、使用生成器、用比例定义层次、确保对比度、制作原型、与用户测试，并根据反馈迭代。

以下是将该流程压缩为从单一基础色出发可执行的工作流程。

1. 选一种基础色。 从品牌、产品感受，或那个你放不下的颜色出发。这是你的锚点。
2. 选择关系，而不是颜色。 先决定感受，再让几何关系给你其他色调。平静意味着类比色。冲击力意味着互补色。活跃意味着三元色。
3. 从色轮上读取其他色调。 放上匹配的形状，读取各个顶点。不要凭眼感，色轮比你的直觉更准确。
4. 在添加色调之前先处理好明度。 艺术家 Chou（@hong_chou_）强调的一个好做法是"从相对单色的配色方案开始，先专注于把对比度和明度处理好"，然后"将一些其他色调引入最亮的区域……不失去和谐感"。明度是骨架，色调是皮肤。
5. 用母色统一。 将少量基础色混入每种其他颜色，使它们共享一个底调。
6. 分配比例。 使用 60-30-10 法则，让一种颜色主导，一种辅助，一种点缀。下面会详细说。
7. 在情境中测试，然后迭代。 在真实屏幕上、真实尺寸下、对照真实内容检验。调整，然后发布。

将情绪与方案匹配

先决定感受，这是你需要的参考表。

关于比例：第六步之所以重要，是因为关系本身无法创造层次感。60-30-10 法则解决了这个问题。正如 House Beautiful 所描述的，"60% 使用一种主色，30% 使用辅助色，剩余 10% 使用点缀色调"。我们在专门的文章中详细介绍这种分配，所以把这里当作提醒而非课程：主色通常是你平静的基础，点缀色是互补色调发挥价值的地方。

帮你完成色轮计算的工具

在 color.adobe.com 试用

你不必手动计算角度。少数免费工具可以运行几何计算并给你十六进制代码。

警告：工具让你很容易跳过思考。生成器给你一个数学上有效的关系，但它不了解你的品牌、你的对比度需求，也不知道你的点缀色在白色背景上是否通过无障碍检查。工具完成色轮计算，判断仍然是你的工作。我们将更多色彩和设计分析集中在一个地方。

常见问题

配色方案和色彩和谐有什么区别？

配色方案是你选择的特定颜色集合。色彩和谐是使这些颜色读取为有序而非随机的关系。每个好的方案都建立在和谐之上，但你可以组合一个没有和谐的方案，最终只得到噪音。

一个配色方案应该有多少种颜色？

对于大多数品牌，三到五种颜色就足够了。一种主色、一到两种辅助色、一到两种点缀色，按照 House Beautiful 描述的 60-30-10 比例应用。超过四种不同色调，手动维持和谐变得很难，这就是为什么像 Spotify 这样有纪律的品牌选择用一种色调的多种深浅变化来贯穿整个品牌。

哪种配色方案最适合初学者？

类比色或单色。两者都比较宽容，因为它们避免了正面对比。单色几乎不可能出错，因为你在一种色调内工作；类比色只要求你管理相邻色调之间的明度对比。

如何让互补色不冲突或震动？

不要以等量或等饱和度使用它们。让一种色调主导空间，将对立色保持为小面积、通常饱和度更高的点缀。60-30-10 分配的存在，正是为了阻止两种对立色以同等音量争夺注意力。

色彩和谐真的会影响用户的反应吗？

它对第一印象的影响是可测量的。Interaction Design Foundation 引用巴塞尔大学和 Google 的研究指出，人们在 17 到 50 毫秒内判断设计吸引力，主要基于颜色和构图。和谐正是那个快速判断所读取的内容。

我可以只用配色生成器而跳过理论吗？

你可以在几秒内生成一个有效的关系，是的。但生成器无法做到的是：设置比例、修复明度对比、检查无障碍性，或了解你品牌的含义。理论正是将有效配色转化为可用配色的东西。

停止猜测颜色

色彩和谐是一套你可以运行的系统，不是你或有或无的天赋。色轮编码了关系，六种方案是你放在上面的形状，比例加明度将关系变成一个站得住脚的配色方案。

选一种基础色，选择一种感受，从几何关系中读取其他色调。把明度处理好，用母色统一，按 60-30-10 分配，在它实际存在的地方测试。这就是全部方法，而且每次都胜过直觉。

感觉正确的配色方案绝非偶然。它是色轮上你可以命名并重复使用的一种关系。

需要一套能在整个品牌中成立、而不仅仅是在一个屏幕上的配色方案？Brainy 构建色彩系统。让 Brainy 为你的品牌打造配色方案。