header_v0.7.32

以人识“色“”

1年前发布

原创文章 / 平面 / 教程
设计十问 原创,如需商业用途或转载请与设计十问联系,谢谢配合。

我始终相信万事万物是相通的,找到事物之间的规律和共同特点,可以加强我们对不同事物之间的认识和理解。

以人识“色”

  前言:记得《非诚勿扰》的著名主持人乐嘉老师写过一本书叫做《色眼识人》,他将不同的性格人对应于不同的颜色,来深度剖析人的性格色彩。于是我想既然我们可以通过色彩来分析和观察人的性格,同样,我们也可以通过人身上的一些属性来学习色彩搭配呀。我们常用一个人的身高、性别、年龄、性格、外貌、身份等来定义一个人。在色彩搭配中,我们也常用用HSB(色相、饱和度、明度)来定义色彩。仔细一想,它们其实也有相通之处:如果把色彩看做一个人,色相就相当于这个人的性格,饱和度就是他的年龄,而明度就是他的肤色。当然,人是多样性的,不能只有一种性格,于是在这个基础上,我就引入了色相差来表示色彩的丰富性。有了色相差,自然也会存在饱和度差和明度差。人的性格多样性对应的色彩代名词是色相差,饱和度差代表年龄跨度,明度差就对应于人五官的立体感。接下来我就分别从色相、色相差、饱和度、饱和度差、明度、明度差这六个方面来深度解析色彩的秘密,同时,通过它们与人身上对应特征的联想来加强我们对色彩的记忆。在这个过程中,我还会提取优秀配色画面中的色彩并通过分析它们的HSB数值变化来寻找配色的规律,让抽象的配色方法变得更加具体直观。

 

一.通过拾色器上的HSB来认识色彩

2cbc575cf3500000012e7ebc2a3e.jpg

  色彩分为有彩色系(红、橙、黄、绿、青、蓝、紫等颜色)和无彩色系(黑白灰)。HSB(色相、 明度、饱和度)是有彩色系的三个基本属性,我们可以通过改变PHOTOSHOP拾色器中HSB的数值很直观的看到色彩的变化。

 

  H(色相)就是颜色的一种名称,例如,我们每个人都有名字,什么阿毛,阿狗的。红、橙、黄、绿、青、蓝、紫等是颜色的名称,它在拾色器中数值的变化是从0-360度,这个数值是基于色彩在色相环上的位置而定的。本来色的三原色只有红、黄、蓝的,其他的颜色是它们混合而成的。这就好比,世界上本来只有3个人:阿红、阿黄和阿蓝。他们觉得这样的世界太无聊了,然后就开始啪啪啪,生下来阿绿、阿橙和阿紫.。阿红、阿黄、阿蓝、阿绿、阿紫、阿黄又开始啪啪啪,生出了一大堆各种颜色的娃,最后世界就变得缤纷绚丽了。

 

  S(饱和度)指色彩的纯净程度,它在拾色器上的数值是0-100%,它是指我们在一个纯净的颜色中加入不同程度的灰色,随着加入的灰色比例大,颜色也就越来越不纯净。我之所以用年龄来表示色彩的饱和度是因为婴儿生下来都是给人天真无邪的,随着年龄的长大,社会这桶灰色的染料的不断加入,我们就会变得越来越“污”,越来越有内涵。

 

  B(明度)是指色彩的明亮程度。它在拾色器上的数值是0-100%,它是指一种颜色加入不同程度的白色和黑色后呈现出来的变化。我把它比喻成人的肤色是因为这样一个道理:一个黄皮肤的黄种人,跑到非洲去晒太阳(加黑),慢慢的他就越来越黑了。如果这个黄种人不去晒太阳,而是在家里敷面膜(加白),慢慢的他就越来越白了。我们可以通过肤色来判断一个人是白种人、黄种人还是黑人,同样,我们可以通过画面的明暗程度来判断这是高明度、中明度还是低明度的画面。



二.色相

