叮~新鲜出炉的配色攻略在这里

大家好，我是莫宁。

都说设计的三大要素是：版式，配色，字体​。

既然上一篇已经讲过了字体，那么今天就来讲该如何配色吧。

字体篇：如何在平面设计中选用适当的字体

在公众号内回复【字体】便可获取优质字体库哦。

了解色彩

色彩有三要素：色相、饱和度、明度。

1.色相：

色相即色彩本身，比如：红橙黄绿青蓝紫就代表了七种不同的色相。

2.饱和度：

色彩的鲜艳程度。饱和度越高，画面的色彩鲜艳程度就越高；饱和度越低，画面的色彩就越寡淡。

3.明度：

色彩的明暗程度。明度最高时画面会呈现纯白色，反之则呈现纯黑色。

在这里只是为了突显效果，方便大家理解才会做了较大的调整。但是我们实际操作的时候切记不能这样，否则会使画面过于夸张，有冲击性太强。

在PS的拾色器中，垂直方向是明度，横向是饱和度

而H、S、B则分别代表着色相、饱和度、明度

其次要讲的是色彩在画面中充当的角色：主色、背景色、衬托色、强调色。

主色：指在配色中占支配地位的色彩，或者是说主体上的颜色。通常情况下，主色是配色中使用面积最大的。常用于主要组件、组件背景、大面积色块等。

背景色：背景色是一个页面的基础底色。背景色主要是作为背景而存在的，所以它最好不要过于抢眼。

衬托色：衬托主色的色彩，只要达到衬托的目的即可。

强调色：强调色是在主色以外起强调作用的色彩，主要用于修饰和对比。

了解完色彩的基础知识后，就可以开始学习五种配色方法了。

1.单一配色法：

整个画面基本上只选取了一种色相。只改变色彩的饱和度和明度，使得画面的色彩富有变化和有层次。

2.近似色配色法：

是指在色环上相邻位置的颜色进行搭配。这种配色对比柔和，能使画面更加和谐，常被用于网页或Banner背景。

3.互补色配色法：

在色环上相差180°的颜色进行搭配，两种颜色在视觉上形成对立互补关系。页面设计中，通常使用其中一种颜色作为主色或背景色，另一种颜色则作为强调色或衬托色，相辅相成。

4.分裂补色配色法：

这个配色方法和上一个类似，但会在补色的基础上再加一种近似色进行搭配。如下图，选择黄色的话，那么你下一步需要选择黄色对面的位置相邻的两个颜色，也就是蓝色和浅蓝。

5.三色配色法：

在色环上彼此相距120°，即形成一个等边三角形的三种颜色搭配，这种配色方法对设计师的色彩把控能力要求比较高。

理论部分讲完了，接下来就开始讲配色实操。

为大家介绍三种适合新人的方法：

一、网站配色法

通过配色网站或配色软件提供的配色方案来作为自已设计时的用色。

推荐三个我自用的配色网站：

http://colorhunt.co/popular

https://webgradients.com/

里面有超级多好看高级的渐变色方案哦~

https://colordrop.io/

大家可以尝试用网站上提供的配色方案来寻找灵感或者制作页面，说不定会为你的设计加分哦！

二、借鉴配色法

首先要说明的是：借鉴≠抄袭。

前期可以多参考一些优秀设计作品的用色，去学习设计大佬们是怎么样搭配的。比如你很喜欢一张海报的配色，就可以在画面中用吸管取色，然后应用到自己的作品中去。

三、参考色卡

可以参考现成的优秀配色色卡。当然，不能随随便便地直接乱吸一通，还是要根据作品的风格以及想要传达的内容和情感来选取配色方案。

文末福利：

莫宁已经为大家准备了精心整理好的色卡、配色软件和配色网站合集，关注公众号：莫宁设计研习馆，发送私信【配色】即可获取哦！

总结

因为人的眼睛对于色彩非常敏感，所以一个好的配色方案能够让你的设计锦上添花，让人眼前一亮。希望本期配色教程能够帮助到大家！请继续关注【莫宁设计研习馆】哦~

原文链接：https://mp.weixin.qq.com/s/wJ35WDLE94SBORxD8gbycA