顏色空間 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 在字面意思上是一樣的：

在原理和表現上，hsl 和 hsb 中的 h（色相）完全一致，但二者的 s（飽和度）不一樣， l 和 b （明度）也不一樣：

原理說完，結合實際應用場景看看。下面是 photoshop 和 affinity designer 的拾色器。

兩者分別使用了 hsb 和 hsl 顏色模型。兩個拾色器都是 x 軸表示飽和度，越往右，飽和度越高；y 軸表示明度，越往上明度越高。

先看 photoshop 的 hsb 顏色模型拾色器，如下圖所示，hsb 的 b（明度）控制純色中混入黑色的量，越往上，值越大，黑色越少，顏色明度越高。

如下圖所示，hsb 的 s（飽和度）控制純色中混入白色的量，越往右，值越大，白色越少，顏色純度越高。

接下來看 affinity designer 的 hsl 顏色模型拾色器。如下圖所示，y 軸明度軸，從下至上，混入的黑色逐漸減少，直到 50% 位置處完全沒有黑色，也沒有白色，純度達到最高。繼續往上走，純色混入的白色逐漸增加，到達最高點變為純白色，明度最高。

hsb 和 hsl 的區別解釋完畢。

二者有什麼優劣？因為 rgb 色彩模型是通過不同量的紅綠藍來描述乙個顏色的，對人類來說很不直觀，難以理解。人類更習慣這樣去描述乙個顏色：它是什麼顏色？是鮮豔還是灰暗？hsb 和 hsl 都是基於此被創造出來的。

在弄清楚二者的原理和表現之後，你覺得哪個更符合你的直覺，對你來說，它就更優秀。就日常使用來說，即便你不知道他們的原理，也不會影響你做出優秀的作品。但是，知其然就不會懼怕某天有小白指著 photoshop 拾色器的右上角問你，這裡明度最高，為什麼不是白色的呢？