PhotoshopHSB色彩模式介绍

Photoshop HSB色彩模式介绍

老实说，Photoshop、Illustrator以及GoLive的取色滑块，都内置了一项很实用的功能——动态颜色滑块。你可以在【编辑 首选项】的常规选项里打开或关闭它。看下面中间这张图，可以直观地预见操作结果：把R滑块往右拖，颜色就变成了粉红色；把B滑块向左移，就得到了草绿色；把G滑块向右拉，就变成了浅绿色。听起来很直观，对吧？但问题来了：这种操作方式，其实还是不够“直觉”。尤其是当你想改一个颜色的时候，比如现在是个蓝色，想让它更亮更浅，你得同时调整三个滑块才能搞定。如下右图所示。

不妨回想一下，我们平时是怎么描述颜色的？看到一件衣服，我们会说“这是黄色的”，或者“亮黄色的”。看到晴朗的天空，我们脑子里首先蹦出来的是“蓝色”，随后可能是“浅蓝色”。看到湖水，我们立刻想到“绿色”，再进一步会想到“碧绿色”。可见，人脑对色彩的直觉感知，是有固定顺序的：先看色相（是红、橙、黄、绿、青、蓝、紫中的哪一个），再看深浅。

HSB色彩模式，正是顺着这条逻辑发展而来的。它把颜色拆解为三个因素：色相（H）、饱和度（S）、明度（B）。这里有个关键点：它将我们大脑里笼统的“深浅”概念，拆成了两个独立变量——饱和度（S）和明度（B）。饱和度，通俗点说，就像老式电视机的色彩浓度，饱和度高，颜色就显得艳丽；饱和度低，颜色就灰蒙蒙、接近灰色。明度，也叫亮度，好比彩色电视机的亮度控制，亮度高，颜色明亮；亮度低，颜色暗淡。亮度调到最高，颜色变成纯白；调到最低，则变成纯黑。

那么，具体怎么用HSB来取色呢？假设你想要一个浅绿色，先把H滑块拖到绿色区域，然后调整S和B，直到找到满意的位置。通常，浅色的饱和度会比较低，而亮度比较高。如果你想要一个深蓝色，同样是先把H拖到蓝色，再去调整S和B。一般来说，深色的饱和度高，而亮度低。如下图所示左图和中间图所示。

选用这种方式的优势，在于修改的便利性。比如，你想把刚才的深蓝色加亮一点，只需要移动B滑块就行，既方便又直观。要是想选择一个灰度色呢？那就更简单了：将S滑块拖到0%，然后只拉动B滑块，就可以像在灰度模式里一样自由选择灰度了。下面右图展示的就是这个效果。不过有一点需要注意：在HSB模式下得到的灰度，与灰度模式下的滑块K的数值，是两码事。在Photoshop里如果要精确选择灰度色，还是应该以灰度滑块的数值为准。

接着聊HSB的参数细节。在这个模式里，S和B的取值范围都是百分比，这好理解，0%到100%嘛。但唯独H的取值单位是“度”。这个“度”是什么意思？是角度，它表示色相在色相环上的具体位置。还记得我们之前学过的色相环吗？加上角度标志，就豁然开朗了。

参考下左图。色相环从0度的红色开始，逆时针方向角度递增。60度是黄色，120度是绿色，180度是青色……一直转到360度，又回到了红色。你可以自己在Photoshop里拉动H滑块对照一下，感受这种角度变化带来的颜色流转。需要注意的是，Photoshop的HSB模式里只能输入整数，这意味着它能够精确定位的色彩数量是360万种。虽然数量上不如RGB模式的1670万种，但对于我们的日常设计工作来说，已经是绰绰有余了。

最后，我们回过头来看Photoshop的拾色器。拾色器的H模式，其实就是HSB取色方式的一种图形化展现。色谱条，就是色相；而那个巨大的取色框，则包含了饱和度和明度两个维度——横方向代表饱和度，竖方向代表明度。如下右图所示。