5.4　色彩：用“色调–饱和度–亮度”思考

思考与谈论色彩出奇困难，尽管我们身在其中。这个问题部分源于色彩的感知和理解要依赖于无序光子、神经元、突触、自动感知与意识思想。所以对于色彩是如何作用的，物理学、进化生物学、工程学、心理学和艺术学领域各自都有自己同样合理的理解。人们用词很容易混淆，陷入麻烦，没法确定如“活泼”、“明亮”、“饱和”、“暗淡”、“色调”、“浅色”、“阴暗”等词语的确切含义。

色彩模型旨在让人们能够用精确的术语来考虑和沟通颜色。当你理解了色彩模型的含义时，你就可以说明色彩集合中的任意一种颜色。大部分色彩模型采用三个数值，以三维空间将其可视化，来描述可能的颜色空间。

5.4.1　古老而好用的RGB

如果你在计算机上处理过色彩，特别是在网页中用过色彩，你可能熟悉RGB颜色空间。RGB根据屏幕发出的红、绿、蓝光的数量来定义颜色。那正是阴极射线管和液晶显示器工作的原理，通过调制三种光的数量，来显示每个像素的颜色。所以RGB在技术上是合理的。而且人眼视网膜上的锥状细胞大体上也是感受红、绿、蓝光的波长。还有很重要的一点就是，从生理学上理解RGB也是有意义的。

RGB的问题在于它在心理学上不是很合理。你知道的就该是想到的。假如你想将暗橙色变得明亮，意识上不会本能地想着应把红光和绿光按2∶1的比例添加；假如你想把有点发黄的绿色去除黄色成分，削减红色分量也不是自然而然就能想到的。而这正是RGB色彩模型要求我们做到的。（是啊，由于HTML和CSS残酷的经历，一些英勇的网站设计人员已经树立了意识上的纪律，不光考虑RGB空间，还要同时考虑十六进制。要是哪个人顺口说出第#591e6f号颜色是怎样的，请向她致敬。）

5.4.2　HSB的引入

有个色彩空间更类似于人的意识。它让你只用说出想让颜色变明亮一些，少点黄色，或者采取其他许多简单的变换即可。这就是HSB（有时又称HSL，但HSV是另外一种色彩模型），它就是这么工作的（请参看图5.1的示例）。

图5.1　色调、饱和度、亮度的效果

·色调是个表示程度的数值（0°~360°），它表示环绕色彩轮的位置。色调并不关心色彩有多亮、多暗或者多么活泼，而是红为0°、黄为60°、绿为120°等。到达360°后又回到红色，反映出人对颜色感知的循环特性。如果你用HSB的时间足够长，就会记住一些重要的色调，如210°，这是苹果公司喜欢在其界面中用到的蓝色，稍带点浅绿色的迹象。

·饱和度是个百分比，表示要呈现多少色调到颜色中，与该色彩有多么中性正好相反。饱和的色彩看上去更纯更活泼，不饱和的色彩则显得柔和、发灰。饱和度为0%时，色调彻底消失，看到的是灰度色。

·亮度很简单，它也是个百分比，表示该颜色有多亮或多暗，直接取决于屏幕发出了多少光。亮度为0%时，颜色总为黑，所以色调、饱和度完全不起作用；而亮度为100%时，屏幕发出的光最多。

要习惯以下这些区别。

·蓝色指色调。

·有点灰的蓝色指色调和饱和度。

·暗而有点灰的蓝色指亮度、色调和饱和度。

一旦你变得习惯用HSB思考——这应该相当快就能做到——就能精确地谈论色彩。你会认识到屏幕上有些组件如果饱和度相对其他界面组件太高，会显得很难看。你会明确地说出文字与其背景之间的亮度差异性。你甚至能够用HSB描述真实世界的色彩，在你选取窗帘、衣服或猫时均能如此。