你港咩
这事还得从盘古开天辟地说起……算了算了太长了，就先从眼睛对自然光的认知开始吧，自然光（红橙黄绿青蓝紫等）属于特定波长的电磁波，电磁波被眼睛接受经大脑解释为颜色。而一般人眼睛中感知色彩的视锥细胞只有三种，分别对红、绿、蓝最敏感，根据三细胞感知程度的不同解释为不同的颜色，这也正是三原色的由来，电脑中的 RGB 色彩表示方式（也称为 RGB 色彩模型）也以此为基础。
HSB 呢，这和 HSB 有什么关系？莫急，想写这篇文章呢，是在使用 HSB 色彩表示方式时对其原理比较好奇，想知道饱和度代表了什么？明度又是什么意思？顺便试试 Markdown，于是捣鼓了一下，写下来分享分享，而通过熟悉的事物来理解一个陌生的事物会更加容易，于是捎上咱们的老朋友，RPG，不不不，RGB。
拾色器
本文所有操作均在 PS 的 拾色器 中进行，先介绍下拾色器。
 拾色器.png
|
|---|
分了 6 个区域， ① ② ③ ④ 是四种不同的颜色表示方式，修改其中的数值会实时将颜色显示在 ⑤ 区域，而 ⑥ 是可视化颜色调节区域。
⑥ 区域由两部分构成，二维的矩形框和一维的长条，所以一共可以表示 3 个变量，也即可以表示 ①、② 或 ③ 颜色表示方式，而 ④ 因为有四个变量表示不了，举例来说，上图中选中了 RGB 中的 G，⑥ 中的长条则代表 G，而矩形横轴代表 B，纵轴代表 R。
三生万物——色彩混合
RGB 的基础原理是色彩混合，通过三种原始颜色混合出千万色彩。一般用 RGB 表现颜色是用 0~255 分别代表三种颜色各自分量的大小，比如（255，0，0）表示红色，理论上来讲 RGB 一共可以表示 ，1600 多万种颜色。下面直观地来看看。
 绿50.png
|
 绿150.png
|
 绿250.png
|
|---|
首先看单一分量，上图中红蓝固定为 0，绿色值逐渐调大，可以看到绿色越来越亮，也即接受到的绿色光更多，这也是 HSB 中明度的概念。同时当绿色值变化时，矩形框中的色彩也在不断变化，而这个变化和色相、饱和度、明度都有关系，我们下面再说。
 黄250.png
|
|---|
接着看颜色的混合，比如我想要一个黄色，网上搜一个色彩混合表，黄色由绿色和红色构成，让我们粗略地来试一下，由上图看果然如此，验证了 RGB 的工作方式。这边需要注意的是色彩混合表需要区别光和颜料，颜料的三原色虽然一般说是红黄蓝，但其实是 CMY，天青、洋红、柠黄。
记得初中学物理那会儿，学到三原色，没想到光和颜料的还不一样，一个红绿蓝一个红黄蓝，小小年纪十分困惑，明明都是颜色为什么三原色不一样呢？去问老师，老师没有直接回答，反问道：“应该一样吗？”。不禁陷入了沉思，应该吗？一个是光一个是颜料，应该一样吗？也许这世界就是这样呢。小小的人儿后来长大了，又想起了这个问题，不应该吗？眼睛接受的都是光啊。
继续正题，CMY 其实是 RGB 两两并集的产物，颜料的颜色是反射的颜色，光照在颜料上，一部分频段的光被吸收，另一部分没吸收的光反射出来被看见。CMY 吸收的正好分别是 RGB，比如 Y，吸收 B，反射 R 和 G，红与绿的混合正好是黄色。其实颜料用 RGB 作为三原色也行，只是相较之下调配颜色要吸收更多的色光，会降低明度。
 波长与色彩.jpg
