您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 設(shè)計理論 >> 瀏覽設(shè)計教程

淺談色彩學(xué):人性化的 HSB 色彩空間

 

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

在科學(xué)的分類上,我們簡單的將 RGB 稱之為色光的三原色,而 CMYK 則稱為印刷的四原色(或?qū)⒓t、黃、藍稱為色彩三原色,后述):

RGB 系統(tǒng)

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

實際上我們?nèi)粘I钪薪佑|的顯示器、電視、電腦螢?zāi)弧⑹謾C螢?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)開始的,我們在色彩學(xué)中最早接觸的的色相環(huán)即是將肉眼可見的色彩的色相排列出來而得:


比起 RGB 系統(tǒng),HSL 與 HSV 使用了更貼近人類感官直覺的方式來描述色彩(Wiki條目 : HSL 與 HSV 色彩空間 )

HSV (有時也稱作 HSB)為色相(Hue)、飽和度(Saturation)以及色調(diào)(Value )所組成,稱呼成 HSB 的時候的 B 指的是亮度(Brightness),為了與軟體中的用詞統(tǒng)一,接下來以 HSB 稱呼。

HSB 的概念很接近色彩學(xué)所常使用的色彩空間模型,由于是由三個屬性所組合而成,因此常以色立體表示,例如下圖為日本孟塞爾顏色系統(tǒng) (Munsell Color System)的色立體模型,常被用來教學(xué)與解說色彩系統(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 由美國電腦圖學(xué)家 Alvy Ray Smith 于 1978 年發(fā)明,至今誕生了約 30 多年的時間,在電腦圖學(xué)中其實并不是一個新的東西了。如以上的例子,其實在許多作業(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://dclick.fourdesire.com/2013/01/04/color-hsb/

[教程作者:admin]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di1458.html
從用戶體驗出發(fā)的反傳統(tǒng)網(wǎng)頁設(shè)計
網(wǎng)頁設(shè)計中畫線框圖需要注意的七件事
圖趣網(wǎng)微信
建議反饋
×