所谓配色达人，就是一次出48个方案

@研习设K先生 ：说到色彩或配色，其实无论是方法还是理论都可以算作是规律的总结，但是同样的规律对于有的人来说吸收起来就比较容易，而对于有的不会灵活变通的人就只能自己在那研究来研究去，最后还是丈二的和尚摸不着头脑。不过没关系大家也不用灰心，因为今天我们要为大家讲解的这个配色规律非常简单，简单到什么程度呢？可以说只要你会数数，能从一数到三就可以，到底是什么内容呢？就是从色彩的数量着手进行配色训练。

相信大家都有过这样的经历，就是上学的时候学习英语，最开始学的是什么？就是先从二十六个英文字母学起，因为英文字母是这个语言的根基。

△ 字母

然后是什么呢？就是由这些字母组成的单词，也就是让我们背单词，相信大家都有过这个痛苦经历。

△ 单词

最后再由单词组成句子，就是这样一个顺序。

△ 句子

再举个例子，比如我们学习平面构成，最开始都是先学点，然后由点到线，最后再由线到面。

再比如我们赖以生存的地球上，有动物、植物、矿物质、山川河流等等，根本说不完。

但是它们能够和谐共处，这当中一定有共同的因素，全世界的科学家都在找这个东西，最先找到的是原子，一切都是由原子构成的，但是很快就被打破了，原子一打破，里面还有更小的东西。

可是我们的老子就高明多了，它只讲四句话：道生一，一生二，二生三，三生万物，以后就不讲了，因为世间万物都是这么发展出来的，所以不需要讲。

运用到配色中也是同样的道理，比如我们可以由一个色彩，延伸出两个色彩，再由延伸出来的色彩产生更多的色彩，就像裂变一样。因为茫茫多的色彩我们是不可能在短时间内研究透的，那我们就抓住配色的重点，就是色彩的数量。

虽然配色从理论上来说并没有数量限制，但是你只要能将单色配色、双色配色和三色配色做好，其他四色、五色即使再多的色彩，只要掌握一定的技巧和规律都能够轻松驾驭，因为它的根基和原理是不变的。

单色

首先我们先来看单色配色，单色配色并不是狭义上的只使用一个颜色，而是广义上的单色，使用起来比较简单，并且很容易产生和谐的配色效果。

  1. 有彩色+黑白灰

最明显、最直接的单色配色就是一个有彩色加上黑白灰。可能有的人会想，这怎么能算单色，明明好几个颜色呢？

因为当有彩色作为背景的时候，多数情况下上方的文字色都是无彩色，所以这种情况的无彩色可以忽略不计，不算做颜色，毕竟这个画面给人最强烈的感觉就是有彩色的属性，黑白灰只是为了让人识别信息。

比如这个海报就是有彩色粉色作为背景，上方配上黑色的文字，非常简单直接。

这个海报就是有彩色蓝色作为背景色搭配黑白灰。

这个海报相反是以灰色为背景，上方的元素使用了有彩色加白色。

  2. 有彩色+不同纯度

第二种形式就是一个有彩色搭配这个颜色的不同纯度。

这种同色相不同纯度的搭配整体效果非常和谐，但是需要注意的一点就是纯度的跨度值不能太接近，因为如果太接近的话文字的识别度就会降低。

这个海报的背景色使用的是纯度较高的粉色，上方叠加的文字使用的就是降低纯度之后的颜色。

这个海报的背景色就是由四个由深到浅不同纯度的颜色形成的色块，整体为蓝色调。

这个海报的背景是纯度较低的绿色，上方梯形的颜色纯度相对要高一些。

  3. 有彩色+不同明度

第三种形式的单色配色就是有彩色和它自身不同明度的搭配。

这种搭配效果跟同一颜色的不同纯度看上去差不多，也是需要注意两种色彩之间的明度关系，不能过小以免影响识别。

这个海报上层的色彩使用的就是明度高的黄色，下层带肌理的黄色明度偏低。

这个海报中人物的剪影虽然带有微弱的渐变，但是整体还是明度较低的，而文字的蓝色明度较高。

这个海报的背景色是低明度的深绿色，上方的信息除了非常少的白色就是明度较高的绿色。

  4. 有彩色+不同色调

还有一种形式就是有彩色加不同色调。在具体配色的时候通常不需要去单独调整纯度明度，可以直接调整色调，更加方便快捷。

使用同一个色相的不同色调往往操作性更强，因为限制比较少可能性会更多。可以根据版面的配色效果来调整纯度和明度，但是需要注意的是具体使用什么色相，这个要根据你的设计内容和气质来决定。

这个海报就属于单色配色的形式，整体为绿色调，通过不同色调来丰富画面的层次。

这个海报同样也是，插图和图片使用的都是黄色的不同色调。

