Open abbshr opened 10 years ago
今天简单的看了看色彩学和颜色理论,终于明白视觉错觉和基色选择的原理,涨了不少姿势。
在玩前端时没少和颜色打交道,大多时间里也都是选选配色。其实我觉得配色不仅仅是看着颜色表一个个试,还应该有混色计算,补色计算等等,例如你想写一个图像处理的软件,其中的反色,混色,颜色渐变等等就需要考虑了。
高中物理讲过,“红(R)、绿(G)、蓝(B)” 是光的三原色,也称三基色。在做网页配色时常见的RGB值指的就是红绿蓝三色各自强度值以16进制表示的拼接值。 三种色光按不同比例混合就能得到所有颜色(七色)的色光,而同等强度的三基色混合,就会出现灰色,灰色代表一个范围(不含色光):[ 纯黑, 纯白 ],其间任何一种颜色都属于灰色。
要说混色理论,首先得了解一些颜色的基础知识。
除了三基色RGB,还有另外一种三基色CMY。按人眼能观察到的颜色来源分类,前者属于光源三基色,如灯光、显示器;而后者属于染料三基色:青(C)、洋红(M)、黄(Y),如报纸、书等本身不发光的物体。 其实染料三基色也是基于光源三基色而得到的。因为青色吸收红色,洋红吸收绿色,黄色吸收蓝色,这样就再次组成了红绿蓝三基色,通过控制CMY各自的强度,同样达到产生各种色彩。
下面简单介绍RGB三原色的混色计算。
由于不同波长的色光叠加会产生另一种色光,而且这一叠加可能蕴含某种规律。我们将三原色各自的强度以二位16进制数字表示,也就是将强度人为分成256个点。先从最简单的黑色#000000,白色#FFFFFF考虑。黑色是三色皆尽,白色是三色至上,而#000000 + #FFFFFF = #FFFFFF,也就是说“在伸手不见五指的黑夜里手电筒里射出的是白光”,数字的设定恰好符合感官的描述。
#000000
#FFFFFF
#000000 + #FFFFFF = #FFFFFF
对于基本的混色计算,我们可以从单一颜色来分解:比如颜色值#60b044,可以拆成颜色1#600000、颜色2#00b000以及颜色3#000044三色光的叠加,当然,其他值的组合也行,只要满足R的加和是60,G的加和时b0,B的加和是44。所以,任意色的普通混色就是对应相加。
#60b044
#600000
#00b000
#000044
CMY的同理,只不过是RGB的补色运算,即: CMY:(x,y,z) => RGB:(#FF-x,#FF-y,#FF-z)
CMY:(x,y,z) => RGB:(#FF-x,#FF-y,#FF-z)
这样我们就可以写一个混色函数:
function mix(ca, cb) { r = ca >> 16 + cb >> 16 g = ca & 0xff00 >> 8 + cb & 0xff00 >> 8 b = ca & 0xff + cb & 0xff return (r > 0xff ? 0xff : r) << 16 + (g > 0xff ? 0xff : g) << 8 + b > 0xff ? 0xff : b; }
今天简单的看了看色彩学和颜色理论,终于明白视觉错觉和基色选择的原理,涨了不少姿势。
在玩前端时没少和颜色打交道,大多时间里也都是选选配色。其实我觉得配色不仅仅是看着颜色表一个个试,还应该有混色计算,补色计算等等,例如你想写一个图像处理的软件,其中的反色,混色,颜色渐变等等就需要考虑了。
高中物理讲过,“红(R)、绿(G)、蓝(B)” 是光的三原色,也称三基色。在做网页配色时常见的RGB值指的就是红绿蓝三色各自强度值以16进制表示的拼接值。
三种色光按不同比例混合就能得到所有颜色(七色)的色光,而同等强度的三基色混合,就会出现灰色,灰色代表一个范围(不含色光):[ 纯黑, 纯白 ],其间任何一种颜色都属于灰色。
要说混色理论,首先得了解一些颜色的基础知识。
除了三基色RGB,还有另外一种三基色CMY。按人眼能观察到的颜色来源分类,前者属于光源三基色,如灯光、显示器;而后者属于染料三基色:青(C)、洋红(M)、黄(Y),如报纸、书等本身不发光的物体。
其实染料三基色也是基于光源三基色而得到的。因为青色吸收红色,洋红吸收绿色,黄色吸收蓝色,这样就再次组成了红绿蓝三基色,通过控制CMY各自的强度,同样达到产生各种色彩。
下面简单介绍RGB三原色的混色计算。
由于不同波长的色光叠加会产生另一种色光,而且这一叠加可能蕴含某种规律。我们将三原色各自的强度以二位16进制数字表示,也就是将强度人为分成256个点。先从最简单的黑色
#000000
,白色#FFFFFF
考虑。黑色是三色皆尽,白色是三色至上,而#000000 + #FFFFFF = #FFFFFF
,也就是说“在伸手不见五指的黑夜里手电筒里射出的是白光”,数字的设定恰好符合感官的描述。对于基本的混色计算,我们可以从单一颜色来分解:比如颜色值
#60b044
,可以拆成颜色1#600000
、颜色2#00b000
以及颜色3#000044
三色光的叠加,当然,其他值的组合也行,只要满足R的加和是60,G的加和时b0,B的加和是44。所以,任意色的普通混色就是对应相加。CMY的同理,只不过是RGB的补色运算,即:
CMY:(x,y,z) => RGB:(#FF-x,#FF-y,#FF-z)
这样我们就可以写一个混色函数: