浅析色彩原理

1
伟大的印象派大师梵高说过:「颜色之于画作亦如热情之于生命。」,
可见颜色对于艺术作品的重要性。

根据有关的实验证明:人在看待一个事物的前 20 秒,色彩的成分占 80%,2 分钟后,色彩占 60% ,形体占 40% ;5 分钟后,色彩、形体各占 50%。该实验表明颜色在很大程度上影响了我们对事物的认知和记忆,当你在看一幅画、一张照片,一件衣服、一件家具……事后回忆起来的时候,其实你很大程度记不起画布上画了几个人,照片上的鸟在哪个位置,衣服上的纽扣是什么材质的,家具的价格是多少,但往往你可能还是会记得其大致的颜色。各种颜色还会让人们产生特定的心境,或者说情绪,所以也会看到「某某监狱通过改变墙体的颜色让监狱里的斗殴率大幅下降」的新闻。也诞生了「色彩心理学」这样研究颜色的专业学科。

2

颜色是如何形成并被我们感知的

不同波长的可见光对应着不同的色彩,当光线反射到眼睛里就形成了不同的色彩:

3

上图为三棱镜所折射出的不用波长的可见光

1. 颜色是由于某些特定波长的可见光射入视网膜造成的,视网膜边缘的杆状细胞可以区分光亮和黑暗,而中央的锥状细胞还能分别感受各种颜色的波长。(照相机里的传感器就是仿造这样的原理制成)

2. 我们能看见光波须满足以下条件:

  • a.物体本身是光源
  • b.物体能反射光

所以说:有光的地方就有色彩

色彩模型

色环其实就是把折射的光扭成了一个环,每个角度代表了不同的颜色值。

4

如果把它继续扩展就上饱和度(Saturation)和明度(Brightness)的维度,就变成了:

5

如果把他转化为三维,就引入了孟塞尔颜色系统(Munsell Color System)。

6

圆环为色相(Hue),纵轴为饱和度(Saturation),横轴为明度(Brightness)

何为色相(Hue),饱和度(Saturation),明度(Brightness)?

色彩三要素(Elements of color)由饱和度(Saturation),明度(Brightness),色相(Hue)来组成,用来描述色彩,来区分不同色彩的不用特性。

色相(Hue):色的不同是由光的波长的长短差别所决定的,色相指的是这些不同波长的色的情况。

饱和度(Saturation):用数值表示色的鲜艳或鲜明的程度。

明度(Brightness):表示色所具有的亮度和暗度被称为明度。

就拿我们最熟悉的 Photoshop 来举例,小小的调色板其实已经包含了整个色彩体系。(HSV 色彩模型)

7

色彩的计算机代码式表述

#212321 #823271 是我们设计师在给前端颜色时最常用的形式,为什么是这样子的形式呢,所谓事物存在必有其他所在的意义,我们在日常给颜色命名的时候,通常会说「火红」、「海军蓝」、「晚霞般的红」,极具个人情感的描述,而计算机或者别人怎么知道颜色确切的名字和精确的描述呢?计算机先辈们创造了一套系统(RGB 模式)才解决。计算机在命名一个颜色时,采用了所谓的十六进制代码来表示 24 位色彩。可以产生 16,777,216 种不同的颜色,已经能满足日常的使用了。如果设计师了解了十六进制色彩的工作原理,那你就对计算机如何产生色彩有了最基础的理解,成为你工作中工具。

显示器的原理是,通过R(红)G(绿)B(蓝)三种光来点亮每个像素点,不同比例的三种光呈现了不同的颜色,如#324322:前面的#表示十六进制数,其余的 6 个字符被 0-9 和 a-f 分成三部分,每部分控制一个原色。数值越高,原色就越亮,由此来混合出想要显示的色彩。

8

结语

色彩的感知是一种很感性的行为,人与人会有一些偏好,对每个颜色的敏感度也会有所不同,例如:有些人喜欢黑色,有些人则不,有些人觉得向日葵的颜色很璀璨,有些人却觉得这黄色过了。前人所做的只是把色彩理论化,变成一套可以分析,可以量化的理论知识。特别是关于计算机代码式表述色彩,对于一位 UI 设计师的工作息息相关,合理的运用,可以提升工作效率。

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部