这个海报单色的效果更明显，使用的是蓝色的不同色调。

双色

接着我们再来看双色，配色难度相对来说提升了一个等级。

  1. 黑白

最简单的双色就是白加黑，相信很多人在做设计的时候通常都是先用黑白来代替，最后再配色。

黑白没有太多的情感属性，更多的就是白色和黑色自身的特质，至于整体的感觉是什么，那就要看是黑色的面积大一些还是白色的面积大一些了。

这个海报就是黑底白字，上方的元素通过黑白来展现层次，没有使用其他颜色。

这个海报也是黑色背景，人物图片也处理成黑色调，结合白色块和交替的黑白文字来丰富画面。

这个海报使用的就是纯白色背景，上方黑色文字，可以说非常纯粹了。

这个和上一个差不多也是白底黑字，只不过文字的数量比较多而已。

  2. 同类色

而有彩色的双色可以根据色相关系来划分，如果大家看过我们之前的教程应该都耳熟能详了。

对比最弱的双色搭配就是同类色，也就是在色相环上距离15°左右的颜色。虽然是最弱的双色搭配，但是可以通过拉开纯度和明度的差异来增强对比。

这个海报就是同类色双色搭配，背景色为橙黄色，上方人物图形为黄色。

这个海报也是同类色双色搭配，但是背景看上去跟上方的深色对比很强，这是因为调整了纯度和明度。

这个海报的文字色并没有使用同一个色相的不同色调，而是在色相上稍微有些差异，也就是同类色。

  3. 近似色

比同类色对比稍强的双色搭配就是近似色，也就是在色相环上位置大约在45°左右的颜色。

近似色所产生的配色效果相对来说也是比较和谐统一的。

这个海报的背景色和上方的线条色使用的就是近似色，只不过线条的黄色降低了明度增加了对比，但是线条的形态又适当的减弱了对比。

这个海报的背景色是橙色，上方的文字色是黄色，保证了识别度的同时又让整体的效果协调统一。

这个海报和上一个海报类似，也是红黄两色的搭配，但是这里又使用了不同色调。

  4. 中差色

中差色，也就是选取在色相环上位置大约在90°左右的两个色彩。

中差色的对比强度位于中间位置，属于比较中性、安全的双色搭配，既有足够的色彩对比，又不会过于刺激强烈，还具有一定的和谐性。

这个海报中图形的绿色和背景的蓝色就属于中差色对比，上方文字的深蓝色是在背景蓝色的基础上通过增加纯度降低明度所得到的，这也是一个双色配色的小技巧。

这个海报的配色也是中差色对比，在大面积深蓝色背景上使用绿色，由于是中差色对比并且还有无彩色白色做调和让整个版面的配色美观协调。

这个海报也是蓝色和绿色的中差色。其实大家不难发现，并不是色彩越多就越好，只要配色合理都可以得到很美观的效果。

  5. 对比色

对比色，也就是在色相环上大约120°左右的色彩。

对比色的对比效果强烈，属于使用较多的双色搭配，最常见的就是红配绿，还有就是红配蓝也是典型的对比色。

这个海报的标题文字使用的就是对比色，只不过调整了纯度和明度。所以大家不要一想到对比色就是那种大红大绿的，完全可以通过调整来减弱对比。

这个海报通过紫红色和蓝色的对比色关系以及相等的面积对比来强调色彩印象。

这个海报同样也是使用了对比色。

  6. 互补色

最后是对比最强的双色搭配，也就是互补色配色，互补色在色相环上的距离大约在180°左右。

互补色的对比效果最强烈，形成的配色效果非常刺激并且具有冲击力，合理的运用在相关的设计内容上可以极大的引起注意力，给人眼前一亮的感觉。

这个海报使用的配色就是红色和青色的互补色对比，但是降低了纯度，背景的白色空间起到了缓冲作用，互补色的叠印又丰富了画面的层次。

这个海报使用的双色也是互补色关系，通过纯度和明度的调整也可以产生很和谐的效果。

这个海报的图片色是黄色，上方的文字色使用的是蓝色，也是一种互补关系。

三色

双色之后再升一个难度就是三色，三色搭配也有很多种，这里总结了四种比较具有代表性的。

  1. 黑白灰

首先第一种就是黑、白、灰。理论上来讲黑白灰的配色可以看作是单色，也可以看作是双色，也可以看成三色，都对，为了便于大家理解这里给它们划分的更具体一些。

如果说黑白配色给人的印象是强烈、直接，那么黑白灰的配色会缓和许多，给人更多的是一种层次感和递进关系。

这个海报整体分为三个层次，最底层是黑色，然后是灰色，最上层是白色。

这个海报跟上一个差不多也是黑白灰配色，只不过背景换成了白色。

