来源:站酷 作者:乔尹
可以说我们每个人每天无时无刻都在和颜色打交道，作为一名设计师，对颜色更是敏感。色彩的搭配影响着每个作品的成败，所以对于设计师来说，深入了解色彩掌握色彩搭配是一门重要的功课。
色彩是丰富多彩的，每一种色彩代表着不一样的心理和情感，不一样的色彩体现的情感让人们在视觉上心里上的作用都不一样。不一样的颜色碰撞也会给人们产生不一样的心理感受，这是色彩心理学教会我们的。色彩对比在生活中起着举足轻重的作用，所以我们要去深入的了解色彩对比的更多信息内容。包括色彩是什么?什么样的色彩搭配让人振奋人心?什么颜色组合对比是禁忌的?……了解完这些知识后，你就能明白什么颜色搭配组合能让客户或受众满意。
备注：原文中出现的所有案例都带有链接，可点开对应链接单独查看效果。
一、色彩对比的基础知识
不同的颜色可以表达不同的感受，颜色上的对比也有很多，这个跟色彩构成有很大的关系。色彩对比的基础知识主要给大家讲讲几个重要的对比方式：色相对比、明度对比和纯度对比。
1、色相对比
色相即各类颜色色彩的相貌称谓，任何黑白灰以外的颜色都有色相的属性。如朱红、普蓝、柠檬黄等。色相是色彩的首要特征，是区别各种不同色彩的最准确的标准。
色相环是由原色、二次色和三色色组合而成(可看标准24色相环)。色相环中的三原色是由红、黄、蓝，在环中形成一个等边三角形。二次色是橙、紫、绿，处在三原色之间，形成另一个等边三角形。
红橙、黄橙、黄绿、蓝绿、蓝紫和红紫六色为三次色，三次色是由原色和二次色混合而成。
根据上面的色相环可以看出色环上的颜色是多丰富多彩，随意抽取两个颜色，都能形成不一样的对比。因此色相对比又分很多，有补色对比、对比色对比、邻近色对比等等。
(1)互补色对比
在色相环的组成中，相隔 180 度的色彩我们称之为互补色：红与绿互补，黄与紫互补而蓝色与橙色互补。互补色的对比效果强烈、眩目、响亮、极有力，但也需要慎用，因为使用不当易产生幼稚 、原始、粗俗、不安定、不协调等不良感觉。
一般在设计作品中，比较少的设计师会采用互补色来做作品的配色，因为互补色在实际应用中把握不好的话比较危险，容易让人产生不舒服、不协调的不舒适感。也有不少优秀的设计师将互补色运用得非常出色。以下这些知名的标志设计就采用了互补色来搭配的：
(2)邻近色对比
邻近色对比好理解一些，好比黄色跟橙色可以称为邻近色，草绿和果绿也可称为邻近色。色相环上相邻的二至三色对比，色相距离大约30度左右，为弱对比类型。邻近色相对比效果感觉柔和、和谐、雅致、文静，但也会让人感觉单调、模糊、乏味、无力，所以必须调节明度差来加强效果。
邻近色之间往往是你中有我，我中有你。比如：朱红与桔黄，朱红以红为主，里面略有少量黄色;桔黄以黄为主，里面有少许红色，虽然它们在色相上有很大差别，但在视觉上却比较接近。在色轮中，凡在90度范围之内的颜色都属邻近色的范围。
(3)对比色对比
色相对比距离约120度左右，为强对比类型，要比邻近色相对比鲜明、强烈、饱满。丰富，容易使人兴奋激动和造成视觉以及精神的疲劳。如黄绿与红紫色 对比等，但是颜色之间协同统一的工作也比较难做。这种对比不容易单调，但一般需要采用多种调和手段来改善对比效果，不然就容易产生杂乱和过分刺激的效果。
(4)零度对比
零度对比其实也分了几块，比如无彩色对比、无彩色与有彩色的对比、同种色相对比和无彩色与同种色相比四种，这块只要理解下无彩色的概念即可。
无彩色指的就是没有色相的颜色，前面小编说的颜色都有色相，但黑白灰这三种是没有色相的，所以也被称为无彩色。
无彩色对比：如黑与白 、黑与灰、中灰与浅灰，或黑与白与灰、黑与深灰与浅灰等。
无彩色与有彩色的对比：如黑与黄、白与蓝等。
同种色相对：如蓝与浅蓝(蓝+白)色对比，橙与咖啡(橙+灰)或绿与粉绿(绿+白)与墨绿(绿+黑)色等对比。
无彩色与同种色相比：如白与深蓝与浅蓝、黑与桔与咖啡色等对比。
2、明暗对比
明度指的就是色彩的亮度。比如：深黄、中黄、淡黄、柠檬黄等，这些黄颜色在明度上就不一样。颜色有深浅、明暗的变化，这些颜色在明暗、深浅上的不同变化，也就是色彩的明度变化。
两种以上色相组合后，由于明度不同而形成的色彩对比效果称为明度对比。它是色彩对比的一个重要方面，是决定色彩方案感觉明快、清晰、沉闷、柔和、强烈、朦胧与否的关键。
可以看到，明度变化里面也有低中高明度区分的。
Digital Asset 数据产品网站和POCARI SWEAT这两个网站都采用了明暗对比来设计的。
在POCARI SWEAT网站的界面当中，右边的深蓝色显得比较稳重，左边导航部分采用一个明亮的蓝色，左右两边形成了鲜明的对比，这样的界面稳重中又带着轻快，视觉效果也比较好。
3、纯度对比
纯度指的是色彩的鲜艳和深浅程度。纯度是色彩鲜艳度的判断标准，纯度最高的色彩就是原色，随着纯度的降低，色彩就会变暗、变淡。
纯度指的就是饱和度，柠檬黄的纯度是比较高的，当加入一点红色之后就变成橙色，因而柠檬黄和橙色就形成了纯度上的对比。两种以上色彩组合后，由于纯度不同而形成的色彩对比效果称为纯度对比。它是色彩对比的另一个重要方面，但因其较为隐蔽、内在，故易被忽略。在色彩设计中，纯度对比是决定色调感觉华丽、高雅、古朴、粗俗、含蓄与否的关键。
纯度变化里面也有低中高纯度区分。
纯粹纯度上的变化案例比较不好找，因为颜色到低纯度之后颜色本身就变得很脏，色彩本身也不好看。所以很少设计师会去做纯粹纯度上的变化，一般都是结合明度变化加纯度变化。
James Gillen-詹姆斯吉伦设计师个人网站，从界面叠加的玫红色当中可以看到中纯度的玫红和一些比较低纯度的，界面的整体冲击力还是比较强的。
后面的纯度和明度可能比较容易混淆，纯度指的是颜色的饱和度，明度指的是颜色的明暗程度，这样说可能比较好区分。
二、如何选择最佳的色彩搭配
关于色彩对比的重要性，其实不用说应该大部分设计师都知道。色彩对比为受众提供了视觉上的享受。我们可以试想一下，如果整个设计作品都是一个颜色，或者都是一个色系的，那这个作品拿出来得多无聊。
强烈的色彩对比可以比较抓人眼球，特别是在超市的货架上，我们往往很容易被一个色彩对比明显的包装所吸引。网页的界面设计也是，我们更加容易被色彩绚烂，对比明显且好看的界面所吸引。
列举的三个网页界面截图，第一个注意到的其实是最后一个，比较抓眼球，这样的色彩对比让受众有所期待，对该产品或者网站印象深刻。
我们在给一个作品配色的时候，我们会选择多种的配色方案，根据上面介绍的色彩基础知识，我们可以分成：
1、单色配色
单色的配色很简单，这样的界面通常相对比较单调。简单举个例子，我将色环上的颜色排列成一行，方便对比查看：
Nineswiss这个网站设计，采用了单色设计，界面效果比较单调。所以一般情况下我们建议采用单色的时候，可以多用几个同色系的颜色来协调，这个可以采用相关的纯度明度变化的颜色。例如：
LOHBS的这个网站，虽然采用了橙色来做主色，同时利用了其他一些纯度明度上变化的颜色来丰富界面。当然，也用到了部分的邻近色，比如黄色。但是这种配色方案可以增加视觉的冲击效果，增加画面的丰富性。
2、互补色配色
互补色的使用，前面说过了，冲突性会比较强，所以使用中需要谨慎。
运用要领：互补色， 75%+25%+ 5%。
由于互补色之间的对比相当强烈，因此在实际运用过程中，配色的比例相当的重要。详见下图：
当两个互补色出现在画面当中的比例各为50%的时候，画面的冲突性比较大，这样的配比对比是及其不舒服的。当橙色占三分之一和四分之一的时候会比之前二分之一占比的视觉效果要好很多。最后一个图在互补色中间加了一个白色做协调，使得整体的过渡更加柔和，这样的搭配是最舒服的。
在实际的运用过程中，我们可以选择其中之一的颜色为大面积，构成主调色，而另一颜色为小面积作为对比色。日本的设计师 まりっぺ也针对色彩的配色提出比例原则 75%、25%与 5% 的配色比例方式 ，这个原则跟上面说的一致，两个互补色各占75%和25%，剩下的用5%的过渡色来做画面的协调色，使得主次分明。来看看实际应用中的作品：
奥塞梯馅饼的官网就是用了红绿互补色的对比设计的。绿色的占比面积比较少，中期用了大量的黄色做协调，整个网页界面非常的出色。
3、邻近色配色
邻近色配色这个方案用得比较多，因为邻近色有相似的颜色特点，但又各有特性，所以这样的搭配方式比较受欢迎。比如黄色、橙色、红色的组合使用，绿色和蓝色的组合搭配。下面列举部分常用的邻近色搭配方案：
以上列举的都是3种的邻近色搭配，在实际应用中切勿平均比例去应用，这样出来的界面效果一定不好看。具体比例的建议可以一个大的为主其他两个颜色为辅助色做点缀。
这里没有列举到紫色，不是说紫色不常用，紫色在多数网页当中出现都是比较特殊的，邻近色上比较搭配的是蓝色和红色，但是一般紫色出现的占比面积大的时候，蓝色和红色一般占比面积会比较小，这个就不单独拿出来讲解了。
Kresko食品网站应用了邻近色的对比，黄色的界面中添加了橘色和红色，邻近色的运用会让整个页面比较协调，看起来也比较舒服。
4、零度对比配色
从上面讲解的零度对比分很多种，常见的有无彩色对比、无彩色与有彩色的对比、同种色相对比和无彩色与同种色相比四种。常用的基本是无彩色与有彩色的对比。
零度对比的配色比较个性，给人一种比较冷酷的视觉感受。无彩色虽然无色相，但它们的组合在实用方面很有价值。其中无彩色和有彩色的搭配使用会比较出色，如果是使用无彩色的话，建议跟有彩色搭配比较好。
