|
1樓
大 中
小 發表於 2007-5-8 21:44
我們對於色彩的「純度」概念出了什麼問題？
這個帖子源於小紅 (Redfall)一個問題，關於小紅，不用我多介紹，她就是訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。的作者。連她都覺得困擾的色彩問題，是什麼呢？我們來看看……
Redfall：問一個常常讓我疑惑的問題：我以前以為刺眼的顏色飽和度就高，柔和的顏色飽和度就低，但後來寫文章的時候看數值顯示才發現不是這樣的。這是為何？
經由解答，小紅覺得這些知識有普及的必要性，也可以作為她在網上陸續刊出的《網頁設計與配色實例分析》RGB與HSB內容的一個補充。因此，我應她的邀請，將我們在MSN上關於這個問題的對話整理在下面。
Quester：其實，這可能是很多人會誤解的問題。關於色彩的理論，我之前說過，屏幕色彩，印刷色彩，繪畫色彩，是三種相關但又相互獨立的體系，他們對色彩概念的描述是不同的，說談及的三原色也不同。因此，最近我一直在強調，在討論色彩問題之前，先搞清楚大家在哪一個範圍裡面講問題，以免造成不必要的爭論和紛擾。
小紅說的「我以前以為刺眼的顏色飽和度就高，柔和的顏色飽和度就低」這個觀念對嗎，以小紅的科班底子來講，不可能有這樣基礎概念錯誤的可能，因為，美術教科書上的確是這樣寫的。
孟塞爾色立體
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
這就是我所說的概念差異：傳統美術和設計學科，對色彩（準確的說是「顏色」）的描述，是基於孟塞爾色立體的(孟塞爾顏色系統 (Munsell Color System)是美國藝術家阿爾伯特孟塞爾Albert H. Munsell（1858-1918）在1898年創製的顏色描述系統。至今仍是比較色法的標準。)，我們知道，孟氏色立體有三類「極色」，白色極、黑色極、純色極。這樣一來，色立體看起來就有點像飛碟。單個純顏色，不管是往裡面「摻入」黑色變暗還是「摻入」白色變淡都是屬於「純度」變化。
那麼，現在我們在電腦上用來描述色彩的「設備無關性」HSB，是怎麼來描述的呢？
HSB色彩平面映射
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
HSB，看起來是很直觀的H(Hue)色相、S（Saturation）純度、B（Brightness)明度。這裡補充一個概念要引起大家注意：B（Brightness)明度，L（Lightness）亮度 （來自於Lab色彩模式）在色彩學裡面是兩個概念，計算方法也不同，請不要混淆。
要說明HSB怎麼來計算色彩，要從HSB和RGB的關係來講，下面的內容涉及到HSB和RGB的計算公式，或許有些枯燥，但是為了瞭解根本還是請耐心看下去，我也盡量用通俗的語言來描述他們：
因為RGB和HSB中都有個B，避免混淆，公式中用V來表示HSB的B。
讀入值為RGB是0~1之間的小數，由0~255轉換。
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
HSB色立體圓錐
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
我們來看看我們關心的S（純度）的產生：純度 ＝ RGB三值中的最大值和最小值的差 和 最大值的比值
那麼也就是說，這個差值越懸殊，色彩的純度就越大。
即使是▓▓▓▓ R0 G255 B180 （H 162 S 100 B 100）這樣高亮顏色，或者是 ▓▓▓▓ R0 G23 B16 （H 162 S 100 B 9）這樣的很暗黑的顏色，純度也是一樣高。
再來看看B（明度）的產生：明度 = RGB三值中的最大值
也就是說，明度是由最大值的原色所決定的，和顏色的混合無關，並不是我們想像中的RGB的疊加越多，明度就越大。
到此，我們就可以明白，傳統的美術教學概念和HSB色彩模式的表述上有細微的區別，說得簡單一些，是因為他們採用了不同的色立體結構來詮釋色彩關係。
比如，R：0，G：90，B：200。那RGB中的最大值200，所代表的原色是什麼呢？明度應該是用百分比來表示的吧，如何會和這個原色牽連到一起呢？？
200/255=0.784=78% 這個就是HSB 的 B 明度值
讓我們來驗證一下：
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
你可以把HSB 理解為 人於計算機之間 進行色彩溝通的一個界面。
因為計算機描述色彩在屏幕上顯示，是以RGB表示的，但我們人類不可能用眼睛來「分光」，直接讀出RGB的值。
但是我們可以描述一個顏色用「在這個黃色的基礎上，更紅一些，更亮一點，不要太鮮艷」這樣的方式。
那麼 黃色，就是 色相（H），更紅一些，是指的色相變化； 更亮一些，是明度（B）上的調節提高；不要太鮮艷，是純度（S）的調整降低。
我們可以用 HSB 來調整和對比顏色， 然後 經過 HSB 到 RGB 的轉換，得到新的RGB色值來指導它在屏幕如何顯示出來。
HSB 色彩更適合「人類的表達方式」，比直接讀給你RGB色值更加具有感性的認識。
唯一的問題，會對你剛開始學習使用和認讀 HSB 色彩有一點困難的是：你要學會背熟色相環的度數，如下：
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
0 紅色 R= 0 =(120*0) ▲頂點
60 黃色 Y= B-180°（補色）＝60
120 綠色 G=120=(120*1) ▲右下角
180 青色 C= R-180°（補色）＝180
240 藍色 B=240=(120*2) ▲左下角
300 品紅色 M= G+180°（補色）＝300
360＝0 回到紅色 R
那麼，我們 看到 這樣一組數值 H 100 S 50 B 80 是什麼感覺？
H 100，在黃綠之間，靠近綠色多點。
S 50，純度中等，比較不耀眼和濃艷。
B 80，明度較高，是比較淺的色彩。
看看，和你的感覺吻合嗎？
( H 100, S 50, B 80)
(R136,G204,B102)
RGB三個數值中一個數值最小值越小越趨向於零時，HSB的S飽和度就越高。
RGB三者間數值越接近飽和度越低，RGB三者間數值反差越大，飽和度越高。
另外貼一個圖，我覺得把色相環變化成時鐘更好記憶！
訪客無法瀏覽此圖片或連結，請先 註冊 或 登入會員 。
|
