你港咩

這事還得從盤古開天辟地說起……算了算了太長了，就先從眼睛對自然光的認知開始吧，自然光（紅橙黃綠青藍紫等）屬于特定波長的電磁波，電磁波被眼睛接受經(jīng)大腦解釋為顏色。而一般人眼睛中感知色彩的視錐細胞只有三種，分別對紅、綠、藍最敏感，根據(jù)三細胞感知程度的不同解釋為不同的顏色，這也正是三原色的由來，電腦中的 RGB 色彩表示方式（也稱為 RGB 色彩模型）也以此為基礎(chǔ)。

HSB 呢，這和 HSB 有什么關(guān)系？莫急，想寫這篇文章呢，是在使用 HSB 色彩表示方式時對其原理比較好奇，想知道飽和度代表了什么？明度又是什么意思？順便試試 Markdown，于是搗鼓了一下，寫下來分享分享，而通過熟悉的事物來理解一個陌生的事物會更加容易，于是捎上咱們的老朋友，RPG，不不不，RGB。

拾色器

本文所有操作均在 PS 的 拾色器 中進行，先介紹下拾色器。

拾色器.png

分了 6 個區(qū)域， ① ② ③ ④ 是四種不同的顏色表示方式，修改其中的數(shù)值會實時將顏色顯示在 ⑤ 區(qū)域，而 ⑥ 是可視化顏色調(diào)節(jié)區(qū)域。

⑥ 區(qū)域由兩部分構(gòu)成，二維的矩形框和一維的長條，所以一共可以表示 3 個變量，也即可以表示 ①、② 或 ③ 顏色表示方式，而 ④ 因為有四個變量表示不了，舉例來說，上圖中選中了 RGB 中的 G，⑥ 中的長條則代表 G，而矩形橫軸代表 B，縱軸代表 R。

三生萬物——色彩混合

RGB 的基礎(chǔ)原理是色彩混合，通過三種原始顏色混合出千萬色彩。一般用 RGB 表現(xiàn)顏色是用 0~255 分別代表三種顏色各自分量的大小，比如（255，0，0）表示紅色，理論上來講 RGB 一共可以表示 ，1600 多萬種顏色。下面直觀地來看看。

綠50.png	綠150.png	綠250.png

首先看單一分量，上圖中紅藍固定為 0，綠色值逐漸調(diào)大，可以看到綠色越來越亮，也即接受到的綠色光更多，這也是 HSB 中明度的概念。同時當綠色值變化時，矩形框中的色彩也在不斷變化，而這個變化和色相、飽和度、明度都有關(guān)系，我們下面再說。

黃250.png

接著看顏色的混合，比如我想要一個黃色，網(wǎng)上搜一個色彩混合表，黃色由綠色和紅色構(gòu)成，讓我們粗略地來試一下，由上圖看果然如此，驗證了 RGB 的工作方式。這邊需要注意的是色彩混合表需要區(qū)別光和顏料，顏料的三原色雖然一般說是紅黃藍，但其實是 CMY，天青、洋紅、檸黃。

記得初中學(xué)物理那會兒，學(xué)到三原色，沒想到光和顏料的還不一樣，一個紅綠藍一個紅黃藍，小小年紀十分困惑，明明都是顏色為什么三原色不一樣呢？去問老師，老師沒有直接回答，反問道：“應(yīng)該一樣嗎？”。不禁陷入了沉思，應(yīng)該嗎？一個是光一個是顏料，應(yīng)該一樣嗎？也許這世界就是這樣呢。小小的人兒后來長大了，又想起了這個問題，不應(yīng)該嗎？眼睛接受的都是光啊。

繼續(xù)正題，CMY 其實是 RGB 兩兩并集的產(chǎn)物，顏料的顏色是反射的顏色，光照在顏料上，一部分頻段的光被吸收，另一部分沒吸收的光反射出來被看見。CMY 吸收的正好分別是 RGB，比如 Y，吸收 B，反射 R 和 G，紅與綠的混合正好是黃色。其實顏料用 RGB 作為三原色也行，只是相較之下調(diào)配顏色要吸收更多的色光，會降低明度。

波長與色彩.jpg

月有陰晴圓缺，世事也難以兩全。RGB 表示色彩的方式十分直觀，但在上面的過程中也暴露出來一個問題，我要一個黃色還得去查色彩混合表嗎，我要橘色、淺藍色呢？十分的不方便，有什么好辦法嗎？自然是有的，接下來有請我們的 HSB 登場。

HSB

從色彩表達的實現(xiàn)來說，RGB 是很自然的，符合直覺的，但在使用顏色的過程中卻會遇到很大的麻煩。HSB 的誕生想必也是因為前人發(fā)現(xiàn)用 RGB 調(diào)色極繁從而發(fā)明了 HSB，一種可以更好地使用顏色的色彩描述方式，HSB 將顏色分為三個維度，色相、飽和度和明度，下面通過 RGB 從質(zhì)性的角度分別來理解這三個維度，不會出現(xiàn)轉(zhuǎn)換公式。

