浅析色彩原理

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



本公众号为阿里巴巴集团 CCOUX 所属，我们会定期为您推送一些用户体验相关的原创以及一些国外文章的翻译，希望您会喜欢并关注我们。请点击上方「37点2度体验」关注我们吧！



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

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



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

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

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

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

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

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

色彩模型

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



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



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

何为色相(Hue)，饱和度(Saturation)，明度(Brightness)？

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

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

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

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

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



色彩的计算机代码式表述

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

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



结语

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

    关注 37点2度体验