淺談色彩學：人性化的 HSB 色彩空間
RGB 與 CMYK 是大家很熟悉的色彩描述系統(tǒng)，在許多地方我們都可以發(fā)現(xiàn)使用這兩種方式標示色彩的色彩碼，雖然這兩種系統(tǒng)的組成原理不一樣，但是是可以透過轉(zhuǎn)換取得另外一個系統(tǒng)的色碼。也就是說肉眼可見的大部分的色彩都可以使用 RGB 或是 CMYK 來表示并取得相同的色彩（或是很接近的顏色）。
在科學的分類上，我們簡單的將 RGB 稱之為色光的三原色，而 CMYK 則稱為印刷的四原色（或?qū)⒓t、黃、藍稱為色彩三原色，后述）：
RGB 系統(tǒng)
RGB 是指由紅（Red ），綠 （Green），藍（Blue）三個色光組成，亦被稱為色光三原色，在電腦全彩顯示中分別以 0~255 個色階表達，有時則以十六進位（Hex）00～ff 來表示。由于人眼感知到的色彩為光線的反射，因此當越多光線投射入眼睛中的時候，人眼感知到的是越亮的色彩，因此色光的特性為，越疊加出來的結(jié)果越亮。
實際上我們?nèi)粘Ｉ钪薪佑|的顯示器、電視、電腦螢?zāi)?、手機螢?zāi)坏鹊冉允鞘褂眠@個方式去達成的，像是螢?zāi)簧系拿恳粋€像素其實都是由三個不同顏色的發(fā)光體，并且利用各自不同的發(fā)光亮度，來達到顯示各種顏色的結(jié)果。（為方便說明，下圖格線為示意用，并不保證為 LCD 實際排列順序）
CMYK 系統(tǒng)
CMYK 被稱為印刷四原色，由于顏料的特性剛好和光線相反，顏料是吸收光線，而不是增強光線。因此顏料的三原色必須是可以個別吸收 R、G、B 的顏色，那就是它們的補色：青（Cyan ）、洋紅 （Magenta）以及黃色（Yellow），在印刷上我們已以濃度 0~100% 來表示。但由于現(xiàn)實生活中，完美無雜質(zhì)的顏料是不存在的，因此即使溷合三種顏色也無法得到純粹的黑色，因此在印刷中加入了黑色（Black），組成 CMYK 四個印刷用的色彩，在印刷時依照順序一層層的疊印在紙張上，形成我們在印刷品上看到的色彩：
然而，這兩個系統(tǒng)都有著致命的缺點存在：他們并不符合人類感官上的直覺性。比如說以下這個藍色的 RGB 值為（0, 167 , 229）， CMYK 則為 80/8/0/0。
我們可以在繪圖軟體中任意使用 RGB 或 CMYK 的其中一個并輸入以上的數(shù)值得到一樣的藍色，但是當我們想要調(diào)出「比這個藍還要淺（深）一點的藍色」、時，相信沒有人能夠快速的使用 RGB 或 CMYK 去找出來，就算是透過繪圖軟體的圖形化介面亦是：
由于 RGB 與 CMYK 都是極為貼近色彩顯示原理的色彩表達方式，在許多時候我們不得不去瞭解并使用它們，例如在螢?zāi)簧线M行校色、選擇色彩空間、控制圖片在網(wǎng)頁上所顯示的效果時，我們就不得不去瞭解 RGB 的原理跟特性而去調(diào)整。而印刷上更需要透過控制 CMYK 的數(shù)值來達到掌握印刷品質(zhì)、甚至避免出現(xiàn)背印等等造成最終印刷品不符合原本設(shè)計的狀況發(fā)生。
HSL 和 HSV 色彩空間 ( HSV 有時也稱作 HSB）
我們對色彩的認識往往是這樣的：「這是什麼顏色？鮮不鮮豔？很亮還是很暗？」。事實上，人類對于色彩的第一個感知往往是從色相（Hue）開始的，我們在色彩學中最早接觸的的色相環(huán)即是將肉眼可見的色彩的色相排列出來而得：
比起 RGB 系統(tǒng)，HSL 與 HSV 使用了更貼近人類感官直覺的方式來描述色彩（Wiki條目 : HSL 與 HSV 色彩空間 ）
HSV （有時也稱作 HSB）為色相（Hue）、飽和度（Saturation）以及色調(diào)（Value ）所組成，稱呼成 HSB 的時候的 B 指的是亮度（Brightness），為了與軟體中的用詞統(tǒng)一，接下來以 HSB 稱呼。
HSB 的概念很接近色彩學所常使用的色彩空間模型，由于是由三個屬性所組合而成，因此常以色立體表示，例如下圖為日本孟塞爾顏色系統(tǒng) （Munsell Color System）的色立體模型，常被用來教學與解說色彩系統(tǒng)的組成：
但由于我們常用的操作系統(tǒng)依然為二度空間的系統(tǒng)，因此在電腦系統(tǒng)的選色介面中常以不同的介面出現(xiàn)，我想其實大家都很熟悉，像是下圖為 Mac OSX 系統(tǒng)中的選色器，可以看見一個全彩的色相環(huán)，環(huán)狀的軸向為色相、而圓邊到靠近圓心的長度即為飽和度的變化，再透過右邊獨立的控制條來控制色彩的明暗度。抑或也可以切換到滑桿模式中，分別調(diào)整三種不同的素質(zhì)來達到選擇顏色的目的：
而 Windows 系統(tǒng)中的選色器也可以找到類似的設(shè)計：
也許你會覺得 HSB 并沒有比較簡單，但是實際使用過就會發(fā)現(xiàn)，它是多麼的好用（以下示范介面為 Illustrator 選色器，不知道為什麼中文版把 “H” 寫成「高」），例如以上的例子的藍色以 HSB 表達為（196, 100, 90），當我們想要一個「比這個藍還要淺（暗）一點的藍色」時，我們可以簡單的調(diào)整明度（Brightness）的數(shù)值，來得到同樣色彩、但是不同明度的結(jié)果：
而也可以簡單的調(diào)整飽和度（Saturation）來控制色彩的飽和度，得到飽和度較低的色彩：
更甚至可以直接調(diào)整色相（Hue）的數(shù)值，得到飽和度跟明度相同、但色相不同色彩：
HSV 由美國電腦圖學家 Alvy Ray Smith 于 1978 年發(fā)明，至今誕生了約 30 多年的時間，在電腦圖學中其實并不是一個新的東西了。如以上的例子，其實在許多作業(yè)系統(tǒng)中都已經(jīng)預(yù)設(shè)給使用者使用，但在繪圖軟體中卻常常因于使用者選擇的文件模式、而預(yù)設(shè)給使用者 RGB 或是 CMYK 的選色器。當你覺得對于選擇色彩很苦手時，下次不彷找尋一下選色器的選項，找出 HSB 的選色面板試試看，也許會有全新的發(fā)現(xiàn)：
而在網(wǎng)頁應(yīng)用中，CSS3 亦已經(jīng)支援了這種直覺化的色彩表達方式（使用的是 HSL 與 HSLA ，A 為 Alpha，即透明度的意思），網(wǎng)頁設(shè)計師已經(jīng)可以透過這種直覺化的色彩選擇方式，來快速調(diào)整網(wǎng)頁上的色彩，而不用再痛苦的在 RGB 色碼（而且還常常是使用16進位碼）來表示，在調(diào)整以及微調(diào)更接近人類的感官直覺。
本文地址：http://m.likemindfilms.com/tutorial/di1458.html