|
|---|
月有阴晴圆缺，世事也难以两全。RGB 表示色彩的方式十分直观，但在上面的过程中也暴露出来一个问题，我要一个黄色还得去查色彩混合表吗，我要橘色、浅蓝色呢？十分的不方便，有什么好办法吗？自然是有的，接下来有请我们的 HSB 登场。
HSB
从色彩表达的实现来说，RGB 是很自然的，符合直觉的，但在使用颜色的过程中却会遇到很大的麻烦。HSB 的诞生想必也是因为前人发现用 RGB 调色极繁从而发明了 HSB，一种可以更好地使用颜色的色彩描述方式，HSB 将颜色分为三个维度，色相、饱和度和明度，下面通过 RGB 从质性的角度分别来理解这三个维度，不会出现转换公式。
Hue
色相划分不同的颜色，是色彩表达的核心，一共 360 种，为了探究 H，将饱和度和明度都设成 100，滑动 H 从 0 到 360。虽然 H 取值是 [0, 360] 一共 361 个值，不过由于色相中 0 是等于 360 的，所以一共是 360 种色彩类别。
 色相.png
|
|---|
上图中色条上方字母意思是在这个位置对应颜色达到最大值。H 从 0 到 360 的整个过程中总有一个原色（RGB 三原色）处于最大值 255，也总有一个处于最小值 0，另外一个渐变。比如从 R 到 RG，红色拉满，没有蓝色，慢慢加绿色，到了 RG 绿色加到最大值，再往右则慢慢减红色……色条在本质上是色环，RGB 在各自的领域内保持最大值，并且两两相溶，色相 360 度，每一度里规定了两两之间的比例。
Brightness
明度代表整体光量，选中 B 拖动滑块，便能轻易发现其含义。
 B100.png
|
 B50.png
|
|---|
观察 B 从 100% 到 50% 时 RGB 的变化，可以发现 RGB 整体随着 B 等比例变化。由于 RGB 值的大小代表了进光量，也就是说 B 代表了整体色光的多少，顺带一提，HSB 是一种设备无关的表示方式，比如 B 表示色光数量是以百分比的形式，而不是尼特等绝对量单位，100% 代表了显示设备所能发出的最亮的色光。
Saturation
饱和度要稍麻烦一些，没关系慢慢来，通过典型边界更容易发现规律，一起来看看饱和度在 100%，50%，0% 下的不同情况吧。
 S100.png
|
 S50.png
|
 S0.png
|
|---|
在亮度 100% 的前提下，RGB 中必有一个处于最大值 255，我愿称它为主色相，另两个为次色相。观察图中 S 从 100% 到 0% 的过程可以发现，主色相保持最大值不变，次色相从 0 涨到 255，也就是从最小值到最大值。因此饱和度表示的是色相的单纯性，饱和度越高，色相越单纯，杂色越少，所以我更喜欢它的另外一个名字，纯度。
明度控制了整体光量，制约着 RGB 所能取得的最大值，影响着纯度的整体表现，不影响其内在比例。
再结合色相对原色比例的影响，可以对纯度作一个整体说明。纯度代表了色相比例的单纯性，纯度降低会破坏色相确定的原色比例，具体破坏方法是添加次色相，添加总量是次色相值到亮度确定的最大值之间的差值，取决于色相比例和整体亮度，添加比例则取决于纯度。
哔哔叨
先吐槽一下，捣鼓色域的时候，在网上查相关资料，各种概念混用搞得头都大了，发现当查到一定深度时，想查到有用的信息就变得格外困难，80% 的重复信息，通用搜索引擎也变得极难用，逼乎在专业知识方面要可靠不少，虽然喜爱的果壳也很专业，可惜内容不够多。
说回色域，也即颜色空间。HSB 和 RGB 都是一种色彩表达方式，而落实到具体载体上，比如显示器，就会牵扯到色域，例如你说的黑是什么黑，五彩斑斓的黑吗？为了解决这种问题，各种色域标准被提出来，比如 sRGB，Adobe RGB 等。
自然界一共有多少颜色？单独这个问题是缺乏意义的，颜色是对光的解释，依赖于具体的接收者，每个视锥细胞大概可以区分 100 种色相，因此一般人能感知大约 种颜色，1931 年 CIE 根据实验数据提出 CIE 1931 色域，1976年修正提出 Lab 色域（对应的色彩模型同名），包含了人眼可见的所有色彩，也是目前最大的色域。
最后有个小疑问，色域有规定色彩精度吗？理论上 RGB 描述色彩可以表现 1600 多万种颜色，而 Lab 可以表现 ，600 多万种，HSB 则可以表现
，300多万种。这是不是说明 RGB 精度更高、色彩表现力更好、在同一色域下可以获得更细腻的色彩呢？也许吧，我累了😂，就算有也是人眼看不出来的区别了。
