配色之道—设计师的配色技巧

了解色彩

一般在设计中，我们首先是通过视觉去获取各种信息，其中色彩是十分重要的因素，除了形状、大小之外，我们经常会通过色彩对事物的状态，情感做出判断。有时色彩可以直接影响整个设计画面的好坏。因此，在设计中色彩是非常重要的元素，也是针对目标群体而进行不同的设计时的重要因素。

色彩传递信息的速度是非常快的，在进入眼球的瞬间就可以在人的脑海中形成一种印象，不同的颜色传递出的表现力与情感也是不同的。色彩被誉为是一种可以激发情感，刺激感官的元素。

在进行配色实践之前，对于色彩本身的理解十分重要，了解色彩的性质之后，才会让我们对配色技巧有进一步的理解。

色彩的属性

色彩有色相、明度、纯度三个属性，称为色彩的三属性，色彩可以根据这三个属性进行体系化的归类。

• 色相

色相顾名思义就是我们所知的色彩本身，将色相按照波谱上的顺序排列，首尾相连，形成的环状的结构成为“色相环”。色相环上位于180度位置的色彩称为互补色，位于120度的颜色称为对比色，彼此相邻的颜色称为邻近色，像红色、橙色、黄色这样邻近的颜色称为类似色。

色相大体上可以分为冷色系和暖色系两个系列，紫色与绿色称为中间色，他们本身不能单独营造冷暖的印象。

• 明度

明度是指色彩色明亮程度，在色彩中明度最高的是白色，明度最低的是黑色。在任何一种颜色中添加白色，其明度都会升高，添加黑色，其明度下降。我们所说的“同色系色彩”就是指同一色相中的不同明度的表现。

• 纯度

纯度是指色彩的鲜艳程度，同一种色相中纯度最高的色彩称为“纯色”，随着纯色中其他某种色彩元素的加入，纯度不断降低，色彩由鲜艳变浑浊，纯度最低的色彩是灰色。

我们看到下图中，位于纯度最右端的是纯色，最左端的是灰色(无彩色)。

有彩色和无彩色

色彩大体上可以分为有彩色和无彩色两类，无彩色是指黑、白、灰这三种没有色相属性和纯度属性的颜色，有彩色是指拥有色彩三属性的全部颜色。

无彩色中明度最高的色彩是白色，最低的是黑色。无彩色不含纯度属性，所以可以与任何颜色搭配。

色调

色调是指颜色的浓淡、强弱程度，是通过色彩明度和纯度综合表现色彩状态的概念。

色调可以分为明清色调、中间色调和暗清色调三大类。明清色调是在纯色中混合白色形成的色调，中间色调是在纯色中添加灰色形成的色调，暗清色调是在纯色中混合黑色形成的色调。

配色方法

色彩之间的搭配大概可以分为色彩与色彩之间相互调和的配色和衬托某种色彩的配色两种。

• 色系划分

通过色系划分可以分为有主导色彩的配色和有主导色调的配色两类。

有主导色彩的配色是由一种色相构成的统一配色，可以分为同色系配色和类似色配色两种。

有主导色调的配色是由同一色调构成的统一配色，可以分为浅色调配色和暗色调配色两种。

• 对比配色

由对比色相构成的配色，可以分为由互补色或相反色搭配构成的色相对比效果，有黑白灰等明度差异构成的明度对比效果和纯度差异构成的纯度对比效果。如下图所示。

其中色相对比又可以分为：互补色对比、邻近色对比、对比色对比，以及零度对比。

互补色对比：互补色的对比效果强烈、眩目、响亮、极有力，但也需要慎用，因为使用不当易产生幼稚 、原始、粗俗、不安定、不协调等不良感觉。

一般在设计作品中，比较少的设计师会采用互补色来做作品的配色，因为互补色在实际应用中把握不好的话比较危险，容易让人产生不舒服、不协调的不舒适感。

邻近色对比：色相环上相邻的二至三色对比，色相距离大约30度左右，比如：朱红与桔黄，朱红以红为主，里面略有少量黄色；桔黄以黄为主，里面有少许红色，虽然它们在色相上有很大差别，但在视觉上却比较接近。

