为什么你的色彩搭配总是杂乱无章?因为你没明白这点

来源:设计前沿 作者:平凡人 原创投稿 时间:2017-08-12
作者:平凡人 通过邮件投稿本站(设计前沿网) 如转载请注明作者及出处  
作者微信公众号:妙匠课堂  作者从事PS设计教学多年,主要擅长色彩搭配。 教学方式、文章风格风趣幽默、通俗易懂。

为什么你的色彩搭配总是杂乱无章?因为你没明白这点

很多学习设计的同学都有这样一个疑问?

为什么我的色彩搭配总是看起来杂乱无章,而网上那些大神做的图片色彩搭配都很协调、合理看起来非常舒服,自己却找不到原因的所在。

今天这篇文章就来为大家揭开大神们背后这一张神秘的配色面纱。

首先,我们来看这张图片,它第一眼最吸引你眼球的是什么?

31f60004cc83e37350a3.jpg

请点击此处输入图片描述

是不是这张图片总体的色彩倾向,大范围的色彩效果?

没错,这个我们称之为——色调。

色调是颜色的重要特征,它决定了一幅画的基调和氛围。

它是色相、明度和饱和度的组合,这其中任何一种因素起主导作用我们都可以称之为某种色调。

无论我们在画面中用了多少种颜色,只要饱和度和明度保持统一,一幅图的配色就可以达到和谐自然。

在色调里面我们会涉及到三个因素:色相、饱和度、明度它们所代表的英文字母分别为(HSB模式)。

接着来看一下这三个因素分别是什么意思。(只有让大家明白它们的意思之后我才能带你装逼带你飞)

 色相(H)

色相,即各类色彩的相貌称谓。比如:红、橙、黄、绿、青、蓝、紫这些颜色都统称为色相。下面这个就叫色相环。

3213000147855c984a16.jpg

请点击此处输入图片描述

  饱和度 (S)  

饱和度,是指色彩的鲜艳程度,也称色彩的纯度。饱和度取决于该色中含色成分和消色成分(灰色)的比例。含色成分越大,饱和度越大;消色成分越大,饱和度越小

拾色器最右侧的颜色含色成分是最大的所以饱和度皆为最高,反之左边灰色成分比例最大所以饱和度最低

31f60004cc84c661ce93.jpg

请点击此处输入图片描述

 明度(B)

明度,是眼睛对光源和物体表面的明暗程度的感觉,主要是由光线强弱决定的一种视觉经验。

在拾色器中最上端的位置的选色皆为最高明度,反之最下端的明度最低。

32090004aeb445c38acf.jpg

请点击此处输入图片描述

了解完色调的三个因素之后......

我们应该干什么呢?

什么?文章不是讲完了吗?还要干嘛?宝宝们睡觉去了。

NO! NO! NO!

文章还没讲完呢!你快回来~不然我保证你一定会后悔的。

好了,现在我们正式进入大神们的配色装逼大法——协调配色 。

下面说下设计中最常见的两个配色方案。

▌配色协调方法一

不同色相搭配,把不同色彩的亮度和饱和度调成一致或者近似,这是最基本的配色原则。

▌配色协调方法二

同一色相搭配,只调该颜色的亮度和饱和度,也能达到和谐的效果。

通过上面两个拾色器的图片可见:当颜色确定之后可色调中可调节的选项就只剩明度和饱和度了。

下面我们先使用第一个配色方法不同色相搭配,把不同色彩的亮度和饱和度调成一致或者近似,这是最基本的配色原则。

我们来看下这张图片,它有一个最明显的特点就是颜色有很多种:有红色相、绿色相、黄色相。

但是为什么有这么多色相的图片我们看起来却不会觉得杂乱无章,反而看起来非常舒服呢?        

321300014787edeb8357.jpg

请点击此处输入图片描述

这里面除了颜色与颜色之间做到合理搭配之外(这个后面会讲),还有一个最主要的原因是这张图片不管是那种颜色都很好的利用了饱和度和明度。                   

320600042a3c927b143b.jpg

请点击此处输入图片描述                                    

31fa00036b88c681a68e.jpg

请点击此处输入图片描述            

31fa00036b8a577d0a62.jpg

请点击此处输入图片描述

       这里面每一个色相的饱和度和明度相差都非常小,其中有的色相饱和度和明度才相差了1%,所以图片的色调我们看起来非常舒服自然。

与之相同道理的还有下面这张图片,大家有空可以自行去吸取这张图片里面的颜色,看看它们之间的饱和度和明度是否也相差很小。

320700047d488e5fb9d8.jpg

请点击此处输入图片描述

讲完第一种协调配色之后,我们再来看下第二种协调配色:同一色相搭配,只调该颜色的亮度和饱和度,也能达到和谐的效果。

这个我就不多做解释了,我相信聪明的你看完下面这张图饱和度和明度差值,就不言而喻了。

3213000147821ff685db.jpg

请点击此处输入图片描述

31fd0003be38ba3de901.jpg

请点击此处输入图片描述

这第二种协调配色在淘宝电商里面展现得淋漓尽致。

321300014783c58271f0.jpg

请点击此处输入图片描述

31fa00036b8d2de3df0b.jpg

请点击此处输入图片描述

320700047d4aaec94d6b.jpg

请点击此处输入图片描述

因为这种协调配色最为简单方便,而且效果也很好,所以这种协调搭配常常是电商设计师们最常用的装逼大法哦,你学会了吗?