引言
“赤橙黄绿青蓝紫”,还记得曾经背过的口诀么。它是日光的混合色,它也是彩虹的颜色。这是我第一次和颜色相处。
因为有了颜色,世界在我们的眼中变得多姿多彩。因为有了颜色,让我们对世界有了感官的认识。关于颜色的议论随处可见,我们可以用颜色来描述具体的事物,比如,天空蓝,烈日红,皮肤黄…,也可以用颜色描述一种心情,冲动红,兴奋黄,淡雅绿,抑郁灰…,甚至还可以用颜色表示更深层次的寓意,比如,原谅绿。总之,在现实世界中,颜色给了我们太多的信息。这也激起了我对颜色的好奇。尤其是在学习css这门技术的时候,我愈加的感受到了颜色的强大。那么从哪里入手呢?这是一个问题。就像一个鸡蛋摆在眼前,我却找不到它的缝隙,怎么下嘴呢?
还记得中学的物理课上学过一些关于颜色的理论,于是从中翻到了“三原色”这个词,隐隐感觉很重要。那就从它开始吧。
“创造”色彩
(一)三原色
在人类视觉所能感知的颜色范围内,几种色彩的不同比例混合,会“创造”出其他颜色,并且这几种颜色中的任意一个都不会由其中其他颜色混合而“创造”出来,这样的颜色在色彩学中称为原色。而这种颜色有三种,我们称之为三原色,也叫三基色。听名字就很容易理解,它们是基础的颜色,他们就像原子一样,任性组合在一起,构成了色彩世界的“物种多样性”。
三原色是在颜色的混合基础之上出生的,而不同的混合模式会有不同的三原色。根据不同的场景,颜色会有不同的混合模式。
(二)颜色的混合模式
颜色的混合模式有三种,分别是加法混合、减法混合和中性混合。
1.加法混合
加法混合是指色光的混合。混合色的光的总亮度等于相混各色光亮度之和。它们的三原色是红、绿、蓝。也就是所谓的RGB模式。R,Red,红色;G,Green,绿色;B,Blue,蓝色。可以把色光理解成一颗颗会发光的粒子(这个好像是物理课本中学过的光的波粒二相性)。它们有的会发射红光,有的会发射蓝光,有的会发射绿光–好像是漂亮的萤火虫。它们无孔不入,蹦蹦跳跳的通过了我们睁着眼皮的瞳孔,然后我们就看见它们了。根据它们不同的比例参杂,我看到了他们不同的“衣裳”。
当牛奶和巧克力混合在一起产生了爱情,那么它们(三原色)混合在一起会产生什么呢?,我们来偷窥一下:
- 红光∪绿光=黄光
- 绿光∪蓝光=青光
- 蓝光∪红光=紫光(品红)
- 红光∪绿光∪蓝光=白
(∪表示并集,在这里有混合的意思)
原来它们产生了爱的结晶!
言归正题,笔锋立转。其中黄光、青光、紫光这些由原色光产生的光,叫做间色光,也叫二次光。如果只通过两种色光混合就能产生白色效果,那么这两种光就是互为补色。比如红光与青光互为补色,蓝光和黄光互为补色,绿光和紫光互为补色。
加法混合模式适用在本身会发光的并且直接映入我们眼帘的物体。比如投影仪,太阳,电视机、电脑的显像装置(原理是在屏幕上会分布有极细小的像素点元件–荧光粉,当显像装置发射的电子束撞击在其上是就会使其发光–红、绿、蓝)
加法混合中混合的光越多,其明度就越高。
2.减法混合
减法混合是指色料的混合。白光通过有色的滤片之后,一部分光被吸收,一部分被反射出来。老话说的没错,学会数理化,走遍全天下。于是我又想起了中学物理教材中关于光的透射内容。记不太清了,大概就是这个意思:混合光在通过某一颜色的透明介质时,该光中除该颜色外的其他颜色成分的光会被吸收,而该颜色的光的成分可以安全通过,或被反射出来。比如白光(红光+绿光+蓝光)在透过品红色(蓝色+红色)滤片时,白光中的绿光会被“吸收”。而蓝光和红光会因被嫌弃得以安全的通过滤片。如果感觉这难以理解,说句人话就是“缺啥补啥”呗。
附注
上述的“缺啥补啥”其实理解的不完全正确。这是我们从看到品红色滤镜后才认为它是品红色的。想一下,树叶为什么是绿的,是因为大部分除了绿色以外其他颜色的光被它吸收了,只有绿色光背反射了出来。其实这是一个先有鸡还是先有蛋的问题。不是因为叶子不缺绿色才不“吸收”绿色,而是它根本就不吸收绿色,只有绿色光被反射出来了,所以我们“看见”的是绿色
减法混合的三原色是黄、青、品红(RGB三原色的补色),也就是所谓的CMYK模式,其中C,Cyan,青色;M,Magenta,品红;Y,Yellow,黄色;K,Black,黑色。在这里,K的黑色是充当游击队员的角色,用来校正颜色。把调配颜色比作是一场战役,那么C、M和Y是负责主线战场的,主线战场已经正面迎敌。为了胜利,K得去打游击战,哪里需要点那里。最终我们获得了胜利,得到了想要的准确的颜色。CMYK是印刷色彩模式,之所以要用黑色来调配,我想是因为现在工艺很难得到高纯度的黄、青、品红色的透明材料,以至于得不到真正的黑(得到的是灰),所以要加一点黑来调配。对于打印技术,这样做也有一个好处,因为大多数人的书写习惯,一般的油墨打印机使用黑色的频率最高(一般文档之类的都使用黑色的字),所以在更换墨盒时只需要更换黑色墨盒就能大大的降低成本,帮助环保。
好了,是时候来偷窥减法混合脱去外衣的肌肤了:
在白光的透射下
- 品红∩黄光=红光
- 品红∩青光=蓝光
- 黄光∩青光=绿光
- 品红∩黄光∩青光=黑
(∩表示交集,在这里有过滤的意思)
其中红光、绿光、蓝光这些由原色光产生的光,叫做间色光,也叫二次光。如果只通过两种色光混合就能产生黑色效果,那么这两种光就是互为补色。比如红光与青光互为补色,蓝光和黄光互为补色,绿光和紫光互为补色。
减法混合适用于有滤片效果的事物,比如滤片、玻璃、打印机中的打印装置、印刷机中的印刷装置
在减法混合中,混合的色越多,明度越低,纯度也会有所下降
3.中性混合
中性混合是基于人的视觉“错觉”产生的混合模式,它的混合介质可以是色光也可以是色料。之所以称为中性混合,是因为它不变化色光或发光材料本身,混色效果的亮度既不增加,也不减低
根据视觉“错觉”产生的颜色混合有两种方式
- A:颜色旋转混合:把两种或多种色并置于一个圆盘上,通过动力令其快速旋转,而看到的新的色彩。颜色旋转混合效果在色相方面与加法混合的规律相似,但在明度上却是相混各色的平均值。
- B:空间混合:将不同的颜色并置在一起,当它们在视网膜上的投影小到一定程度时,这些不同的颜色刺激就会同时作用到视网膜上非常邻近的部位的感光细胞,以致眼睛很难将它们独立地分辨出来,就会在视觉中产生色彩的混合,这种混合称空间混合。
**
“描述”色彩
(一)描述方式
从上面的精彩讲述,可能大致已经知道了日常生活中我们是如何“创造”色彩的了吧。既然这样,那么是时候去增进感情,增加彼此之间的了解了。就像恋爱,当你找到了恋爱对象并且确立了关系之后,下一步呢?当务之急就是称呼问题了,以后见面怎么呼叫对方,总不能一见面就叫“哎,那个谁”吧。于是我们就开始琢磨亲呢的爱称。对于色彩的亲昵爱称还不少,我们描述它的时候,可以用上述rgb模式,CMYK模式,也可以用HEX(十六进制)模式,HSl模式,HSV模式、HSB模式。总之,随你顺口的来。但是不同场合,具体的爱称要有约束。比如在css这种大场合下,我们可以用HEX模式、rgb模式和hsl模式的爱称,却用不了CMYK模式。要想放肆一些大不了弄出个rgba模式和hsla模式喽(表示ALpha通道,是一种透明度的通道)。下面我来主要研究一下hsl模式。
(二)hsl模式
为什么要搞一个hsl模式的称呼呢?因为它是更符合人类的直观思维方式。我对这种描述色彩的方式情有独钟。
首先hsl模式中,H,Hue,色相;S,Saturation,饱和度;L,Lightness,亮度,它们是色彩的三个属性,通过这三个属性的值我可以确定唯一的一个我们所能感知的颜色。
物理题:你对你的朋友述说心事:“我今天看见一个女孩,她穿白色的上衣,黑色的休闲裤,染着淡黄色的头发,她真吸引我”。请找出这段话包含的几种颜色,据此大致推测这些颜色的色相、饱和度和亮度
我的参考答案是:
- 白色:色相不确定(但一定有),饱和度:100%,亮度:100%
- 黑色:色相不确定(但一定有),饱和度:100%,亮度:0%;
- 淡黄色:色相黄色,饱和度:50%-100%之间,亮度:50%-100%之间
当然答案是开放的,题也是我编造的,如果要是真有这样的题,我看我弄几个五年高考三年模拟都不行。之所以要举上面的例子,只是为了说明我们看到的每个颜色都可以用色相、饱和度和亮度来描述。
1.色相H
佛家有云:色即是空,空即是色。很多人误解成美色,其实色即使相,万物万相,美色只不过是其中之一。“相”反馈给我们是物的某种形式下的状态。色相就是光反馈给我们颜色形式下的状态。不同波长的光在我们的眼中成了不同的颜色的反馈。610nm750nm波长的光,我们的大脑(多核处理器)就会把它自动处理成红颜色的状态,400nm430nm波长的光,它就会处理成紫色的状态。总之色相就是指不同波长光的数学描述。把色相的表示看成一个圆盘,其值为0-360(正好是原盘度数)。
其中主要的色相有:
- 0/360表示红色
- 60表示黄色
- 120表示绿色
- 180表示青色
- 240表示蓝色
- 300表示品红色(紫色)
2.饱和度 S
饱和度又叫纯度,彩色度,它反映了光的杂质度,纯度越高,光反映出来的颜色越鲜艳。纯度越低颜色越显得灰。90后的我经历过黑白电视到彩电的蜕变,那就是电视机饱和度的提升。饱和度的值为0%~100%。0%时颜色为灰色,100%时颜色最鲜艳,是纯颜色。总结一下,我的理解是,饱和度就是纯颜色掺灰色的比例。
下图从右到左为红颜色饱和度由高到低的变化
3.明度 L
明度又叫亮度,它是光线数量的反映。打个比方,阳光透过窗外稀稀拉拉的树叶照射到我的棕色书桌上,映入我眼帘的是我那暗棕色的书桌,一阵风吹过来,有更多的光照射到了我的书桌上面,映入我眼帘的是亮棕色的书桌。这就是明度。明度的值为0%~100%。0%时没有光线照射进来,那么反应的颜色为黑色;100%光线照射进来的数量为最多,那么反应的颜色为白色。
下图从右到左为红颜色明度由高到低的变化