你真的会用色吗?——木泽川带你玩转色彩

郑州/UI设计师/4年前/1009浏览
你真的会用色吗?——木泽川带你玩转色彩
木泽川

希望通过今天的学习,应该会使大家对配色有一个新的了解。那我们开始今天的学习吧!

今天我们来谈谈配色,大家真的会用色吗?尤其是刚刚入行设计的小白们,是不是经常为此烦忧。不是颜色太“炸裂”,就是颜色太“脏”,或者就是压根不知道怎么配色的。通过今天的学习,应该会使大家对配色有一个新的了解。那我们开始今天的学习吧!


我们从色彩三大属性,七大色调,六大配色三个板块来学习。


色彩三大属性

色彩三大属性就是我们常说的:色相、饱和度(纯度)、明度。

色相(H)从字面意思理解就是色彩的相貌,说到色相,那就要先认识下色相环。根据颜色系统的不同,色相环也分很多种。如美术中的红黄蓝(RYB)色相环,光学、计算机Photoshop中的红绿蓝(RGB)色相环和印刷中的CMYK色相环。在使用色相环时,要注意色相环的不同种类和区别。我们是从事的是互联网工作,也就是说我们以后用的最多的颜色是在屏幕中显示的,那我们就用CG色相环给大家讲解吧。

通过CG色相环(我给大家展示的是24色色相环),我们可以有四个搭配原则:同类色搭配、邻近色搭配、对比色搭配、互补色搭配。

1.同类色搭配原则

同类色按照规范来说就是在色相环任意一颜色与它对应夹角为30℃的颜色成为同类色。

同类色搭配起来,给人安静、统一、素雅、和谐以及文艺的感觉和气质。所以想让画面文艺,素雅等的气氛,那么搭配色彩就可以想想同类色搭配原则。 

2.邻近色搭配原则

色相环中相距60度,或者相隔三个位置以内的两色,为邻近色关系,属中对比效果的色组。色相彼此近似,冷暖性质一致,色调统一和谐、感情特性一致。

邻近色搭配起来,既有同类色的统一、和谐之外,还有给人活力、清新、丰富的感觉。所以想让画面统一和谐的同时,让画面有活力,给人像清新,丰富的感觉的话,就可以试试邻近色搭配原则。

3.对比色搭配原则/互补色搭配原则

对比色的色彩搭配是将色环上划分120度范围,找出两边相对应的一组色彩进行搭配。互补色的色彩搭配是在色环上成180度相对应的一对色彩。因为互补色和对比色搭配都是给人对比强烈,非常丰富热闹的感觉。所以这两个搭配原则我们一起说了。

因为互补色和对比色搭配都是给人对比强烈,非常丰富热闹的感觉。所以想让画面丰富,热烈,表达年轻、潮流、现代等气氛的话,可以试试用对比色以及邻近色搭配原则。

在这给大家一个对比色/互补色配色的小诀窍:配色要一大一小,一强一弱。这是什么意思呢,就是配色的时候一个颜色是大面积,另一个是小面积。一个饱和度比较高一点,另一个饱和度比较低一些。这样画面才会非常的舒服。

上图为例,它采用了对比色红和蓝,红色饱和度较高,面积较大,这就是一强,一大。而蓝色饱和度相对而言较低,面积较小,这就是一弱一小。这样对比色/互补色符合一大一小一强一弱的话,画面会在丰富的同时,也会一致统一。


在这多说一句,如果单单用颜色的话,可能我们配出来画面有可能会花(画面太丰富),或者画面过于鲜亮或者暗沉,这个时候我们可以用一类颜色来平衡画面。这就是——消色


消色就是黑白灰,理论上来说黑白灰的物体对光源的光谱成分不是有选择地吸收和反射而是等量吸收和等量反射各种光谱成分。这时物体看上去没有了色彩。但是记住哦,我们说的灰和黑一定是有色彩偏向性的颜色,比如说它是偏绿的灰,是个深蓝色,这都算消色。当画面过于鲜亮或者比较花的时候,可以用消色来平衡画面。

饱和度(S)指色彩的鲜艳程度,也称作纯度。我们在打开Ps的拾色器,在同一水平线上,越往左饱和度越低,越往右饱和度越高。所以以后我们给了一个颜色觉得特别的鲜艳可以在拾色器上往左边走一些,这样颜色就会更素雅些,反之亦然。

在色彩中低饱和度的颜色有文艺,素雅小众的感觉,而高饱和度的颜色会给人活泼,炸裂,潮流年轻的气质。最直接的反映就是logo以及应用图标。


明度(B)是眼睛对光源和物体表面的明暗程度的感觉,主要是由光线强弱决定的一种视觉经验。一般来说,光线越强,看上去越亮;光线越弱,看上去越暗。在Ps拾色器中,在同一垂直线上,越往上明度越高,越往下明度越低。

