颜色的前世今生10·HSB拾色器详解

八卦结束~干货来了~

首先看一下HSB模式的界面。

每一个字母对应的，是颜色三属性的英文单词的首字母：

也许有同学没有看过之前详细说明三属性的章节，没关系，下面打个更通俗的比方，回顾一下颜色三属性的概念。

假设光谱是玻璃缸里的一缸水。如果水面平静，就是消色，黑白灰。如果水面起了波浪，波峰的位置（特征波长），决定了颜色的色相。

由于补色的概念非常重要，同时又比较难理解，在这里就顺便再补充说明一下：

如果两种颜色的波形加起来，正好把水面填平，就互为补色。

所以补色就是叠加起来会形成消色的一对颜色。

在现代色相环中，补色会被安排在色相环的两头，相差180度。

简单吧？楼主讲明白了吧？小得意~~

进一步，水位线的高低，决定了明度。

最后水波浪的起伏程度，决定了饱和度。水面波动越剧烈，饱和度越高。完全没有波动，就是饱和度为0的消色。

HSB拾色器的实质，就是通过调整Hue、Saturation、Brightness这三个参数来选取颜色的拾色器。

具体操作界面：

左边的矩形区域（色域），显示了在H参数固定为0度时，不同饱和度、明度的所有颜色。可以用鼠标在该区域直接选取颜色。

中间的窄条区域，可以通过拖动小滑块，改变H的值。

H的单位是度，这个其实是从色相环的概念而来。整个色相环转一圈，不就是360°吗？所以H的选择范围是从0度到360°，并且H=0°和H=360°色相是一样的。也有其他的软件，采用在色相环里选择色相的界面，比如著名的开源图像软件GIMP，待会儿会讲到。

这是系统默认的界面，H前的点选框默认被选中。意思是，H是主要要调整的参数，需要通过滑块来做精细调整。

如果点选了S前面的选框，色域和滑块区域界面会相应的发生改变。滑块调整针对的就是饱和度S。由于S是一个相对的概念，所以变化范围是0%~100%。

以下图为例，拖动滑块到94%，左边的色域，显示的就是S为94%时的所有颜色。依次按照色相（横坐标）和明度（纵坐标）排列。

同理，如果点选了B前面的选框，滑块调整针对的就是明度B。同样B是一个相对的概念，变化范围是0%~100%。色域矩形显示的，就是明度B为45%的时候，所有不同的色调和不同饱和度的颜色。

是不是有同学觉得，S和B的界面好像。有个简单的窍门可以分辨他们：在中等明度下，左边矩形色域的颜色从上到下变黑，就是S模式；变灰，就是B模式。原因大家动动脑筋就明白啦~\(≧▽≦)/~啦啦啦

另外看一下其他软件的HSB拾色器界面，以GIMP为例，默认界面基本和PS一样。

值得一提的是GIMP还有一个色环模式的界面。选择色相的界面是一个色相环。这么做的好处，在于选择邻近色和对比色非常方便。比如，需要补色的时候，直接反向180度就可以了，非常直观。在PS的界面上就做不到这一点。那么不好的地方呢，就是色域的面积比较小，用鼠标点选颜色的时候不够精确。两种界面各有千秋吧！

这么一看，拾色器是不是不难？

其实难的是Hue、Saturation、Brightness的概念。要搞明白HSB分别代表什么。理解了概念，软件操作上多实践一下自然就会了。

直观而言，Hue改变的是颜色的赤橙黄绿青蓝紫。

Saturation提高，颜色变纯；S降低，颜色变“浊”，发灰（中等明度时）。

Brightness提高，颜色变亮，B降低，颜色变“暗”，发黑。

做到对这个变化心中有数，HSB就自然知道该怎么用了。

HSB模式的最佳工作场合，是在已有颜色的基础上，进行饱和度、明度的微调。

当你想要画出水彩风格的画时，就需要水彩风格的配色，大多数是中等明度低饱和度的颜色。

当你想要古典油画风格时，选择的颜色一般饱和度高，明度高中低都需要。如下图的例子。

（当然这么说水彩和油画的区别，有点太粗糙，太随意了，大概就是那个意思，你懂的。）

当你定下了配色的基调，也就定下明度、饱和度的基本风格，这时调色用HSB模式就特别方便。

因为在HSB模式下，可以完美固定HSB中的某一个参数，只对其他两个参数做改变。

比如下图的第一个例子，采用HSB模式，减小S到0的过程中，色相没有一点点的改变，仍然是非常正的红色。

但是如果不用HSB模式，而采用RGB模式，靠添加绿色和蓝色来改变饱和度，就有可能出现第二个例子的情况：

饱和度变了，同时色相也变了，灰色微微发青（当然被楼主弄得有点夸张了）。

当你不需要改变色相时，就需要非常仔细的、反复调整RGB比例。等你好不容易调整好了，颜色正了，但是明度可能又不是你想要的。。。这就要再来一遍，甚至无数遍。。。这实在太心塞了有木有。。。楼主真的发自内心的感谢匠白光大叔！

综上，完全不改变色相，只改变明度或者饱和度的操作，只有HSB能做到。

RGB、CMYK都是牵一发动全身的节奏。Lab比较特别，可以固定L（明度），但不能固定色相和饱和度。

但是并不是说其他模式就没有用了，各有各的用！慢慢来，每个模式楼主都要八一遍！

讲到这里，这些知识用作平时的使用就已经够啦！下面再讲一些高阶冷门知识，提高逼格专用~~

1. 色域≠色空间；
尤其在计算机介入图形学之后，色域的概念发生了微妙的变化，不能等同于某个系统所能生成的所有颜色，而是这个“所有颜色”的一个子集。

