淺談色彩學：人性化的 HSB 色彩空間

本文有大量圖檔遺失，我們正在努力恢復中了！

RGB 與 CMYK 是大家很熟悉的色彩描述系統，在許多地方我們都可以發現使用這兩種方式標示色彩的色彩碼，雖然這兩種系統的組成原理不一樣，但是是可以透過轉換取得另外一個系統的色碼。也就是說肉眼可見的大部分的色彩都可以使用 RGB 或是 CMYK 來表示並取得相同的色彩（或是很接近的顏色）。

在科學的分類上，我們簡單的將 RGB 稱之為色光的三原色，而 CMYK 則稱為印刷的四原色（或將紅、黃、藍稱為色彩三原色，後述）：

RGB 系統

RGB 是指由紅（Red ），綠（Green），藍（Blue）三個色光組成，亦被稱為色光三原色，在電腦全彩顯示中分別以 0~255 個色階表達，有時則以十六進位（Hex）00～ff 來表示。由於人眼感知到的色彩為光線的反射，因此當越多光線投射入眼睛中的時候，人眼感知到的是越亮的色彩，因此色光的特性為，越疊加出來的結果越亮。

實際上我們日常生活中接觸的顯示器、電視、電腦螢幕、手機螢幕等等皆是使用這個方式去達成的，像是螢幕上的每一個像素其實都是由三個不同顏色的發光體，並且利用各自不同的發光亮度，來達到顯示各種顏色的結果。（為方便說明，下圖格線為示意用，並不保證為 LCD 實際排列順序）

CMYK 系統

CMYK 被稱為印刷四原色，由於顏料的特性剛好和光線相反，顏料是吸收光線，而不是增強光線。因此顏料的三原色必須是可以個別吸收 R、G、B 的顏色，那就是它們的補色：青（Cyan ）、洋紅（Magenta）以及黃色（Yellow），在印刷上我們已以濃度 0~100% 來表示。但由於現實生活中，完美無雜質的顏料是不存在的，因此即使混合三種顏色也無法得到純粹的黑色，因此在印刷中加入了黑色（Black），組成 CMYK 四個印刷用的色彩，在印刷時依照順序一層層的疊印在紙張上，形成我們在印刷品上看到的色彩：

然而，這兩個系統都有著致命的缺點存在：他們並不符合人類感官上的直覺性。比如說以下這個藍色的 RGB 值為（0, 167 , 229）， CMYK 則為 80/8/0/0。

我們可以在繪圖軟體中任意使用 RGB 或 CMYK 的其中一個並輸入以上的數值得到一樣的藍色，但是當我們想要調出「比這個藍還要淺（深）一點的藍色」、時，相信沒有人能夠快速的使用 RGB 或 CMYK 去找出來，就算是透過繪圖軟體的圖形化介面亦是：

由於 RGB 與 CMYK 都是極為貼近色彩顯示原理的色彩表達方式，在許多時候我們不得不去瞭解並使用它們，例如在螢幕上進行校色、選擇色彩空間、控制圖片在網頁上所顯示的效果時，我們就不得不去瞭解 RGB 的原理跟特性而去調整。而印刷上更需要透過控制 CMYK 的數值來達到掌握印刷品質、甚至避免出現背印等等造成最終印刷品不符合原本設計的狀況發生。

在選擇色彩這件事上，我們有更貼近人類感官的方式。

HSL 和 HSV 色彩空間 ( HSV 有時也稱作 HSB）

我們對色彩的認識往往是這樣的：「這是什麼顏色？鮮不鮮豔？很亮還是很暗？」。事實上，人類對於色彩的第一個感知往往是從色相（Hue）開始的，我們在色彩學中最早接觸的的色相環即是將肉眼可見的色彩的色相排列出來而得：

比起 RGB 系統，HSL 與 HSV 使用了更貼近人類感官直覺的方式來描述色彩（Wiki條目 : HSL 與 HSV 色彩空間）

HSV （有時也稱作 HSB）為色相（Hue）、飽和度（Saturation）以及色調（Value ）所組成，稱呼成 HSB 的時候的 B 指的是亮度（Brightness），為了與軟體中的用詞統一，接下來以 HSB 稱呼。

HSB 的概念很接近色彩學所常使用的色彩空間模型，由於是由三個屬性所組合而成，因此常以色立體表示，例如下圖為日本孟塞爾顏色系統（Munsell Color System）的色立體模型，常被用來教學與解說色彩系統的組成：

但由於我們常用的操作系統依然為二度空間的系統，因此在電腦系統的選色介面中常以不同的介面出現，我想其實大家都很熟悉，像是下圖為 Mac OSX 系統中的選色器，可以看見一個全彩的色相環，環狀的軸向為色相、而圓邊到靠近圓心的長度即為飽和度的變化，再透過右邊獨立的控制條來控制色彩的明暗度。抑或也可以切換到滑桿模式中，分別調整三種不同的素質來達到選擇顏色的目的：

而 Windows 系統中的選色器也可以找到類似的設計：

也許你會覺得 HSB 並沒有比較簡單，但是實際使用過就會發現，它是多麼的好用（以下示範介面為 Illustrator 選色器，不知道為什麼中文版把 “H” 寫成「高」），例如以上的例子的藍色以 HSB 表達為（196, 100, 90），當我們想要一個「比這個藍還要淺（暗）一點的藍色」時，我們可以簡單的調整明度（Brightness）的數值，來得到同樣色彩、但是不同明度的結果：

而也可以簡單的調整飽和度（Saturation）來控制色彩的飽和度，得到飽和度較低的色彩：

更甚至可以直接調整色相（Hue）的數值，得到飽和度跟明度相同、但色相不同色彩：

HSV 由美國電腦圖學家 Alvy Ray Smith 於 1978 年發明，至今誕生了約 30 多年的時間，在電腦圖學中其實並不是一個新的東西了。如以上的例子，其實在許多作業系統中都已經預設給使用者使用，但在繪圖軟體中卻常常因於使用者選擇的文件模式、而預設給使用者 RGB 或是 CMYK 的選色器。當你覺得對於選擇色彩很苦手時，下次不仿找尋一下選色器的選項，找出 HSB 的選色面板試試看，也許會有全新的發現：

而在網頁應用中，CSS3 亦已經支援了這種直覺化的色彩表達方式（使用的是 HSL 與 HSLA ，A 為 Alpha，即透明度的意思），網頁設計師已經可以透過這種直覺化的色彩選擇方式，來快速調整網頁上的色彩，而不用再痛苦的在 RGB 色碼（而且還常常是使用16進位碼）來表示，在調整以及微調更接近人類的感官直覺。

參考資料：