色彩搭配原理与技巧 你必须了解的色彩搭配原理与技巧！

配色是多种多样的学问，但世界上有很多奇招，光是九剑就总有破法。今天阿里同学的色彩设计方法只有简单的三大类，但是包含了很多顶级的配色技巧，是不可多得的收藏。千万别错过。

为什么要整理设计色彩的方法？

在色彩设计的应用中，我们对色彩的理解程度不同，会影响设计页面的表现。巧妙运用色彩搭配，在设计上可以事半功倍。一个优秀的设计作品，配色一定要和谐得体，赏心悦目。反思在设计过程中什么配色更容易达到设计目的，是什么影响了我们的配色思维？

以下几点往往影响配色思维:

1.只注意色彩表现

2.搭配方法不够系统

3.颜色和成分不合适

首先简单理解色相和色相的概念:

整体蓝色设计带来统一印象。颜色的深浅承载不同类型的内容信息，例如信息内容模块。白色背景代表用户内容，浅蓝色背景代表回复内容，深蓝背景代表回复操作。颜色主导着信息层面，维护着推特的品牌形象。

观点:色差划分页面层次和模块，代表不同的功能任务属性。

1.1-2相邻颜色匹配

邻色配色法比较常见，比同色系略丰富，色调过渡柔和和谐。

高纯度颜色基本上用于组控制和文本标题颜色。每个控件使用相邻的颜色使页面不那么单调，然后减少不同背景颜色和模块划分的颜色饱和度。

观点:基于品牌色彩的邻色应用可以灵活应用于各种控件。

1.1-3相似配色

相似配色也是常见的配色方法，弱对比给人一种平静和谐的感觉。

红色和黄色占据了页面。颜色基本上用于不同的控件组。红色用于导航控件、按钮和图标，也是辅助元素的主色。内容标签和背景匹配使用橙黄色而不是品牌颜色。

观点:基于品牌颜色的相似颜色用于页面的各种控件和主要内容。

1.1-4中等配色

中色彩对比相对突出，色彩对比鲜明，容易呈现高饱和度色彩。

色深营造空感，也辅助内容模块的划分。统一的深蓝色系统用于传播品牌形象。中间颜色绿色按钮起到了丰富页面颜色的作用，同时也突出了绿色按钮的任务级别最高。深蓝色天花板的导航打开了整个车站路径，引导用户往下阅读。

观点:利用色彩对比突出按钮任务优先级，增加页面气氛。

1.1-5对比配色

主色对比配色需要精确控制配色和面积，主色会带动页面气氛，产生强烈的心理感受。

红色的兴奋反映了内容的丰富性，而红色这个品牌赋予了群组控件颜色和可操作的任务。贯穿整个网站的可操作提示也能体现品牌形象。红色大多代表导航指导和类别分类，蓝色代表登录按钮、默认用户头像和标题，显示用户生成的内容信息。

观点:红色和蓝色反映的是信息的不同交互和可操作性，针对的是系统操作和用户操作的区别。

1.1-6中性配色

以一些中性的颜色为基调，常用于信息量较大的网站，突出内容，没有不必要的颜色干扰。这种过色搭配是相当常见和经典的。

黑色突出了网站导航和内容模块的区别，而品牌蓝主要用于可点击的操作控件，包括用户名和内容标题。与大型电影中使用品牌色彩的方法相比，更能突出内容和信息，适合面向内容的通用平台网站。

观点:利用大面积的中性色彩作为主色，品牌色彩在这里起到画龙点睛的作用，用在一些需要突出强调交互状态的场景中。

1.1-7以多色搭配为主

主色与其他配色的关系会更丰富，可能会有相似色、中色、对比色等配色方式，但其中一种会占主导地位。

对于产品线丰富的Google来说，千变万化的配色可以按照一定的纯度比例搭配四种品牌颜色，再用无色的黑、白、灰，让品牌有很大的统一感。在大多数页面上，蓝色会作为主色，其他三种颜色作为辅助色，设置不同的任务属性，黑、白、灰作为辅助色。对于平台站点来说，多色主色有很好的扩展性。

观点:Google设置了四种品牌颜色，通过主次和合理的比例应用在界面上，通过群控的不同交互状态合理分配功能和任务。

二

由色调和谐形成的配色方案

2.1主色匹配

这是由同一个色相组成的统一配色。深色和深色也可以形成同样的配色效果。即使有多种色调，只要色调一致，画面就能呈现整体的统一。

根据颜色的情感，不同的色调会给人不同的感受

2.1-1清晰色调

清晰的色调使页面非常和谐，即使不同色调的配色与色相相同，页面也能保持高度的和谐。蓝色在另一页创造了一种安静而寒冷的气氛。布朗让我们想起了厚重的大地，给书页增添了稳重踏实的感觉，同时也温暖了冷蓝。

观点:补色搭配在一起，统一色调可以缓解色彩之间的对比效果。

2.1-2暗色调

黑幕色调渲染场景氛围，通过不同色调的色彩变化丰富信息分类，降低色彩饱和度，使色块协调融合到场景中。白色和明亮的绿松石是作为信息载体呈现的。

