
2.2 色彩的三要素
现实生活中的色彩可以分为彩色和非彩色。其中黑、白、灰属于非彩色系列。其他的色彩都属于彩色。明度、色相、纯度是色彩最基本的三要素,也是人们正常视觉感知色彩的3个重要因素。
2.2.1 明度
明度也叫亮度,指的是色彩的明暗程度,明度越大,色彩越亮。如一些购物类、儿童类网站,用的是一些鲜亮的颜色,让人感觉绚丽多姿,生气勃勃。明度越低,颜色越暗,主要用于一些游戏类网站,充满神秘感;一些个人站长为了体现自身的个性,也可以运用一些暗色调来表达个人的孤僻或者忧郁等性格,如图2-8所示就是色彩的明度变化。

图2-8 色彩的明度变化
如图2-9所示的购物网站采用明度大鲜亮的颜色。游戏类的网站一般采用明度低的色彩,如图2-10所示的游戏网站。

图2-9 购物网站采用明度大鲜亮的颜色

图2-10 游戏网站采用明度低的色彩
色彩的明度包括无彩色的明度和有彩色的明度。在无彩色中,白色明度最高,黑色明度最低,白色和黑色之间是一个从亮到暗的灰色系列;在有彩色中,任何一种纯度色都有着自己的明度特征,如黄色明度最高,紫色明度最低。
2.2.2 色相
色相指的是色彩的名称。色相是色彩最基本的特征,是一种色彩区别于另一种色彩的最主要的因素。如紫色、绿色、黄色等都代表了不同的色相。同一色相的色彩,调整一下亮度或者纯度很容易搭配,如深绿、暗绿、草绿。
最初的基本色相为:红、橙、黄、绿、蓝、紫。在各色中间插入一两个中间色,其头尾色相,按光谱顺序为:红、橙红、黄橙、黄、黄绿、绿、绿蓝、蓝绿、蓝、蓝紫、紫、红紫——12个基本色相,如图2-11所示。

图2-11 12个基本色相
这12个色相的色调变化,在光谱色感上是均匀的。如果进一步再找出其中间色,便可以得到24个色相。如果再把光谱的红、橙、黄、绿、蓝、紫诸色带圈起来,在红和紫之间插入半幅,构成环形的色相关系,便称为色相环。基本色相间取中间色,即得12色相环。再进一步便是24色相环。在色相环的圆圈里,各彩调按不同角度排列,则12色相环每一色相间距为30°。24色相环每一色相间距为15°。
按照色彩在色相环上的位置所成的角度,可分为同种色相、类似色、邻近色、分离补色、对比色、互补色。
2.2.3 纯度
纯度表示色彩的鲜浊或纯净程度,纯度是表明一种颜色中是否含有白或黑的成分,也称饱和度。可见光谱的各种单色光是最纯的颜色,为极限纯度。当一种颜色掺入黑、白、灰或其他彩色时,纯度就会产生变化。当掺入的颜色达到很大比例时,通过眼睛来看,原来的颜色将失去本来的光彩,而变成掺和的颜色。当然,并不等于说在这种被掺和的颜色里已经不存在原来的色素,只是由于大量地掺入其他色彩而使得原来的色素被同化,人的眼睛已经无法察觉出来了,如图2-12所示就是色彩的纯度变化。

图2-12 色彩的纯度变化
不同的色相不但明度不等,纯度也不相等。纯度体现了色彩内向的品格。同一色相,即使纯度发生了细微的变化,也会立即带来色彩性格的变化。有了纯度的变化,才使世界上有如此丰富的色彩。如图2-13所示纯度高的网页画面非常鲜活明快,如图2-14所示较低的纯度则显得灰暗朦胧。

图2-13 纯度高的网页鲜活明快

图2-14 纯度较低的网页显得灰暗朦胧