色空间，可以理解为，以色相、饱和度、明度为三维坐标轴的空间。色域是这个空间中的某一个二维截面。先看下图的HSV部分。

图e，即为HSV色彩空间的3D模型，一个圆柱体。分布了RGB系统能形成的所有颜色。

图f，是饱和度S为100%的色域，可以视为圆柱体的侧面的二维展开。

图g，是明度B（≈HSV系统的V）为50%时的圆柱体横截面，包括了B=50%的所有不同饱和度和纯度的颜色，也就是B=50%时的色域。

图h，色相H=0°/180°的纵切面。只看H=0°这一半的话，是不是很眼熟？就是PS界面里面的矩形色域啦~

如果没有特别交代，色域一般指某一个呈色系统形成的色空间里，明度最大的横截面。

2. PS、GIMP等，采用的是HSB色空间，另外一些软件会采用上图左边的HSL色空间。比如Windows的Office系列。

左边矩形为亮度L（Lightness）=50%的色域，选择好色相和饱和度后，再用右边的滑动条改变亮度L。两者的微妙区别在于：增加亮度L超过50%时，不但明度发生了变化，颜色也越来越浅，只到变为白色。而这个时候饱和度不是应该是0吗？但是系统还显示为改变L之前的饱和度值。。。

为什么要这样定义呢？以下是楼主的个人理解，欢迎探讨。

人眼能识别的低饱和度+高明度的颜色是非常丰富的，这是因为人眼对明度的变化非常敏感，相比之下，对饱和度的变化就不怎么敏感了。

观察HSL系统的图d，和HSB系统的图h，低饱和度+高明度的颜色，在HSL系统里占据的面积更大，更方便选择。

HSB系统里，低饱和度+高明度的颜色面积太小。为了增加选择的精细度，PS提供了针对HSB三个参数分别进行精细调整的滑块操作。这就增加了UI的复杂程度。我们可以直观的看到，Office的拾色器就比PS的拾色器界面简单很多，对非专业人士来说，更加易用。

所以HSL和HSB也算是各有千秋吧，只是当我们看到HSL系统的时候，饱和度的定义不能按照平时的概念来理解。

呼，写了这么多，好累~楼主表示还是讲八卦比较开心。。。

今天就到这里~

在进一步讲RGB拾色器前，下一章要先讲讲RGB色光加法色的工作原理。

——红光、绿光、蓝光到底是如何合成白光的？如何形成丰富的色彩的？

——液晶屏幕的优点和局限在哪里？

——PS里面的RGB通道到底该如何理解？

下次再见~

颜色的前世今生10·HSB拾色器详解相关推荐

PS学习笔记——拾色器和色彩空间
作为绘图.修改.色彩调整的基础,拾色器是一个非常重要的工具.如果颜色不存在于画面上或图像内,而是需要人为设定,就需要使用拾色器. 位于工具面板下方,可以看到前景色/背景色选项.或者可以打开色板面板和颜 ...
vue吸管拾色器、利用canvas获取坐标点颜色、canvas获取坐标点颜色图片跨域、图片转base64、colorPicker
vue吸管拾色器.利用canvas获取坐标点颜色.canvas获取坐标点颜色图片跨域.图片转base64.colorPicker 1.需求:表格中主颜色和次颜色是需要从缩略图上吸取颜色,然后渲染色块, ...
安卓自定义时间选择器_微信小程序拾色器（颜色选择器）组件
点击上方"极客小寨",选择"置顶公众号" 第一时间关注程序猿(媛)身边的故事大家好,我是独立开发者东东,如今在web项目中不少地方需要用到颜色选择器,比如设置 ...
Android Studio设置颜色拾色器工具Color Picker
你可能下载过一些获取颜色值的一些小工具, 这种方式获取颜色,需要先切换窗口转跳到桌面,然后打开拾色器小工具程序,然后去拾取颜色: 你可能也知道Android Studio自带一个颜色拾色器,通过下面 ...
we-color-picker 微信小程序拾色器（颜色选择器）组件
最近一直在搞小程序,由于刚需一个拾色器,搜了半天也没见人做过,就自己动手撸了一个,还在不断地改进优化中... 项目地址 https://github.com/KirisakiAr... 查看DEMO ...
Android Studio中如何设置颜色拾色器工具
Android Studio如何设置颜色拾色器工具Color Picker? 你可能下载过一些获取颜色值的一些小工具, 这种方式获取颜色,需要先切换窗口转跳到桌面,然后打开拾色器小工具程序,然后去拾取 ...
屏幕拾色器轻松获取网页颜色代码
这几天去了趟上海,又是好几天没更新了,今天回来了,来更新点实用的东西吧-一款网页颜色代码获取工具,其实不只针对网页,所有颜色代码它都可以获取.对于学习设计,网页制作.软件开发的童鞋,准确的获得颜色代码 ...
颜色拾色器 Flexi
Flexi是一个简单.轻量级颜色拾色器,基于SVG/VML技术实现.它没有基于依赖任何JavaScript框架开发,能够将选中的颜色以hexadecimal.HSV.RGB三种格式返回.选择器的尺寸. ...
拾色器，可以取出电脑屏幕的任何颜色，ui以及程序员前端等常用软件，文件很小，300K
作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985,转载请说明出处. 今天给大家介绍一个小软件,挺实用的,叫做拾色器. 用途:取出电脑屏幕的任意颜色,当你 ...
js html颜色代码,原生js编写的浏览器安全色网页拾色器色盘生成颜色代码
原生js编写的浏览器安全色网页拾色器 by js.alixixi.com #abc-colorPicker .colorPick-close,#filter-colorPicker .colorPic ...

颜色的前世今生10·HSB拾色器详解

颜色的前世今生10·HSB拾色器详解相关推荐

最新文章

热门文章