[ 平面理論教程 ] 設計師的色彩學：人性化的HSB色彩空間- 其他教程 - 骨子愛創意

教學主題: 設計師的色彩學：人性化的HSB色彩空間

大家好!! 小編今天來和大家分享關於 其他教程中的平面理論教程教學

今天的這個教學主題是: 設計師的色彩學：人性化的HSB色彩空間

這教學的重點為這幾點 [ 色彩,空間,人性化,設計師,我們,RGB,系統,CMYK,可 ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

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

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

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

RGB 系統

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

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

在選擇色彩這件事上，我們有更貼近人類感官的方式。

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

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

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

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

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

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

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

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

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

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

貼心提醒: 按Ctrl+Alt+Z和Ctrl+Shift+Z組合鍵分別為在歷史記錄中向後和向前 ( 或者可以
使用歷史面板中的菜單來使用這些命令 )。結合還原 ( Edit／Undo )命令使
用這些熱鍵可以自由地在歷史記錄和當前狀態中切 換。

HSV 由美國計算機圖學家 Alvy Ray Smith 於 1978 年發明，至今誕生了約 30 多年的時間，在計算機圖學中其實並不是一個新的東西了。如以上的例子，其實在許多操作系統中都已經默認給使用者使用，但在繪圖軟件中卻常常因於用戶選擇的 文件模式、而默認給用戶 RGB 或是 CMYK 的選色器。當你覺得對於選擇色彩很苦手時，下次不仿找尋一下選色器的選項，找出 HSB 的選色面板試試看，也許會有全新的發現：

貼心提醒: 使用選框工具( Marquee Tools )的時候，按住Shift鍵可以劃出 正方形和正圓
的選區；按住Alt鍵將從起始點為中心勾劃選區。

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

看完小編分享的教學之後 是不是對平面理論教程中的其他教程教學更熟悉了呢?

希望我們所介紹的 設計師的色彩學：人性化的HSB色彩空間 這教學會喜歡

文章標題: 骨子愛創意- 設計師的色彩學：人性化的HSB色彩空間–轉載請註明來源處

本教學分類為平面理論教程中的 其他教程相關教學

文章相關關鍵字為: 色彩,空間,人性化,設計師,我們,RGB,系統,CMYK,可

本文永久連結 :設計師的色彩學：人性化的HSB色彩空間

本文轉載自 :VIA