邻近色相对比效果感觉柔和、和谐、雅致、文静，但也会让人感觉单调、模糊、乏味、无力，所以必须调节明度差来加强效果。在色轮中，凡在90度范围之内的颜色都属邻近色的范围。

对比色对比：色相对比距离约120度左右，为强对比类型，要比邻近色相对比鲜明、强烈、饱满。丰富，容易使人兴奋激动和造成视觉以及精神的疲劳。但是颜色之间协同统一的工作也比较难做。这种对比不容易单调，但一般需要采用多种调和手段来改善对比效果，不然就容易产生杂乱和过分刺激的效果。

零度对比：零度对比其实也分了几块，比如无彩色对比、无彩色与有彩色的对比、同种色相对比和无彩色与同种色相比四种。

强调色配色

强调色是在同色系的配色中，添加强调色来突出画面的重点，强调色可以是对比色或者互补色，或者是纯度、明度相差较大的色彩。确保是强调色的前提就是要保证强调色的面积运用要比较少。

配色中的问题

下面列举了一下在配色中我们也经常会遇到一些理论解决不了的问题与解决方法。

1.互补色配色容易使人眼产生晕光现象（解决方法：降低明度差别）

2.页面颜色过多，产生杂乱无序的感觉（解决方法：克制用色，采用6：3：1的色彩配比 ）。

3.文字的可读性，在颜色对比的使用过程中，一定要注意文字的可读性。切勿用互补色来处理文字，因为会引起视觉闪烁的感觉。

4.高饱和度的色彩，会让人产生“幻觉”！让人产生视觉疲劳。（解决方法：避免大面积使用高饱和度的色彩）。

5.避免使用荧光色（尤其在UI界面中，避免使用荧光色）。

禁用色

这些区域的颜色不易控制，在没有驾驭好基础配色之前，尽量少用。

每个人对禁用色的运用区域都有不同的理解，但是他们的一个共同特点就是禁用色集中在右下角的区域，这个区域的颜色靠近黑色区域，在配色上属于暗清区域，大家学过画画的人都知道，黑色添加在别的颜色中较多的话，整个颜色就会显得很“脏”，其实在我们的拾色器里是一样的道理，在这个区域的颜色我们都尽量避免使用。

检验配色

谈了很多配色方法，那么我们在设计中如何检验自己的设计图的配色是否合适呢？在这里我分享一个自己的检验方法，就是将自己的设计图进行去色处理，分析画面的色彩对比关系，保证整个页面的色彩比例和画面的中心突出。

如下图所示，可以看到左一图整体是一个比较明亮的风格，单独看每个颜色都是很好看的，但是组合在一起整个画面就很“飘”，可能我们在设计中经常会遇到这样的情况，自己很难审视出自己画面的问题所在，所以去色之后，如右二所示，我们就可以看到画面色彩只剩黑白灰三种色调，和我们画素描一样，我们很容易看出，画面的黑白灰关系明显不够，和右边的画面对比，整个画面都偏灰，那么很容易找到这个画面的问题，就是暗色部分不够，我们就需要加强画面中的色彩对比，调整暗部的颜色比例。

配色积累

学好配色是一个不断积累的过程，所以在平时我们可以分析一些配色比较优秀的作品，去提取别人的画面颜色，整理成色板，在拾色器中看这些色彩的区域和比例，找配色方法和规律，久而久之便可以摸索出一套自己的配色方法。

配色网站

最后分享给大家一些整理出来比较好用配色网站。

Adobe Color  https://color.adobe.com/  

Adobe Color通过拖拽色轮或输入自定义色值，我们可以创造出基于相似、互补、三原色等不同色彩规则的配色方案。除此之外，还支持CMYK、RGB、HSV多种色彩模式的配色调整。

Culrs  https://www.culrs.com/

Culrs是一个综合型的配色网站，可以通过邻近色、三色、四色和单色来搜寻灵感配色。除此之外，每种色彩规则下还有明暗分类，相当方便。

Generate — Coolors  https://coolors.co/

几秒钟之内创建，保存并分享好看的配色方案。

希望看了这篇文章对大家之后的配色有所帮助～

参考文献：

配色设计原理【日】奥伯斯科编辑部（Obscureinc）