87c6575cf3be0000012e7edd9955.jpg

  一提到色相,我就不能不说说色相环。上图的色相环由12种基本的颜色组成,首先包含的是色彩的三原色,即红、黄、蓝。原色混合产生了二次色橙、绿、蓝,二次色混合产生了三次色。通过色相环上的颜色我们可以发现相邻的2种颜色混合得到的新颜色既继承了父母的优秀基因,同时也不缺乏自己的特色。正是这种色彩的丰富性让我们的世界也变得多姿多彩,世界上也因为存在性格各异的我们而变得更加生动有趣。接下来我们用不同的性格特性的人来形容不同的色相。

 

  红色(极暖)是个热情、活泼、张扬的艺术家。她是一个非常感性、性格刚烈而外向的人。她有很强的表现欲、表现能力和创造力,容易引起人的注意,她很容易兴奋、激动、紧张、冲动。有时候因为她太能折腾了,会让周围的人感到很疲劳。

 

  黄色(中性暖色)是一个象征着财富和权利的商人,他性格中有冷漠、高傲、敏感的特征,具有很强的野心和欲望,有时候也会给人不安宁的印象。

 

  蓝色(极冷)是一个性格朴实而内向、头脑冷静的律师。他的朴实、内向性格,常为那些性格活跃、具有较强扩张力的人,提供一个深远、广埔、平静的陪衬,成为衬托活跃色彩的友善而谦虚的朋友。他还是一种在淡化后仍然似能保持较强个性的人。

 

  橙色(暖色)是一个时尚,青春,动感,让人活力四射的感觉的大学生。她感觉活泼、华丽、辉煌、跃动、炽热、温情、甜蜜、愉快、幸福,但也有疑惑、嫉妒、伪诈等消极倾向性表情。

 

  绿色(中性色)是平和、安稳的牧师。他是一个柔顺、恬静、容易满足的人。深远、稳重、沉着、睿智的他总能够为他人排忧解难,给人带来希望、和平和安详。

 

  紫色(中性色)是一个具有神秘、高贵、优美、庄重、奢华的气质的贵妇。她白天时(浅紫)时候,大家都觉得她看上去很愉快。在夜深的时候(深紫),她有时也感到孤寂、消极。

 

 

三、色相差

  两种以上色彩组合后,由于色相差别而形成的色彩对比效果称为色相对比。它是色彩对比的一个根本方面,其对比强弱程度取决于色相之间在色相环上的距离(角度),距离(角度)越小对比越弱,反之则对比越强。a4fc575cf4090000018c1b8d6163.jpg

 1.零度对比:同类色的对比(指色相差值在0度左右,饱和度和明度变化),如蓝与浅蓝(蓝+白)色对比,绿与粉绿(绿+白)与墨绿(绿+黑)色等对比。对比效果统一、文静、雅致、含蓄、稳重,但也易产生单调、呆板的弊病。加入黑白灰,有了一定的层次,又显大方,活泼、稳定。这好比你和你孪生姐妹之间的关系,你们有很多共同的特征,有一样的血缘关系。(下图中2个界面都属于零度对比,色相不变,明度和饱和度变化)



2、调和对比

 (1)邻近色相对比(色相环上相邻的二至三色对比,色相距离大约30度左右),为弱对比类型。效果是柔和、和谐、雅致、文静的,但也感觉单调、模糊、乏味、无力,必须通过调节明度差来加强对比。这就好比你和你的邻居小姐妹之间的关系,你们总是能够和谐愉快的一起玩耍。(如下图中蓝色和蓝绿色是调和对比)

b841575cf4910000018c1bd9b985.jpg



 (2)类似色相对比(色相对比距离约60度左右),为较弱对比类型,效果较丰富、活泼,但又不失统一、雅致、和谐的感觉。就好比你和你的同事之间的关系,你们共同学习、共同成长。(下图中,界面里3种颜色色相在60度范围里变化,明度和饱和度大致保持一致)

b020575cf4b00000018c1bea6460.jpg


 (3 )中度色相对比( 色相对比距离约90度左右),为中对比类型 ,感觉是明快、活泼、饱满、使人兴奋的。对比既有相当力度,但又不失调和之感。就如你和你的闺蜜的关系,总是很兴奋,好像永远有说不完的话。(下图中,圣诞老人身上的红色和麋鹿身上的黄色形成中度色相对比,同时,2种颜色在它们身上你中有我,我中有你,让画面变得更加生动有趣)

c43f575cf4cf0000018c1b23f638.jpg


3.强烈对比

 (1)对比色相对比(色相对比距离约120度左右) ,为强对比类型,如黄绿与红紫色对比等。效果强烈、醒目、有力、活泼、丰富,但也不易统一而感杂乱、刺激、造成视觉疲劳。一般需要采用多种调和手段来改善对比效果。这就好比你和你蓝颜或红颜之间的关系,你们共同学习,取长补短,但是度没有把握很有可能会引火上身。(左边的界面是邻近色对比,右边是零色对比。两个界面同框在一起又是对比色相对比)

