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

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

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

RGB 系統

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

實際上我們日常生活中接觸的顯示器、電視、電腦螢幕、手機螢幕等等皆是使用這個方式去達成的，像是螢幕上的每一個像素其實都是由三個不同顏色的發(fā)光體，并且利用各自不同的發(fā)光亮度，來達到顯示各種顏色的結果。（為方便說明，下圖格線為示意用，并不保證為 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 的數值來達到掌握印刷品質、甚至避免出現背印等等造成最終印刷品不符合原本設計的狀況發(fā)生。

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

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

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

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

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

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

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

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

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

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

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

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

原文鏈接:http://dclick.fourdesire.com/2013/01/04/color-hsb/