设计须知｜配色干货大合集

你们的好朋友久久又来了，这次是妥妥的干货分享，文章虽长，设计受用，一定一定要看完哟！

老规矩，还是先来一个阅文前的小测试，在输入法打出“PS”，出来的第一组配词是什么？

毫无疑问，作为一名热衷于设计的小能手，非“配色”二字莫属了。如果你的结果是如此，至少证明在做设计方面花费了一定的心思，如若不是，也该好好反思一下了，设计离不开配色，想在这条路上越走越远，必须将这方面知识收入囊中。

言归正传，开始今天的主题，色彩搭配学的多方面阐述 @在设计路上想进步的你。

Part 01.

认知配色

—

1.1 何为配色？

配色，顾名思义就是如何搭配颜色。如果说排版是设计的躯体架构的话，那么色彩搭配就是赋予设计生命的灵魂。只有通过对配色的理解和灵活运用，才能让你的作品更加协调。

1.2 为何要学配色？

为什么要学习配色呢？

设计不是会PS、AI、C4D等软件就可以了么？我先否认这一点，因为软件只是一种绘图工具，仅仅局限于双手，如果脱离了双手，软件就没有任何的意义。

决定设计的唯一标准是人的大脑，只有从感官上刺激大脑才具有创造性。而色彩所对应的就是人的视觉感官，就如同听觉对一个歌手的重要性。

设计这个行业极为广泛，有人觉得图文打印也属于设计的一部分，其实不然。

就拿设计师与绘图员来讲，其根本的区别在于：前者属于思想者，后者则是妥妥的工具人。从合格到优秀再到资深成为大神，道路漫长，这是一种意识形态的感知，审美的提升需要个人在工作中、生活中不断的积累和吸收。有句话叫：“要画好一幅画，首先要懂得欣赏一幅好画”。

配色是万千设计的基础

在工作中，你是否经常会遇到当两个很喜欢的颜色搭配在一起，却成了“又土又丑”的代表作，其实并不是颜色本身出了问题，问题只是不“相配”而已，就如同柿子和螃蟹，都很美味，却不能同餐而食，谁都没有问题，相克罢了。

就像这张“红配绿”，是不是不忍直视，在处理文字的时候，一般不建议使用互补色，容易引起视觉闪烁疲劳的感觉，文字也不容易凸显。

但是，在有些设计场景中，通过改变他们的饱和度和明度，红配绿也能变得高级。所以，没有最丑的颜色，只有最丑的配色。

Part 02.

配色原理

—

2.1 了解色彩

有没有人知道为什么红绿灯会用颜色去表示，而不用文字来提醒，因为我们大脑处理的优先级是图片优于文字的，如果改成文字，那么大脑的CPU处理复杂度会高很多，交通事故的发生就会直线上升。

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

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

大家都知道色彩三原色为【红黄蓝】，通过三原色的叠加组合，形成新的颜色，依此类推就会得到常见的色相环。

2.2 色彩的三属性

认识了色相环接下来就需要了解一下色彩的属性，色彩有【色相】【明度】【纯度】三个属性，也称为色彩的三要素。

① 色相

色相是色与色之间的差别所在，是区别色彩种类的名称。在原色与间色之间可区分出许多不同的色相，人的眼睛可以辨别出几万甚至几十万种颜色。

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

② 明度

明度是指颜色的亮度，明度越高颜色越亮，反之则就越暗。

在无彩色系中，白色明度最高，黑色明度最低，在黑白之间存在一系列灰色，靠近白的部分称为明灰色，靠近黑的部分称为暗灰色。

在任何一种颜色中添加白色，其明度都会提高，添加黑色，其明度降低。同时其纯度也相应降低。我们所说的“同色系色彩”就是指同一色相中的不同明度的表现。

③ 纯度

纯度也称饱和度，饱和度越高颜色越鲜艳，反之则就越灰暗。

纯度最高的色彩就是原色，随着纯度的降低，或其他某种色彩元素的加入，色彩就会变的暗、淡、浑浊。纯度降到最低就是失去色相，变为无彩色，也就是黑色、白色和灰色。

Part 03.

如何配色

—

3.1 配色方法

久久教给大家几个简单易懂的配色方案：

① 单色搭配

选取一个颜色，通过改变饱和度和明度，形成一种配色，这种配色最为可靠，稳定统一，容易把控。

② 邻近色搭配

色环上60度邻近的几个颜色搭配，因为颜色相近过度比较柔和，组合起来也更加和谐自然。

③ 对比色搭配

色环上120度左右的颜色称为对比色，这样的几个颜色搭配，对比强烈且互相衬托，创造出宁静舒适的设计，赏心悦目。