3dd2575cf4fe0000018c1b11a7e2.jpg


 (2)补色对比( 色相对比距离180度),为极端对比类型,如红与蓝绿、黄与蓝紫色对比等。效果强烈、眩目、响亮、极有力,但若处理不当,易产生幼稚 、原始、粗俗、不安定、不协调等不良感觉。好比你和男女朋友之间的关系,俗话说男女搭配干活不累,但是关系没有处理好,很有可能会功亏一篑。(下图中,大面积的紫色和小面积的黄色形成补色对比)

8045575cf5740000012e7e5b6a96.jpg


  总之,选择什么类型的色彩对比关系是由界面所要表达是主题来决定的。例如婴儿类的产品一般都是柔和的、亲切的,这时我们就要想起我们的家庭关系或者邻居关系,采用零度对比和邻近色对比比较合适。女性类产品一般比较柔美、灵动、活泼,比较适合调和对比关系。在UI界面设计中,主色和点睛色常常是强烈对比关系,大面积的主色配合小面积的点睛色,既能够吸引用户的眼球,又不至于让人看了厌烦。当然,很多时候多重对比关系是存在同一界面中的.例如,乍一看是整体是调和对比,局部地区存在强烈对比,颜色之间又相互呼应,这样的页面就比较耐看。好比套娃,一层套一层,通过细节上的丰富不断的给人带来惊喜。


  提到颜色之间的呼应,我们还可以从人的穿衣搭配上来学习色彩搭配。在很多关于时尚搭配的微博上,时尚博主们都会选择和衣服同色系的包包、鞋子、饰品甚至是指甲油、口红来丰富配合他们的整体搭配,这样显得精致有细节和品位。在变化中寻找共同之处,在整体中创造差异化,这也是让设计变得有趣的一个原理吧。



四、饱和度/纯度

  饱和度是指色彩的鲜艳程度,也称色彩的纯度。饱和度取决于该色中含色成分和消色成分(灰色)的比例。饱和度最高的颜色被称为纯色。


  小孩子容易被饱和度高的彩色所吸引,在日常生活中,我们常常能够看到儿童的玩具和零食包装都被设计成高饱和度的、多色彩的。老人家喜欢安静、而且容易怀旧,低饱和度的深色常常受到他们的青睐。随着人年龄的增长,对颜色的喜好也会发生变化。

  低纯度(S值在0-30之间)的色彩给人的感觉是平淡、自然、简谧的,同时也是消极、无力、陈旧的。我们常常能够在怀旧复古的电影、战争纪录片、极简主义的家居装饰中看到它的广泛应用。

  中纯度(S值在30-70之间)的色彩给人的印象是稳定、文雅、可靠、中庸的。

  高纯度(S值在70-100之间)的色彩给人的感觉是积极、强烈、冲动、外向、快乐、生气的。它具有很强的色彩倾向性,能够很快的吸引人的注意力。

523a575d1c140000012e7e5c457f.jpg

五、饱和度差

  两种以上色彩组合后,由于饱和度差别而形成的色彩对比效果称为纯度对比。根据纯色加灰的量的不同(0-100%),将色彩的纯度从灰至纯色分为11个纯度色阶;2色间隔0-3个等级的形成弱对比,间隔4-6个等级的形成强对比。如果换算成S值,每一个等级的差值大概是27.2,约等于27。

8bdf575d1c380000018c1b85c0f3.jpg

  纯度弱对比(S差值在0-27之间)的画面视觉效果比较弱,形象的清晰度较低,适合长时间及近距离观看。日系清新风格的照片很多时候就是纯度弱对比。

5402575d1c640000012e7eed8b83.jpg


  纯度中对比(S差值在27-73之间)是最和谐的,画面效果含蓄丰富,主次分明。


  纯度强对比(S差值在73-100之间)会出现鲜的更鲜、浊的更浊的现象,画面对比明朗、富有生气,色彩认知度也较高。HDR照片风格就属于纯度强对比。

0943575d1cab0000012e7e41a31f.jpg


