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

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

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

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

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

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案

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

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

总结:

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