观点:多种颜色统一色调处理，区域间非常和谐，不影响整个页面的灰暗氛围。

2.1-3种明亮色调

鲜艳的色彩明快清晰，活泼的气氛和醒目的卡通形象诉说着一场庆典，却披上了高纯度的色彩，对于长期的观光来说太刺激了。

观点:饱和度和纯度特征的明显结合可以达到视觉冲击，同时可以采用对比色或降低亮度等适当的方法来调和视觉表达。

2.1-4暗色调

页面以深灰色为主，不同颜色搭配，喜欢讲不同的故事，白色人物的布局。整个页面显得厚实细腻，小区域的微渐变增加了版面的质感。

观点:整体画面氛围由低暗色调组成，小亮部分不会影响整体感觉

2.1-5优雅的白色调

柔和的色调让页面看起来明亮温暖，即使颜色很多，也不会造成视觉上的重量。同色相同色的页面搭配作为不同模块的信息分类，既能抓住主体的重点，又能衬托出不同类型载体的内容信息。

观点:色调相同、颜色不同的模块，即使携带不同的信息内容，也能和谐地执行。

2.2相同的配色

这是一种由相同或相似色调的色调变化组成的配色类型，属于与主色调配色相同的技术。不同的是色调分布均匀，没有太深或太浅的模块，色调范围更严格。

在实际设计中，往往采用更为综合的方法，比如整体有主色调，小比例布局会采用相同的色调。以tumblr的发布模块为例。虽然页面有自己的主色，但小模块使用同色相不同颜色的功能按钮，结合色相变化和图形来表达不同的功能点。许多按钮放在一起。因为色调相同，所以模块非常稳定统一。

观点:在综合应用的情况下，整体界面有主色调，按键图标等布局灵活运用相同的配色。

2.3匹配相同的颜色和深度

这是由相同色相的色相差组成的配色类型，属于单一配色。主色配色中同色系配色属于同一技术。理论上讲，同一个色相下的色相没有色相差，而是由不同的色相类匹配而成，可以理解为色相匹配的一种。

以紫色界面为例，用同样的色调在页面之间创建一个图层空。色深的搭配虽然合理，但很难区分主次。因为是同一个色相搭配，颜色的特性决定了心理感受。

观点:同色同深的配色高度统一，但有点枯燥。

三

由对比配色方案形成的配色方案

由对比色构成的配色可分为由互补色或对比色构成的色调对比效果、由白、黑等亮度差异构成的亮度对比效果、由纯度差异构成的纯度对比效果。

3.1色调对比

3.1-1双色对比

色彩对比具有很强的视觉冲击力，容易引起用户的注意，并且经常被广泛使用。

VISA是信用卡品牌。深蓝色传达的是和平安全的品牌形象，而黄色则能让用户感到兴奋和快乐。另外，蓝色降低亮度后再搭配黄色，除了对比度鲜明外，还能缓解视觉疲劳。

观点:对比色彩给人强烈的视觉冲击，结合色彩心理，品牌传播效果更好。

3.1-2三色对比度

三种颜色色调更丰富，通过加强色调来突出某种颜色，更注重色彩区域。

作为网站的主要导航，大面积的绿色有着鲜明突出的形象。二次导航使用品牌颜色对应的两种中色，其中一种亮度降低，使用相同色相的西瓜红作为当前位置状态。二次导航内部对比很强，但不影响主导航效果。

观点:在三色对比中，西瓜红作为一种强调色在小区域显示是非常重要的，区域的大小直接影响画面平衡感。

3.1-3多色对比度

多色对比给人丰富饱满的感觉，配色协调让页面非常精致，有很强的模块感。

Metro style用了很多颜色来分隔不同的信息模块。大模块的面积保持相等，模块内部可以细分不同的内容层次。单色模块只承载一种信息内容，对应的功能图标识别度高。

观点:页面只要在色彩色相对比和色彩面积对比上保持一定比例就可以排序。

3.2纯度比较

和色相比，纯度差，对比色选择多。该设计应用广泛，可用于一些突出品牌和营销的场景。

在页面中心登录模块中，通过降低纯度制作无色的相位背景，然后与红色按钮对比形成纯度差异关系。与色相对比相比，纯色对比的冲突感相对较小，容易突出主要内容的真实性。

观点:把握好比例很重要，所有能变化的元素，比如面积、构图、节奏、色彩、位置，形成强烈的视觉冲突。

3.3亮度对比度

亮度对比接近生活的实际反映，通过环境距离、日照角度等明暗关系，设计趋于真实。

ARKTIS案

亮度对比足以形成画面的空之间的深度层次，表现远近对比关系，高亮度突出近距离的主要内容，低亮度代表远距离的距离。但是亮度差，让人关注到高光区域，展现了药瓶的真实写照。

观点:亮度对比使页面显得更简单统一，而高低亮度的差异会产生距离关系。

总结:

色彩是最能引起情绪共鸣和情感认知的元素。三原色可以混合非常丰富的色彩，配色千变万化。在设计配色时，可以摒弃一些传统的默认风格，了解设计背后的需求目的，思考色彩在页面场景表现和情感交流中的作用，从而有基础、有秩序、有条理地构建配色方案。