如果我们想让我们的画面看上去干净透亮,就要在调色的时候要在明度相对高的来吸色,这样画面会干净透亮。有的同学颜色调得很脏/发污,那是因为颜色的明度较低。那么有的同学肯定问了,那我该怎么调色呢?那接下来我们给大家讲一个方法,那就是“三大调”。

我们可以把拾色器分为三大调,分别是高调、中调和低调。当我们想让画面干净,尽量用高调区域的色调。尽量避免用中低调的颜色来表达干净明亮的信息。


七大色调


我们在讲明度的时候说到明度在拾色器上可以分为高调、中调以及低调。我们再加饱和度的知识就形成了我们这次要讲的七大色调。

也就是说,高调可以分为4色调,中调可以分为2色调,低调为1色调。我们把七大色调搞清楚之后,相信大家在生活和找工作中只要和配色相关的领域,都会得心应手。那接下来我们就开始吧!


高调4色调

我们来认识高调中的四个色调吧,四色调分别是白色调、粉色调、明色调、鲜色调。

首先我们先认识下白色调,在拾色器上大致在上图的范围中吸的色值。在这个位置吸的颜色整体偏白色,所以我们称之为白色调。白色调给人有文艺素雅、干净极简的感觉。缺点就是给人乏味单调的感觉。所以当我们想表达文艺、极简等气质的画面时,可以在白色调中来吸取颜色。

其次我们再认识下粉色调,在拾色器上大致在上图的范围中吸的色值。在这个位置吸的颜色整体偏粉嫩,所以我们称之为粉色调,粉色调给人有清新清爽、天真可爱的感觉。缺点也是给人无趣、乏力的感觉。所以当我们想表达婴幼儿,提升亲和力/可爱等类型的画面时,可以在粉色调中来吸取颜色。

然后我们再认识下明色调,在拾色器上大致在上图的范围中吸的色值。在这个位置吸的颜色整体明亮,所以我们称之为明色调,明色调给人有年轻活力、阳光清爽的感觉。缺点会给人有廉价/缺乏品质感。所以当我们想表达年轻活力,阳光等类型的画面时,可以在明色调中来吸取颜色。


最后我们再认识下鲜色调,在拾色器上大致在上图的范围中吸的色值。在这个位置吸的颜色整体鲜亮,所以我们称之为鲜色调,明色调给人有青春活力、刺激、激情炸裂的感觉。缺点会给人有廉价/生硬感。所以当我们想表达电商,青春,运营视觉等类型的画面时,可以在鲜色调中来吸取颜色。

中调2色调

那接下来我们认识中调的两个色调,两色调分别是灰色调,深色调

我们先认识下灰色调,在拾色器上大致在上图的范围中吸的色值。在这个位置吸的颜色整体偏灰,所以我们称之为灰色调,灰色调给人有品质、高端奢华(莫兰迪色)的感觉。缺点会就是可能会有人觉得偏脏或者缺少活力。所以当我们想表达品质,高端奢华等类型的画面时,可以在灰色调中来吸取颜色。

我们再认识下深色调,在拾色器上大致在上图的范围中吸的色值。在这个位置吸的颜色整体偏深,所以我们称之为深色调,深色调给人有成熟、稳重大气的感觉。缺点会就是可能会有人觉得压抑,阴暗,没有透气感活力。所以当我们想表达成熟稳重,大气等类型的画面时,可以在深色调中来吸取颜色。

低调1色调

那接下来我们认识低调的唯一一个色调,那就是黑色调

黑色调,在拾色器上大致在上图的范围中吸的色值。在这个位置吸的颜色整体发黑发重,所以我们称之为黑色调,黑色调给人有神秘、力量以及厚重的感觉。缺点会就是可能会有人觉的压抑、抑郁。所以当我们想表达神秘力量、历史厚重等类型的画面时,可以在黑色调中来吸取颜色。

七大色调我们到这就介绍完啦,以后大家在用色前先考虑下我们想营造一个什么样的画面,然后再根据七大色调的位置去调,这样会更好一些哦。


配色原则(平衡)

六大配色原则又可以说是六大色彩平衡,我们常说的画面色彩和谐,其实就是符合六大配色原则的远离。六大配色平衡分别是互补色平衡、对比色平衡、冷暖平衡、深浅平衡、色彩面积平衡、有色和无色的平衡。我们接下来一起来认识下。

 

互补色/对比色平衡

因为互补色和对比色都是反差比较大色彩,十分相似,所以我们放在一起来讲。在一个画面里如果只用同类色或者邻近色的搭配原则,可能画面会太偏一种偏单一,以及画面会偏素,这样的时候我们就可以用他的互补色(要符合我们前边说的一大一小、一强一弱原则)。这样画面在丰富的同时,颜色也会综合画面,使画面达到一种平衡

