1.3.1 HSB模式的色彩空间模型及其分支
第一次接触HSB模式的原理,是从以下这个地址开始的。
http://zh.wikipedia.org/wiki/HSL%E5%92%8CHSV%E8%89%B2%E5%BD%A9%E7%A9%BA%E9%97%B4
图 1.21是我从上面的文章拷过来的一张色彩空间示意图,可见HSB在业界至少还可以细分成HSL和HSV两种模式。它们都使用了三维坐标系来描述色彩值的分布。
图 1.21 色彩空间示意图
第一个属性是色相,它代表颜色的种类,如红,黄,绿属于不同种类的颜色。色相值的大小来源于物理学中的可见光谱(也就是我们常说的七色彩虹)。其中,位于两端的红光与紫光在颜色形态上(可能与反射色光的种类有关)比较接近,伟大的物理学家牛顿第一次把直线状的颜色光谱围成一个圆环,并将色相坐标轴做成了环状。在这样的一个色相环中,0度和360度完全等价,为红色,其它色彩按照彩虹渐变方式进行排列,分别为:橙30,黄60,绿120,蓝240,紫300(分布不均匀的原因跟RGB处理有关,实际上分布均为的模式更有利于指导色彩搭配)。引入亮度和饱和度以后,所有颜色便组成了一个实心圆柱体(实质上它们都可以由圆锥体展开,详情可以查阅原文)。这一个属性,HSV和HSL的理解完全一致。图 1.21中,环形箭头所指的角度(即实线与虚线之间的夹角,顺时针为正,逆时针为负)就等于Hue的值。
Saturation值在坐标系中表现为坐标点到圆心(圆柱中轴线)的距离,距离圆心越远,饱和度越高,色彩越鲜艳。取值范围为0~100。
最后一个属性代表亮度,两种色彩模式用了不同的单词(LightLess和Value),坐标系里,它表示当前点到圆柱底部的距离。取值范围为0~100。
图 1.21中,左侧圆点所表示的是H=240,S=70,L=100的白色。而右侧圆点则表示H=120,S=67,V=83的绿色。
我无法用很简洁的语句概括它们俩之间的异同,但我们还是可以通过图 1.21看出一些特征性的差别:
1 HSL的亮度跟数学的概念非常吻合,亮度为0时必然全黑,亮度为100时必然全白。而HSV只有亮度为0的时候全黑,亮度为100时RGB可能只有一种颜色的光被全部反射出来。
2 两者对饱和度的理解不甚一致,HSL认为很白的颜色也能代表饱和,但HSV认为很白就一定很不鲜艳。所以HSV模式里,只有当S等于0才有可能全白。而S=100,V=100只相当于HSL模式中L=50的位置。
事实上,这两种色彩模式都存在一定的缺陷,如黄色比粉红往往要刺眼一些,但是HSL模式中,黄色的亮度还不如粉红的高,又比如淡紫比深蓝的感觉要鲜艳,HSV模式却告诉我们,前者的饱和度比后者要低。
灰度值(稍后的章节会讲述)可以一定程度上解决以上问题,但是局限性依然很大。作者曾经幻想过用纯数学手段来弥补自己美术细胞的不足,结果都以失败告终,直至某位美工给我推荐了几款配色软件以后我才如梦初醒。一个看起来不太起眼的ColorPicker也得占用十几兆的存储空间,查阅安装目录后发现,光数据表就接近10M,而且还是压缩过的。可见美学的知识,还真不是区区几条数学公式就说了算。但无论如何,在此我还是代表全天下没有美术功底的程序员们,向设计出HSB模型的数理学家致以崇高的敬意。
一般涉及取色器的软件都会使用到HSB模式,而且HSL和HSV两者只选其一,比如Windows的系统颜色面板和Microsoft Office会使用HSL,而Adobe系列的软件如Flash,Photoshop则倾向于选择HSV。由于使用HSV的软件往往喜欢用B代替V,所以导致我经常搞混HSB,HSL和HSV之间的关系,也让我在后续的日子里走了不少弯路。在此希望我的前车之鉴,可以让大家不会重蹈覆辙,在碰到类似问题的时候,建议先搞清楚别人所提到的HSB具体是指HSL,HSV,还是广义上的色相模型。
ActionScript3游戏中的图像编程(连载十五)