色彩和谐规则：互补色、三角配色、四角配色及其应用场景

色彩理论听起来很学术。在实践中，它是一个小工具箱，好的设计师可以不假思索地拿来使用。七种经典和谐配置覆盖了95%的调色板工作 — 了解每一种及其应用场景，是让调色板显得有意图还是显得无意间拼凑出来的区别。

色轮是你的指南针

每条和谐规则都定义了12色轮上的位置。你选定一个基础色调，规则就会告诉你在色轮上的哪里取用其余的颜色。这些规则不涉及饱和度或明度 — 这两个维度由你自己调整。

互补色（对立色调）

色轮上直接相对的两种颜色：红与青、橙与蓝、紫与黄。对比度最大。用于需要某个元素从背景中凸显出来的地方 — 比如登陆页的行动按钮，或数据图表的高亮部分。

陷阱：在完全饱和的情况下，互补色对会令人感到不适。将其中一种降低饱和度（去饱和、变浅或变深），用另一种作为强调色。

三角配色（三色均匀分布）

三种色调相隔120°：红-黄-蓝、橙-绿-紫。平衡而充满活力。常用于插画、儿童产品以及希望显得生动但又不过度的品牌。

陷阱：三种颜色都以相等饱和度呈现时会相互争夺注意力。选定一种作为主色（占设计的60%），一种作为辅色（30%），一种作为点缀色（10%）。

邻近色（色轮上的相邻色）

三到五种相邻的色调：黄-黄绿-绿或蓝-蓝紫-紫。最平静的和谐配置 — 没有冲突，因为没有颜色相互对抗。自然景观（日落、森林）几乎总是使用邻近色。

陷阱：邻近色调色板可能显得平坦。加入一个互补色点缀（中间色的对面颜色的小剂量）以增加对比点。

分裂互补色（两个近似对立色）

选定一个基础色，不取其完全互补色，而是取互补色两侧相邻的两种颜色。比严格互补色温和，但仍有冲击力。对于觉得直接互补色过于激进的设计师来说是个不错的默认选择。

四角配色（两对互补色）

四种色调在色轮上形成矩形：例如红+绿+橙+蓝。最丰富的和谐配置 — 多样性十足 — 但也是最难平衡的。最佳做法是让一种颜色主导，其他三种作为辅助。

陷阱：四角调色板容易显得混乱。决定哪种颜色代表品牌身份，将其他三种降级为次要角色。

单色调（单一色调，多种亮度）

一种色调搭配不同的饱和度和明度。最大的一致性，零色调对比。完美适用于希望内容（照片、排版）而非UI框架来承载视觉兴趣的界面。

大多数极简主义SaaS工具采用单色调 — 品牌是单一蓝色，其余一切都是灰度。

趋势配色（巧妙打破规则）

我们在色彩调色板生成器中包含的第七种模式：来自ColourLovers、Coolors和业界设计师的177个精心策划的社区调色板。这些调色板通常故意打破经典规则 — 它们之所以有效，是因为设计师有具体的创意意图 — 当纯理论产生过于保守的结果时，这些是很好的灵感来源。

如何选择？

• 编辑类、平静、自然 → 邻近色。
• 冲击力、行动按钮、活力 → 互补色或分裂互补色。
• 充满活力的品牌、插画 → 三角配色。
• 丰富的编辑类、大胆的活动 → 四角配色。
• 极简主义UI、大量照片 → 单色调。
• 感到困顿 → 浏览趋势配色。

超越规则

所有七种和谐配置都忽略了两个关键维度：对比度（这个背景上的文字能被读清吗？）和语义颜色（在西方UI中，红色无论如何理论都意味着危险）。始终对最终调色板运行WCAG对比度检查 — 色彩调色板生成器一键显示每个配色对的AA/AAA比率 — 也不要仅因为色轮说某个危险色看起来不错就选择它。

规则是起点，不是终点。生成五个调色板，批判性地审视它们，调整。好的调色板来自迭代，而不是一次性掷骰子。