ActionScript3游戏中的图像编程（连载十六）

总目录：http://blog.csdn.net/iloveas2014/article/details/38304477

1.3.2 软件中的拾色器如何实现HSB的色彩空间模型

        阅读本书的朋友恐怕很少有机会见到圆柱形的三维取色器，而HSB模式却是一个立体的空间。那么，软件里的颜色拾取器是如何在平面里体现出3D坐标系的呢？让我们从Windows调色板开始研究。

        图1.22是Windows系统调色板的界面，抛开左侧的颜色列表不谈，我们可以把Windows调色板分为两个部分：一个二维的平面和一个一维的滑块。乍一看似乎跟之前的圆柱体空间扯不上任何关系，不过有没发现，最右侧那个一维的条是不是跟圆柱体的母线很像，从上而下呈现出逐渐变暗的趋势？没错，它就相当于圆柱体的高度变化，接着，一维条左边的色彩选取面就相当于圆柱体的横截面了。只是它被拉成了矩形而已。因为我们可以看到，左边缘跟右边缘都是红色，而底部始终为灰色，足以证明它是圆环的一个变体。

 

图 1.22 Windows拾色器

        我们观察一下滑块拖动时，HSL三个值的变化，RGB部分在这里就先忽略了，因为取色面板的是基于HSL模式进行构建的。注意到这三个值的取值范围都被标准化到0~240。
        只拖动右侧的滑块，HSL三个值当中只有L在变化，这跟色彩空间示意图相当吻合。小心翼翼地拖动二维面板的滑块，让它只在水平方向移动，则只有H值在变化（Windows面板用了E这个字母），而只作竖直方向移动的话，就只更改S的值了。

        我不是美术专业人士，但我有阅读过跟网页色彩搭配有关的书籍，里面曾提到过，要使整个页面的色彩比较协调，其中的一个办法就是让色相，饱和度跟亮度这三者之中至少有一项保持基本一致。所以这样的面板对于调出一套比较合理的配色方案还是有一定帮助的。

        当圆柱体被平面化以后，这三条坐标轴就可以随意组合了，不一定再是亮度占着一维空间。下面我们再来看看Flash CS 5.5软件里的颜色面板。

        启动Flash CS 5.5，在确保有fla文档打开的前提下，打开“窗口”——“颜色”面板（Alt+Shift+F9），就能打开如图1.23的颜色面板。

图 1.23 Flash拾色器 

        确保下拉框选定的是纯色，在其下方的单选按钮选中的是HSB中B的那一项。你将会看到跟Windows系统调色板非常类似的界面。不同的是，一维滑块最上方的颜色不是白的了，因为Flash CS5.5使用的是HSV模式，即使B拖到100%，也还是呈现出紫色来。

        拖动一维滑块，我们还可以看到，二维调色面的色彩也会随之更改，即圆柱截面实时更新。与Windows系统调色板相比，这绝对是个优势。它会根据当前点的高度实时截取圆柱的横截面，使您可以第一时间观察到真实的颜色值，非常直观。（图1.24）

图 1.24 调整亮度滑块

        与此同时，一维轴的属性还可以由用户指定，您可以把单选框改到H或者S上，然后左侧的平面就将由剩下的另外两个坐标轴构建。（图 1.25， 图 1.26）

图 1.25   色相调整

 
图 1.26 饱和度调整

        您甚至可以将一维轴设置为R，G或者B，但个人认为此举没有太实在的美学意义。

        Flash CS6新增的Kuler面板（实际上它只是个网站，安装完成以后在CS5.5的扩展菜单里也能找到）比较准确地还原了色彩空间的示意图，用圆来表示H和S坐标轴所构成的平面，从而更有助于我们理解HSV模式的原型尤其是H的概念。（图 1.27）。

图 1.27 Kuler面板

        但需要注意的一点是，Kuler的色环将红和黄的角度拉开了，跟HSB模型中的色环有所不同。因为这样的分布更符合美术上的色彩对比概念，对色彩搭配更有帮助。
跟RGB模式相比，HSB更直观地描述了人类对色彩的真实感知，为色彩的视觉变化提供了一套非常有指导意义的解决方案。诸如变色，明暗调整，对比度更改这一类的事儿，HSB很完美地做到了。虽说RGB也能通过色光反射量实现一些变换，但它对肉眼太不友好了，出来的效果也颇为生硬。

        下面我们来研究下HSB和RGB之间的转换公式。