注：在选择这种配色方案时，确保有足够的对比度，且饱和度和明度可以很高。

④ 互补色搭配

互补色是色环上180度相对的两个颜色，这样的配色，对比强烈，吸引眼球，富有视觉冲击力。

注：但是在使用时，容易使人眼睛产生晕光现象，要注意他们的纯度和明度。

解决方法：降低明度和纯度。

⑤ 三元色搭配

三元色在色环上呈现一个等边三角形，这些颜色的组合比较跳跃，会给你意想不到的视觉效果。

注：页面颜色过多，易产生杂乱无序的感觉。

解决方法：使用色彩黄金配色法则6：3：1的比例。

⑥ 四元色搭配

四元色在色环上呈现一个长矩形，也称双互补色，这种配色方案是所有方案中颜色最丰富的，使用恰当可以带来非常惊艳的视觉效果。

注：这种方案很难协调，如果四种颜色使用量相等，画面会显得很乱，需要对颜色有较强的把控能力，不建议新手设计师使用。

解决方法：需要注意颜色的比例，以一种颜色来主导或抑制其他颜色，效果最佳。

3.2 配色技巧

① 色彩黄金比例

色彩的黄金法则 6：3：1，主色彩是60%的比例，次色彩是30%的比例，辅助色彩是10%的比例。

主色是整个色调的核心颜色，通常也是相对占比最多的颜色，它决定了整体的风格和基调。而副色则是画面中占比相对较小的颜色，它通常起到辅助主色、丰富画面的作用。

假如把一个画面看成一部电影，那么主色就是整个电影的主角，而副色则是除了主角以外的其他配角。

② 黑白灰配色

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

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

这就是为什么黑白色是百搭色的原因，如果你在设计中实在不知道怎么搭配颜色了，选择与黑白灰组合，一定不会出错。

③ 定位配色

什么是定位配色？首先我们需要明确配色目标，配色并非单独存在，而是依附于不同的设计载体中。不同的设计载体，所要达到的目标不一样，就决定了配色理论也会存在差别。

虽然设计是相通的，但是在不同的设计领域进行配色时，依然会存在巨大的区别。比如广告设计的配色理论，放在室内设计上，往往是行不通的。因为广告设计的目标在于传递信息，需要吸引你，而室内设计的目标则是要营造舒适理想的生活氛围。同样的道理，推广设计的配色理论，往往在界面设计时也是行不通的。

不同行业间设计目标的差异，决定了配色目标和理论的差异。

品牌设计：创造品牌概念，留下品牌印象。

广告设计：准确地传递商品、广告等信息。

工业设计：营造产品氛围，引导产品使用。

室内设计：传递生活理念，创造理想的生活氛围。

数字产品设计：传递产品信息，引导用户阅读和操作。

所以，配色的第一步，首先要明确配色目标。当接到一个需求后，不要盲目的去开始设计、配色，可以先和需求方深入沟通，根据品牌行业、产品属性、使用场景、品牌调性、受众角度等因素，确定好设计风格、选定主色调，然后再展开设计，进行配色。

Part 04.

完美搭配

—

4.1 配色网站

小何给大家分享几个配色网站，方法用对，事半功倍，有了配色网站的加持，配色之路会更快更顺利。

① ColorSpace

网址：https://mycolor.space/ 

ColorSpace 是基于渐变风格创作，操作比较简单，只需要输入一种颜色(16进制)，就可以生成几十种不同的渐变配色方案比如我输入黑色(#000000)，点击 generate ，就可以生成几十种颜色，拥有 ColorSpace ，你就相当于拥有了一个渐变配色库。

② Adobe Color  

网址：https://color.adobe.com/  

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

③ Culrs 

网址：https://www.culrs.com/

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

④ Generate — Coolors

网址：https://coolors.co/

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

⑤ brandcolors

网址：http://brandcolors.net/

官方品牌颜色代码最大的收藏。

总结：配色和审美有很大的关系，美术专业生可能对色彩的把控比较好，没学过美术也是可以把配色学好的，平时可以多分析一些配色比较优秀的作品，研究他们的配色比例，提取画面中的颜色，整理一套色板，学好配色是一个不断积累的过程，久而久之便可以摸索出一套属于自己的配色方法。

小何才疏学浅，且文章篇幅有限，难免存在疏漏之处，还望各位读者多多理解。如有疑问或者不同的见解，欢迎大家随时与我交流。

感谢大家耐心阅读，下次再见。

部分配图来源于网络， 如有侵权，请联系删除！

- END -