• 配色永远是一个设计师最头疼的问题，配色永远配不好，并且颜色用起来显得非常脏，像下面的这张图片，就是特别明显的那种绿的刺眼的的配色，看久了心特别累。

那我们今天就理论基础开始，到后面结合一些案例来讲讲配色的方案，毕竟没有这些理论的支撑，恐怕后面配色也不会配。

关于色彩的三个属性

色相 / 明度 / 纯度

• 色相

色相是指物理学或心理学上区别的红、黄、蓝等色感的要素之一，同时也只颜色本身，将色相按照波普上顺序进行排列，收尾相连，形成的环装图形，称为“色相环”。在色相环确定了色相之间的关系后，配色就会变得简单很多。

• 明度（亮度）

明度是指色彩的明亮的程度，在任何颜色中添加白色，明度上升，添加黑色，明度下降。因此，色彩中明度最高的色白色，明度最低的是黑色。白色-黑色的灰度色标是明度差异的表现。同时明度也是决定文字可读性和物体外观的重要元素。两种色彩之间的差别，明度方面的对比越强烈，色彩之间的交接部分就明显.

• 纯度（饱和度）

纯度是指色彩的鲜艳程度。新鲜水果的那种鲜艳、颜色的色彩代表是“高纯度”，树汁和泥土等天然染料那种朴素、淡雅的色彩代表“低纯度”。纯度越低，颜色浑浊，纯度最低的是灰色。纯度的高低容易形成不同的气质，一般来说，纯度越高，越有活力，充满朝气，纯度越低，则容易给人成熟稳重的印象色轮的基础知识

白光由可见光汇聚而成，可见光则是广谱中的拿到彩虹，将这道彩虹围城圆形，就是色轮了。我们将赤橙黄绿青蓝紫无穷的渐变简化，成为具有12种基本的颜色色轮，就跟我们美术课用过的颜料、彩铅似的。

将这个色轮的明度，饱和度降低，可以将这个色轮的宽度变得更宽，色域更广，我们常说的降低饱和度，降低明度，也就是这个意思，如图所示

了解了原色，间色，复色的概念之后，我们再来了解一下如何通过色轮上的颜色关系的表达进行配色。

• 1.同类色

同类色是基本的颜色关系，也是成功设计必备的搭配，他们都是属于同一色系，只不过加入了黑色或者白色或者灰色（无色彩）而已，也就是说明度、纯度、色相不同。

• 2.近似色

近似色在色环上是相邻的，虽然看起来很鲜明，但因为二者相邻，由近似色的原色、间色混合而成，所以所能营造出低对比的和谐分为。近似色的特变是丰富，可选且多易于掌握、使用。

• 3.互补色

再色轮上相对的被成为互补色（对比色），他们能造成强烈的反差，也意味着难以驾驭。洽淡的使用可以相得益彰增添活力，充满能量。

讲完工具，我们来讲讲怎么去配色

• 单色配色法：

这个配色最常用的方法就是先确定一个你所想要用的主色调，然后再这个主色调添加10-%50%不透明度的白色或者黑色图层，组成一套配色方案。围绕主色进行配色的设计是遵循这“少即是多”的设计黄金法则，是一个非常不错的选择。

这样的配色方法能够非常好的增加我们设计中的层次，等到慢慢熟练后，我们就能够直接再HSB模式中进行调色，只是我们保证最终生产的颜色在同一色系中，我们就能够得到一个非常协调的配色方案了。

单色配色法的效果：

（以上案例均来自网络，如有侵权，请联系删除）

• 近似色配色法：

近似色配色法就是选取同主色相邻的颜色组成一套配色方案。此时，我们往往会去参考色轮。近似色尤其适合软件内容国语单调乏味的情形。使用相似的颜色可以提供视觉上的变化，活跃界面氛围。

（以上案例均来自网络，如有侵权，请联系删除）

• 互补色配色法：

互补色配色法就是选取对比色相对较强烈的颜色进行进行配色，这一种方法也比较难掌握。我们常说的“红配绿”就是一组互补色。由于对比强烈，能够瞬间激活界面中的气质，但却很容易产生视觉上的刺激与疲劳，应谨慎使用。

有时候我们可能无法避免会用到互补色配色，但对比度太高又显得扎眼，那我们该怎么办？我们可以降低的饱和度，或者调整比例面积。

• 直接吸取大自然的颜色：

很多时候，大自然所呈现出来的配色是非常美妙的，而且因为风景的颜色大家一直都在观察着，所以涉取出来的使用后并不会让人产生方案。所以身为设计师的我们，也要学会去利用美妙的大自然带给我们的颜色。

这个方法厉害了。具体方法如下：

• 产品色吸取法：

当我们完全没有想法的时候，我们可以直接吸取产品的颜色来进行调整，这样配出的颜色和产品更搭调。

• 最后总结一下：

配色好的界面有什么特点：主色调明确突出，一眼就能看出来，不超过4钟颜色，注意色彩的比例

最后分享一些在线配色网站：

COLOURlovers（www.colourlovers.com）

Adobe Color CC（color.adobe.con）

Color Metters (www,colormatters.com)

paletton(www.paletton.com)

Color Explore(www.colorexplore.com)