首先， 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 拾色器的右上角問你，這里明度最高，為什么不是白色的呢？