六、明度

  明度是指色彩的明亮程度。它由两个因素共同决定:一是环境光,同一个物体在不同的环境光的照射下,所产生的明暗强弱不同。二是物体本身的颜色,每一种纯色都有对应的明度,黄色的明度最高,蓝紫色的明度最低,红色和绿色的明度为中间明度。同时,色彩的明度的变化也会影响到纯度。


  根据明度色标,凡明度在零度至三度的色彩称为低调色,四度至六的色彩称为中调色,七度至十度的色彩称为高调色。低调色朴素、丰富、迟钝、重、雄大有寂寞感。高调色愉快、活泼、柔软、弱、辉煌、轻。

 


七、明度差

  两种以上色彩组合后,由于明度差别而形成的色彩对比效果称为明度对比。色彩的层次与空间关系主要依靠色彩的明度对比来表现。


  明度对比较强时光感强,形象的清晰程度高,锐利,不容易出现误差。明度对比弱、不明朗、模糊不清,则如梦,显得柔和静寂、柔软含混、单薄、晦暗、形象不易看清,效果不好。明度对比太强时,会产生生硬,空间、眩目、简单化等感觉。

 

 

八、对比效果的强化与抑制

 

强化对比效果的方法:

(1)改变色彩的色相差,使之建立补色关系,强化色相对比作用;

(2)增加色彩的纯度差,强化纯度对比作用,提高色彩认知度;

(3)增加色彩的明度差,从而加强画面的空间感和层次感;

(4)扩大面积对比关系,强化面积对比作用。

 

抑制的方法:

(1)改变纯度,提高明度,缓和纯度对比作用;

(2)破坏互补关系,避免补色强烈对比;

(3)采用间隔、渐变的方法,缓冲色彩对比作用;

(4)缩小面积对比关系,建立面积平衡关系。


九、案例分析

  看到一个界面时,我们可以从上面提到的六个方面(色相、色相差、饱和度、饱和度差、明度、明度差)来分析它的色彩搭配。

3c63575d1d350000012e7e1aac27.jpg

  通过观察HSB数值,我们可以发现这是同一色相、零色相对比、中纯度、纯度弱对比、高明度、明度弱对比的色彩搭配方案。这种色彩色搭配的特点是画面看起来柔软、轻、自然、统一和谐。这种色彩风格与婴儿的主题特别的符合。bf63575d1d4b0000012e7ef2183f.jpg

 通过观察HSB数值,我们可以发现这是一个邻近色相对比、中纯度、纯度弱对比、高明度、明度弱对比的色彩搭配方案。它的风格与上一个案例很相似。都是比较柔和的,相对于零色相对比,这种邻近色相对比加强了画面的对比关系,使之看上去更有层次感,画面更加丰富。


十、总结  


  色相(颜色的属性)指赤橙黄绿青蓝紫等,每种颜色都有它的脾气,在配色的时候根据主题选择最合适的那个颜色。

  色相差(色彩在色相环上的度数差)形成零色相对比(0)、邻近色相对比(30)、类似色相对比(60)、中度色相对比(90)、对比色相对比(120)、补色色相对比(180)。随着色相差的增大,对比关系越来越强烈。

  饱和度(色彩的纯度)可分为低纯度(0-30)、中纯度(30-70)、高纯度(70-100),随着纯度的增大,颜色的鲜度越来越高,画面越来越热闹。

  饱和度差(色彩的饱和度差值)形成纯度弱对比(0-27)、纯度中对比(27-73)、纯度强对比(73-100),随着饱和度差的增大,色彩的对比关系也越来越强烈,画面从朦胧的变得越来越清晰、明朗。

  明度(色彩的明亮程度)可分为低调色、中调色、高调色,随着色彩的明度的提高,色彩看上去也越来越轻。

  明度差(色彩明度差值)形成明度弱对比、明度中对比、明度强对比,随着明度对比关系的增强,画面的层次感增强。

   

  俗话说,没有规矩不成方圆。有了一个清晰的评判标准后,以后我们看到一个色彩很漂亮的页面就不会只是说它好好看,而是从这六个方面(色相、色相差、饱和度、饱和度差、明度、明度差)去更专业的分析它的色彩搭配,并且将它灵活的运用到自己的设计中。面对色彩比较复杂的页面,我们可以先整体分析再局部分析。多总结多分析以后,慢慢的我们就能够发现色彩搭配的规律,仿佛每一个好搭配方案都可以看做是一种照片的滤镜,我们可以将它运用到主题类似的作品中。随着时间的积累,慢慢的我们也可以有自己的滤镜库。 


34
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功