很多设计师刚开始学配色时，习惯从别人的作品里扒颜色，保存一堆截图和色卡，却说不清这些颜色之间到底有什么关系。看得多了，反而更迷茫，只能靠感觉试，改来改去，最后还是不踏实。

色环出现的意义就在这里。它把颜色排成一圈，让每一种色相在360度里都有自己的位置。前面我们已经通过12色环和24色环，建立了对色相顺序和刻度的基本认识，也知道这一圈可以被平均切分，用来描述颜色之间的远近和跨度。接下来要做的事情，是把这张静止的图变成可以使用的配色方法，让每一次选色不再只是一时心情，而有清楚的依据和路径。

这篇文章会围绕六个常用的配色原则展开。它们都建立在色环之上，却指向不同的设计目的。有的帮你做出安静统一的界面，有的负责制造清晰的重点，还有的适合处理多种颜色并存的复杂场景。理解这些原则之后，当你再看到一张配色顺眼的页面，既能在色环上画出它大致使用的关系，也能在自己的项目里有意识地复用，而不是完全靠运气。

1 同类色搭配原则

同类色指的是色相非常接近的一组颜色。放在 12 色环或 24 色环上看，它们会集中在一小段弧线上，只做很短的移动。如果用角度来理解，可以把同类色的色相差控制在 30 度以内，一般在 15 度左右会更好掌控。换算到 24 色环，大致是一到两格的范围。

同类色搭配带来的第一印象是统一。色相几乎不变，画面里的差异更多来自明度和饱和度。

对界面设计来说，这种组合非常适合信息密度高、使用时长较长的产品，例如阅读应用、文档和笔记工具、记账和日程类页面。主色可以承担品牌识别和关键操作，同一色相下的浅色可以用在标签、弱化图标、背景块或柔和的渐变中，让整体气质保持一致，而不会被过多杂色打断。

2 邻近色搭配原则

邻近色的跨度比同类色大一些，落在同一大片色域里，但已经有了清楚的差别。放在 12 色环上，可以理解为跨 2 到 3 格，大约是 60 到 90 度的范围；换到 24 色环，就是向两侧各走几格，在同一片色域中选出几种相互接近又不相同的颜色。

可以把邻近色想成同一天里不同时间的天空。清晨的天色偏橙黄，中午更接近纯蓝，傍晚可能带一点紫意。它们属于同一片天，却给人不同的情绪。这正是邻近色搭配的特点，整体和谐，但比单一色相更有变化，更容易让画面有层次、有节奏。

在界面设计中，邻近色特别适合用来营造氛围。欢迎页、成就页、品牌故事页面，都可以用邻近色做背景渐变，或者用在插图、图标和装饰形状里。

3 对比色（互补色）搭配原则

在色环上，对比色和互补色属于跨度最大的一组关系。互补色是指色相相差大约180度的一对颜色，在 12 色环上是正对的两点，在 24 色环中则相隔十二格。对比色的范围可以稍微宽一点，只要色相跨过了120度左右，人眼就会本能地感到强烈的对立和拉扯感。

正因为这种跨度足够大，对比色与互补色非常适合用来制造视觉焦点。蓝配橙、紫配黄、红配青这几组经典组合，经常出现在一些引人注目的作品中。

在界面设计里，如果同一页面中已经有一套稳定的主色和中性色，适当地加入一对对比色或互补色，既能把最重要的操作和信息标记出来，又能帮助用户迅速建立层级感。