|
這個(gè)帖子源于小紅 (Redfall)一個(gè)問題，關(guān)于小紅，不用我多介紹，她就是《網(wǎng)頁設(shè)計(jì)與配色實(shí)例分析》的作者。連她都覺得困擾的色彩問題，是什么呢？我們來看看……
Redfall：問一個(gè)常常讓我疑惑的問題：我以前以為刺眼的顏色飽和度就高，柔和的顏色飽和度就低，但后來寫文章的時(shí)候看數(shù)值顯示才發(fā)現(xiàn)不是這樣的。這是為何？
經(jīng)由我的解答，小紅覺得這些知識有普及的必要性，也可以作為她在網(wǎng)上陸續(xù)刊出的《網(wǎng)頁設(shè)計(jì)與配色實(shí)例分析》RGB與HSB 內(nèi)容的一個(gè)補(bǔ)充。因此，我應(yīng)她的邀請，將我們在MSN上關(guān)于這個(gè)問題的對話整理在下面。
Quester：其實(shí)，這可能是很多人會(huì)誤解的問題。關(guān)于色彩的理論，我之前說過，屏幕色彩，印刷色彩，繪畫色彩，是三種相關(guān)但又相互獨(dú)立的體系，他們對色彩概念的描述是不同的，說談及的三原色也不同。因此，最近我一直在強(qiáng)調(diào)，在討論色彩問題之前，先搞清楚大家在哪一個(gè)范圍里面講問題，以免造成不必要的爭論和紛擾。
小紅說的“我以前以為刺眼的顏色飽和度就高，柔和的顏色飽和度就低”這個(gè)觀念對嗎，以小紅的科班底子來講，不可能有這樣基礎(chǔ)概念錯(cuò)誤的可能，因?yàn)椋佬g(shù)教科書上的確是這樣寫的。
這就是我所說的概念差異：傳統(tǒng)美術(shù)和設(shè)計(jì)學(xué)科，對色彩（準(zhǔn)確的說是“顏色”）的描述，是基于孟塞爾色立體的(孟塞爾顏色系統(tǒng) (Munsell Color System)是美國藝術(shù)家阿爾伯特孟塞爾Albert H. Munsell（1858-1918）在1898年創(chuàng)制的顏色描述系統(tǒng)。至今仍是比較色法的標(biāo)準(zhǔn)。)，我們知道，孟氏色立體有三類“極色”，白色極、黑色極、純色極。這樣一來，色立體看起來就有點(diǎn)像飛碟。單個(gè)純顏色，不管是往里面“摻入”黑色變暗還是“摻入”白色變淡都是屬于“純度”變化。
那么，現(xiàn)在我們在電腦上用來描述色彩的“設(shè)備無關(guān)性”HSB，是怎么來描述的呢？
HSB，看起來是很直觀的 H (Hue)色相、S（Saturation）純度、B（Brightness)明度。這里補(bǔ)充一個(gè)概念要引起大家注意：B（Brightness)明度，L（Lightness）亮度 （來自于Lab色彩模式）在色彩學(xué)里面是兩個(gè)概念，計(jì)算方法也不同，請不要混淆。
要說明HSB怎么來計(jì)算色彩，要從HSB和RGB的關(guān)系來講，下面的內(nèi)容涉及到HSB和RGB的計(jì)算公式，或許有些枯燥，但是為了了解根本還是請耐心看下去，我也盡量用通俗的語言來描述他們：
因?yàn)镽GB和HSB中都有個(gè)B，避免混淆，公式中用V來表示HSB的B。
讀入值為RGB是0~1之間的小數(shù)，由0~255轉(zhuǎn)換。
H = (0+(G-B)/(MAX-MIN))*60 ,IF R=MAX
H = (2+(B-R)/(MAX-MIN))*60 ,IF G=MAX
H = (4+(R-G)/(MAX-MIN))*60 ,IF B=MAX
S = MAX-MIN (Windows模式算法，圓錐色立體)
S = (MAX-MIN)/MAX (Adobe模式算法，圓柱色立體)
V = MAX
我們來看看我們關(guān)心的S（純度）的產(chǎn)生：純度 ＝ RGB三值中的最大值和最小值的差 和 最大值的比值
那么也就是說，這個(gè)差值越懸殊，色彩的純度就越大。即使是████ R0 G255 B180 （H 162 S 100 B 100）這樣高亮顏色，或者是 ████ R0 G23 B16 （H 162 S 100 B 9）這樣的很暗黑的顏色，純度也是一樣高。
再來看看B（明度）的產(chǎn)生：明度 = RGB三值中的最大值
也就是說，明度是由最大值的原色所決定的，和顏色的混合無關(guān)，并不是我們想像中的RGB的疊加越多，明度就越大。
比如，R：0，G：90，B：200。那RGB中的最大值是200。
200/255=0.784=78% 這個(gè)就是HSB 的 B 明度值
讓我們來驗(yàn)證一下:
到此，我們就可以明白，傳統(tǒng)的美術(shù)教學(xué)概念和HSB色彩模式的表述上有細(xì)微的區(qū)別，說得簡單一些，是因?yàn)樗麄儾捎昧瞬煌纳Ⅲw結(jié)構(gòu)來詮釋色彩關(guān)系。
另外有人又問：HSB 它到底對我們有什么用處呢？
你可以把HSB 理解為 人于計(jì)算機(jī)之間 進(jìn)行色彩溝通的一個(gè)界面。
因?yàn)橛?jì)算機(jī)描述色彩在屏幕上顯示，是以RGB表示的，但我們?nèi)祟惒豢赡苡醚劬怼胺止狻�，直接讀出RGB的值。
但是我們可以描述一個(gè)顏色用“在這個(gè)黃色的基礎(chǔ)上，更紅一些，更亮一點(diǎn)，不要太鮮艷”這樣的方式。
那么 黃色，就是 色相（H），更紅一些，是指的色相變化； 更亮一些，是明度（B）上的調(diào)節(jié)提高；不要太鮮艷，是純度（S）的調(diào)整降低。
我們可以用 HSB 來調(diào)整和對比顏色， 然后 經(jīng)過 HSB 到 RGB 的轉(zhuǎn)換，得到新的RGB色值來指導(dǎo)它在屏幕如何顯示出來。
HSB 色彩更適合“人類的表達(dá)方式”，比直接讀給你RGB色值更加具有感性的認(rèn)識。
唯一的問題，會(huì)對你剛開始學(xué)習(xí)使用和認(rèn)讀 HSB 色彩有一點(diǎn)困難的是：你要學(xué)會(huì)背熟色相環(huán)的度數(shù)，如下：
 
0 紅色 R= 0 =(120*0) ▲頂點(diǎn)
60 黃色 Y= B-180°（補(bǔ)色）＝60
120 綠色 G=120=(120*1) ▲右下角
180 青色 C= R-180°（補(bǔ)色）＝180
240 藍(lán)色 B=240=(120*2) ▲左下角
300 品紅色 M= G+180°（補(bǔ)色）＝300
360＝0 回到紅色 R
那么，我們 看到 這樣一組數(shù)值 H 100 S 50 B 80 是什么感覺？
H 100，在黃綠之間，靠近綠色多點(diǎn)。
S 50，純度中等，比較不耀眼和濃艷。
B 80，明度較高，是比較淺的色彩。
看看，和你的感覺吻合嗎？
██████████████████████
(H100, S50, B80) (R136, G204, B102)
本文鏈接：http://m.95time.cn/design/doc/2007/4512.asp 
出處：藍(lán)色理想
責(zé)任編輯：moby
|
