首先， 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（明度）控制純色中混入黑色的量，越往上，值越大，黑色越少，顏色明度越高。