颜色空间(HSV/HSB与HLS)的区别

概念定义

RGB 是对机器很友好的色彩模式，但并不够人性化，因为我们对色彩的认识往往是”什么颜色？鲜艳不鲜艳？亮还是暗？”。

HSL 模式和 HSV(HSB) 都是基于 RGB 的，是作为一个更方便友好的方法创建出来的。HSB 为 色相，饱和度，明度；HSL 为 色相，饱和度，亮度，HSV 为色相，饱和度，明度。

HSB 和 HSV 是是一样的，只是叫法不同，HSL 则还有一些细微的区别：在所有的情况下，H(Hue) 代表色相，S(Saturation) 代表饱和度。Hue（色相）是指取值范围在0-360°的圆心角，每个角度可以代表一种颜色。

B 在 HSB 模式中是 Brightness 的意思, V 在 HSV 中是值，但是所表述的是一个东西：对光的量或光源的功率的感知。

色相(H)和明度（值）(V/B)可以在0 - 1或者0% - 100%间取值。HSL 稍微有一些不同，Hue（色相）和 HSB/HSV 模式中一样用数值表示，但是， S，同样代表“饱和度”，定义不一样，且需要转换。

L 代表亮度，和 Brightness/Value 不一样。Brightness（明度）是被认为是”光的量“，可以是任何颜色。而 Lightness（亮度）是作为”白的量“来理解的。

下图是HSV

下两图是HLS

这里的Chroma就是Saturation饱和度

具体说明HSV/HSB与HLS的区别

首先， HSB 和 HSV 是同一个东西，只是名称不同，本文后面仅使用 HSB，当提到它的时候，也代表 HSV。

HSB 和 HSL 在字面意思上是一样的：

• H 指的是色相（Hue），就是颜色名称，例如“红色”、“蓝色”；
• S 指的是饱和度（Saturation），即颜色的纯度；
• L（Lightness） 和 B（Brightness）是明度，颜色的明亮程度

在原理和表现上，HSL 和 HSB 中的 H（色相） 完全一致，但二者的 S（饱和度）不一样， L 和 B （明度 ）也不一样：

• HSB 中的 S 控制纯色中混入白色的量，值越大，白色越少，颜色越纯；
• HSB 中的 B 控制纯色中混入黑色的量，值越大，黑色越少，明度越高
• HSL 中的 S 和黑白没有关系，饱和度不控制颜色中混入黑白的多寡；
• HSL 中的 L 控制纯色中的混入的黑白两种颜色。

原理说完，结合实际应用场景看看。下面是 Photoshop 和 Affinity Designer 的拾色器。

两者分别使用了 HSB 和 HSL 颜色模型。两个拾色器都是 X 轴表示饱和度，越往右，饱和度越高；Y 轴表示明度，越往上明度越高。

先看 Photoshop 的 HSB 颜色模型拾色器，如下图所示，HSB 的 B（明度）控制纯色中混入黑色的量，越往上，值越大，黑色越少，颜色明度越高。

如下图所示，HSB 的 S（饱和度）控制纯色中混入白色的量，越往右，值越大，白色越少，颜色纯度越高。

接下来看 Affinity Designer 的 HSL 颜色模型拾色器。如下图所示，Y 轴明度轴，从下至上，混入的黑色逐渐减少，直到 50% 位置处完全没有黑色，也没有白色，纯度达到最高。继续往上走，纯色混入的白色逐渐增加，到达最高点变为纯白色，明度最高。

HSB 和 HSL 的区别解释完毕。

二者有什么优劣？因为 RGB 色彩模型是通过不同量的红绿蓝来描述一个颜色的，对人类来说很不直观，难以理解。人类更习惯这样去描述一个颜色：它是什么颜色？是鲜艳还是灰暗？HSB 和 HSL 都是基于此被创造出来的。

在弄清楚二者的原理和表现之后，你觉得哪个更符合你的直觉，对你来说，它就更优秀。就日常使用来说，即便你不知道他们的原理，也不会影响你做出优秀的作品。但是，知其然就不会惧怕某天有小白指着 Photoshop 拾色器的右上角问你，这里明度最高，为什么不是白色的呢？