Hue

色相劃分不同的顏色，是色彩表達的核心，一共 360 種，為了探究 H，將飽和度和明度都設(shè)成 100，滑動 H 從 0 到 360。雖然 H 取值是 [0, 360] 一共 361 個值，不過由于色相中 0 是等于 360 的，所以一共是 360 種色彩類別。

色相.png

上圖中色條上方字母意思是在這個位置對應(yīng)顏色達到最大值。H 從 0 到 360 的整個過程中總有一個原色（RGB 三原色）處于最大值 255，也總有一個處于最小值 0，另外一個漸變。比如從 R 到 RG，紅色拉滿，沒有藍色，慢慢加綠色，到了 RG 綠色加到最大值，再往右則慢慢減紅色……色條在本質(zhì)上是色環(huán)，RGB 在各自的領(lǐng)域內(nèi)保持最大值，并且兩兩相溶，色相 360 度，每一度里規(guī)定了兩兩之間的比例。

Brightness

明度代表整體光量，選中 B 拖動滑塊，便能輕易發(fā)現(xiàn)其含義。

B100.png	B50.png

觀察 B 從 100% 到 50% 時 RGB 的變化，可以發(fā)現(xiàn) RGB 整體隨著 B 等比例變化。由于 RGB 值的大小代表了進光量，也就是說 B 代表了整體色光的多少，順帶一提，HSB 是一種設(shè)備無關(guān)的表示方式，比如 B 表示色光數(shù)量是以百分比的形式，而不是尼特等絕對量單位，100% 代表了顯示設(shè)備所能發(fā)出的最亮的色光。

Saturation

飽和度要稍麻煩一些，沒關(guān)系慢慢來，通過典型邊界更容易發(fā)現(xiàn)規(guī)律，一起來看看飽和度在 100%，50%，0% 下的不同情況吧。

S100.png	S50.png	S0.png

在亮度 100% 的前提下，RGB 中必有一個處于最大值 255，我愿稱它為主色相，另兩個為次色相。觀察圖中 S 從 100% 到 0% 的過程可以發(fā)現(xiàn)，主色相保持最大值不變，次色相從 0 漲到 255，也就是從最小值到最大值。因此飽和度表示的是色相的單純性，飽和度越高，色相越單純，雜色越少，所以我更喜歡它的另外一個名字，純度。

明度控制了整體光量，制約著 RGB 所能取得的最大值，影響著純度的整體表現(xiàn)，不影響其內(nèi)在比例。

再結(jié)合色相對原色比例的影響，可以對純度作一個整體說明。純度代表了色相比例的單純性，純度降低會破壞色相確定的原色比例，具體破壞方法是添加次色相，添加總量是次色相值到亮度確定的最大值之間的差值，取決于色相比例和整體亮度，添加比例則取決于純度。

嗶嗶叨

先吐槽一下，搗鼓色域的時候，在網(wǎng)上查相關(guān)資料，各種概念混用搞得頭都大了，發(fā)現(xiàn)當查到一定深度時，想查到有用的信息就變得格外困難，80% 的重復(fù)信息，通用搜索引擎也變得極難用，逼乎在專業(yè)知識方面要可靠不少，雖然喜愛的果殼也很專業(yè)，可惜內(nèi)容不夠多。

說回色域，也即顏色空間。HSB 和 RGB 都是一種色彩表達方式，而落實到具體載體上，比如顯示器，就會牽扯到色域，例如你說的黑是什么黑，五彩斑斕的黑嗎？為了解決這種問題，各種色域標準被提出來，比如 sRGB，Adobe RGB 等。

自然界一共有多少顏色？單獨這個問題是缺乏意義的，顏色是對光的解釋，依賴于具體的接收者，每個視錐細胞大概可以區(qū)分 100 種色相，因此一般人能感知大約 種顏色，1931 年 CIE 根據(jù)實驗數(shù)據(jù)提出 CIE 1931 色域，1976年修正提出 Lab 色域（對應(yīng)的色彩模型同名），包含了人眼可見的所有色彩，也是目前最大的色域。

最后有個小疑問，色域有規(guī)定色彩精度嗎？理論上 RGB 描述色彩可以表現(xiàn) 1600 多萬種顏色，而 Lab 可以表現(xiàn) ，600 多萬種，HSB 則可以表現(xiàn) ，300多萬種。這是不是說明 RGB 精度更高、色彩表現(xiàn)力更好、在同一色域下可以獲得更細膩的色彩呢？也許吧，我累了??，就算有也是人眼看不出來的區(qū)別了。