[原创]ActionScript3游戏中的图像编程（连载十五）

总目录：http://www.cnblogs.com/iloveas/p/3879125.html

 

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，还是广义上的色相模型。