1. 程式人生 > >顏色空間(HSV/HSB與HLS)的區別

顏色空間(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
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 拾色器的右上角問你,這裡明度最高,為什麼不是白色的呢?