这个海报的黑白灰不像前两个那么直接，而是通过图形和图像的色调来表现的，但是整体上也是黑白灰配色。

  2. 近似三色

有彩色的第一种三色形式，近似三色。

顾名思义，近似三色就是三个近似色组合在一起的色彩搭配，比如画面中的这几组配色都是近似三色。

这个海报的背景是绿色，上方插图的颜色使用了红色和黄色，整体的配色属于近似三色。

这个海报中的图形使用的也是近似三色，既能很好的区分色块，同时又能达成整体协调统一的效果。

这个海报属于纯文字版式，通过色块来增加变化，使用的配色类型也是近似三色。

  3. 对比三色

对比三色，也是使用比较多的三色搭配。

三个对比色组合在一起对比效果强烈鲜明，通常给人的第一印象很抢眼。但是当色彩使用数量从三色往上开始，我们就要注意一个我们之前讲过的色彩概念了，就是调和，因为对比强烈，所以色彩的纯度和明度就显得格外重要。

这个海报中使用的三个颜色就是典型的对比三色，红绿蓝。

这个海报也是红绿蓝的对比三色，但是跟上一个海报相比色调要更亮一些。

这个海报有些复古的感觉，颜色上也是使用的对比三色，有些鬼魅的感觉，跟主题也是相符的。

  4. 分裂互补

前面我们讲过互补色就是在色相环上距离180°左右的色彩，而分裂补色就是一个颜色和它对应的补色两侧相邻的颜色搭配。

这种配色既有补色的对比同时又通过分裂出的补色来缓和这种对比，可以起到适当的中和作用，通常配色效果都很好。

这个海报使用的三个颜色就是分裂补色，整体色调统一配色效果非常和谐。

这个海报的背景使用了灰色，在上方使用了分裂补色的有彩色，通过面积的分布来做调和。

这个海报虽然使用了不同色调，红色的纯度和明度比较高，但是整体分裂补色的配色特征还是有的。

关于单色、双色、三色的几种最常见的形式已经介绍完了，这些都是最基本、最实用的方法。至于四色、五色，甚至更多的色彩，其实已经跟色相的关系不大了，更多的是使用色彩调和，通过色相的对比以及调和的缓冲来达成协调美观的配色效果。

案例演示

最后我们来看看案例演示。

这次我们设计一个品牌时装的网页首屏，首先创建版面拉出网格，这里我们使用的十六栏网格。

先用黑白灰创建版面，填充色块。

然后将文字内容编排到版面上方，根据网格约束摆放位置，提取关键信息放大处理编排到版面下方。

因为要使用到图片，所以要留出图片的空间，先用色块来代替大致的摆放位置。

然后向下移做一些出血处理，并且增加图片的大小对比，打破版面呆板的布局。

将图片填充到色块位置。

下方底层文字由于被图片遮挡影响识别，所以我们可以在空白处做一个重复编排。

最后将其余信息依次编排进来，这个版面就设计完成了，这个黑白效果还是不错的。这里教大家一个小技巧，就是你在设计的时候先用黑白灰来填充颜色，如果这个版面在黑白灰的状态下看上去都很美观，那么其实你之后的配色只要不是太差基本上都不会出问题，而如果你的版面在黑白灰的状态下看上去都很别扭，那么一方面可能是色彩面积和布局的问题，另一面可能就是版式的问题，这个小技巧可以帮助大家做自我检查。

版式我们设计完了，接下来我将本期教程中的所有配色方法都用在了这个版式上。

  1. 单色应用

首先是单色中的第一种方法，有彩色加黑白灰。

有彩色加不同纯度：

有彩色加不同明度：

有彩色加不同色调：

  2. 双色应用

然后我们再来看双色，首先是黑白配色。

然后是同类色：

近似色：

中差色：

对比色：

互补色：

  3. 三色应用

最后是三色，首先是黑白灰。

然后是近似三色：

接下来是对比三色：

最后是分裂补色：

这就是我们所谓的彩虹稿，开个玩笑，不过大家自己在做配色练习的时候，还是有必要多去尝试的。至于在实际工作中具体选择什么样的配色，还要根据色相的气质来决定，比如我设计的这个页面是关于女性和春装的，所以绿色、粉色、黄色都是可以的。

本期教程到这里就结束了，主要为大家讲解了配色训练的一个流程，就是从色彩的数量出发，先从单色开始练习，然后是双色，最后是三色，如果这几种数量的配色没问题的话，下个阶段就可以练习更多的配色，四色、五色甚至是多色。其实无论是多少种颜色只要你了解了色彩之间的关系以及配色的规律，那么在你眼中都是一样的，并且在自己练习的过程中也可以收集相关的设计作品，长此以往的做这些收集和配色训练，你的配色能力一定会有所提高。

欢迎关注研习设的微信公众号：「Yanxishe2017」