八卦結束~干貨來了~

首先看一下HSB模式的界面。

每一個字母對應的，是顏色三屬性的英文單詞的首字母：

也許有同學沒有看過之前詳細說明三屬性的章節，沒關系，下面打個更通俗的比方，回顧一下顏色三屬性的概念。

假設光譜是玻璃缸里的一缸水。如果水面平靜，就是消色，黑白灰。如果水面起了波浪，波峰的位置（特征波長），決定了顏色的色相。

由于補色的概念非常重要，同時又比較難理解，在這里就順便再補充說明一下：

如果兩種顏色的波形加起來，正好把水面填平，就互為補色。補色也稱為對比色。

所以補色就是疊加起來會形成消色的一對顏色。

簡單吧？樓主講明白了吧？小得意~~

進一步，水位線的高低，決定了明度。

最后水波浪的起伏程度，決定了飽和度。水面波動越劇烈，飽和度越高。完全沒有波動，就是飽和度為0的消色。

HSB拾色器的實質，就是通過調整Hue、Saturation、Brightness這三個參數來選取顏色的拾色器。

具體操作界面：

左邊的矩形區域（色域），顯示了在H參數固定為0度時，不同飽和度、明度的所有顏色。可以用鼠標在該區域直接選取顏色。

中間的窄條區域，可以通過拖動小滑塊，改變H的值。

H的單位是度，這個其實是從色相環的概念而來。整個色相環轉一圈，不就是360°嗎？所以H的選擇范圍是從0度到360°，并且H=0°和H=360°色相是一樣的。也有其他的軟件，采用在色相環里選擇色相的界面，比如著名的開源圖像軟件GIMP，待會兒會講到。

這是系統默認的界面，H前的點選框默認被選中。意思是，H是主要要調整的參數，需要通過滑塊來做精細調整。

如果點選了S前面的選框，色域和滑塊區域界面會相應的發生改變。滑塊調整針對的就是飽和度S。由于S是一個相對的概念，所以變化范圍是0%~100%。

以下圖為例，拖動滑塊到94%，左邊的色域，顯示的就是S為94%時的所有顏色。依次按照色相（橫坐標）和明度（縱坐標）排列。

同理，如果點選了B前面的選框，滑塊調整針對的就是明度B。同樣B是一個相對的概念，變化范圍是0%~100%。色域矩形顯示的，就是明度B為45%的時候，所有不同的色調和不同飽和度的顏色。

是不是有同學覺得，S和B的界面好像。有個簡單的竅門可以分辨他們：在中等明度下，顏色從上到下變黑，就是S模式；變灰，就是B模式。原因大家動動腦筋就明白啦~(≧▽≦)/~啦啦啦

另外看一下其他軟件的HSB拾色器界面，以GIMP為例，默認界面基本和PS一樣。

值得一提的是GIMP還有一個色環模式的界面。選擇色相的界面是一個色相環。這么做的好處，在于選擇鄰近色和對比色非常方便。比如，需要補色的時候，直接反向180度就可以了，非常直觀。在PS的界面上就做不到這一點。那么不好的地方呢，就是色域的面積比較小，用鼠標點選顏色的時候不夠精確。兩種界面各有千秋吧！

這么一看，拾色器是不是不難？

樓主覺得，其實難的是Hue、Saturation、Brightness的概念。要搞明白HSB分別代表什么。理解了概念，軟件操作上多實踐一下自然就會了。

但從樓主自己的經驗來說，當你想選用一個全新的顏色時，特別是要給頁面做配色的時候，HSB模式其實并不是很好用。為什么呢？因為你通常情況下并不知道自己想要個什么樣的顏色。。。。

很多大神也說了，需要配合圖片做配色的時候，最好從顏色吸管開始，吸取一個圖片已有的顏色，然后再進入HSB模式進行微調。

對樓主來說，HSB模式的最佳工作場合，是在已有顏色的基礎上，進行飽和度、明度的微調。選定主題色之后，再根據需要，改變色相，配出需要的鄰近色和對比色。

因為在HSB模式下，可以完美固定HSB中的某一個參數，只對其他兩個參數做改變。這一點，完全符合人的色彩直覺，只有HSB能做到。RGB、CMYK都是牽一發動全身的節奏。Lab比較特別，可以固定L（明度），但不能固定色相和飽和度。

講到這里，這些知識用作平時的使用就已經夠啦！下面再講一些高階冷門知識，提高逼格專用~~

1.色域≠色空間；
尤其在計算機介入圖形學之后，色域的概念發生了微妙的變化，不能等同于某個系統所能生成的所有顏色，而是這個“所有顏色”的一個子集。

色空間，可以理解為，以色相、飽和度、明度為三維坐標軸的空間。色域是這個空間中的某一個二維截面。先看下圖的HSV部分。

圖e，即為HSV色彩空間的3D模型，一個圓柱體。分布了RGB系統能形成的所有顏色。

圖f，是飽和度S為100%的色域，可以視為圓柱體的側面的二維展開。

圖g，是明度B（≈HSV系統的V）為50%時的圓柱體橫截面，包括了B=50%的所有不同飽和度和純度的顏色，也就是B=50%時的色域。

圖h，色相H=0°/180°的縱切面。只看H=0°這一半的話，是不是很眼熟？就是PS界面里面的矩形色域啦~

2.PS、GIMP等，采用的是HSB色空間，另外一些軟件會采用上圖左邊的HSL色空間。比如Windows的Office系列。

左邊矩形為亮度L（Lightness）=50%的色域，選擇好色相和飽和度后，再用右邊的滑動條改變亮度L。兩者的微妙區別在于：增加亮度L超過50%時，不但明度發生了變化，顏色也越來越淺，只到變為白色。而這個時候飽和度不是應該是0嗎？但是系統還顯示為改變L之前的飽和度值。。。

為什么要這樣定義呢？以下是樓主的個人理解，歡迎探討。

人眼能識別的低飽和度+高明度的顏色是非常豐富的，這是因為人眼對明度的變化非常敏感，相比之下，對飽和度的變化就不怎么敏感了。

觀察HSL系統的圖d，和HSB系統的圖h，低飽和度+高明度的顏色，在HSL系統里占據的面積更大，更方便選擇。

HSB系統里，低飽和度+高明度的顏色面積太小。為了增加選擇的精細度，PS提供了針對HSB三個參數分別進行精細調整的滑塊操作。這就增加了UI的復雜程度。我們可以直觀的看到，Office的拾色器就比PS的拾色器界面簡單很多，對非專業人士來說，更加易用。

所以HSL和HSB也算是各有千秋吧，只是當我們看到HSL系統的時候，飽和度的定義不能按照平時的概念來理解。