当我们用对比色/互补色平衡的时候,一定要注意,我们的画面气氛一般会热闹、年轻、潮流、活动的氛围上偏。

如上图,这个banner大面积是粉红色,辅助色用了它邻近色黄色,如画面只要这两个颜色画面可能会偏燥(也就是我们说的偏火气)。所以作者用了红色的对比色蓝色,这样画面就有了一个对比色平衡,画面在统一和谐的同时会给人年轻,丰富的感觉。

小思考:大家看看作者用对比色有没有运用一大一小一强一弱的手法?


冷暖平衡

我们经常会说一副插画或者一个作品的冷暖偏向,但是如果画面中只有冷色调或者暖色调的话,给人感觉也是不适的。都是暖色调给人就过于燥热的感觉,都是冷色调那么画面就会给人十分冰冷的感觉。所以一般这种情况下我们就要运用冷暖平衡,在画面中加入对应的冷暖色调,这样画面会更统一和谐。

例如上图,我们想象一下如果把整个画面中的红色和黄色也换成蓝绿色调的话,画面会怎么样呢?

我们快速放在ps试了下,大致如上图,这样画面想表达的年轻有趣,画面丰富的感觉都消失了,留下来就是画面会觉得冷冰冰的感觉。所以在冷色为主的画面中加入暖色,这样的话,画面是非常统一和谐,这就是冷暖平衡。

 

深浅平衡

深浅平衡是生活中很常用的一个原则,在一个画面中肯定要有对比和衬托,经常会用到的。如果画面都是特别浅的颜色,那么画面经常会“飘”,感觉整合画面的内容都是轻飘飘的。如果画面都是很深的颜色的话,画面会给人很沉闷以及压抑感。这二者任意一种都没有对比,那么画面里想突出的东西肯定凸显不出来。

比如说上图的右图,如果文字的颜色和背景的深浅度相近,那文字就很难凸显出来。背景是浅色,文字是深色,这样文字信息就非常容易的凸显出来啦!

小思考:为什么好多优秀的插画中都经常用消色(黑白灰)呢?


色彩面积平衡(631法则)

色彩面积平衡是设计配色中运用比较广泛的法则,又称之为631法则。就是说在一幅画面里颜色的色相最好不要超过3中。一个画面中要有主色、辅助色以及点缀色。三个颜色占画面的比例是:主色占60%左右,辅助色占30%左右,点缀色占10%。

运用631法则(色彩面积平衡)会让我们的画面非常的“稳”,首先颜色倾向十分明确,辅助色一般建议用邻近色,这样画面在丰富的同时也是和谐的。然后再加上小面积的对比色来点缀,画面会在统一的同时更加丰富有趣。

如上图,在这个插画运营banner中,蓝绿色是主色,占了这个画面的60%左右,为了突出主体(小姑娘),故将小姑娘整体用了黄色,就是辅助色占了30%。黄色和绿色是邻近色,所以在统一基础上更好的突出主体。但是由于这两个色相是邻近色,所以丰富感没有这么强,于是我们发现包和帽子上的装饰用的是橙红色,这就是点缀色,大致占了画面的10%左右。因为橙色与绿色是对比色,所以橙色小面积的运用会是主体更突出,以及画面更丰富有趣,有年轻少年感。我们也会发现作者在运用绿色和橙色的运用也是符合一大一小、一强一弱的原则。


有色和无色(单色)的平衡

在讲631法则的时候应该会有小同学提问,我想画偏文艺、安静的风格也要符合631法则吗?当然不是,如果想表现安静文艺等气氛的话,就要运用有色和无色(单色)的平衡。


有色就是指一个色相,一般应用在主体上边。而背景和次要的原色就可以运用无色。无色首先是黑白灰,主体是有颜色的,其他都是黑白灰。无色也可以用单色,所谓单色就是一种色相,比如说背景次要都是蓝色。

如上图就是运用了有色彩和无色彩的平衡,也就是这个画面中主体是房子,所以主体的房子用了有色相的红色。其他内容用的的都是无色彩的黑白灰。

如上图,这个就是有色(红色)和单色(蓝色)的案例。

 

这就是我们今天讲的全部内容啦,我们分别从色彩三大属性,七大色调,六大配色三个板块来认识了色彩,希望大家对色彩有一个基本的了解。


11
Report
|
16
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
IP形象
IP形象
IP形象
IP形象
作品收藏夹
配色
配色
配色
配色
作品收藏夹
企业展厅
企业展厅
企业展厅
企业展厅
精选收藏夹
作品收藏夹
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
精选收藏夹
作品收藏夹
企业展厅/文化墙 参考
企业展厅/文化墙 参考
企业展厅/文化墙 参考
企业展厅/文化墙 参考
精选收藏夹
作品收藏夹
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
精选收藏夹
作品收藏夹
大家都在看
Log in