寫給開發們的色彩理論

做爲一個老是去設計領域閒逛的開發，或許能夠更好得把本身對設計的領悟給開發們講清楚，這也是我輸出的第一篇更加偏向於設計領域的文章，畢竟職業仍是開發，只能算一個不入流的旁門左道的設計師，對設計的一些術語表述有誤還請設計大佬諒解。

本文旨在給開發者一個基本的色彩的認識，把一些設計知識帶入開發者的世界裏，但願開發者們能夠從這篇文章中受益。

前言

色彩理論的起源是牛頓三棱鏡發現光能夠分紅七種顏色紅橙黃綠青藍紫，這也初步解釋了彩虹的造成。因爲是漸變的而且仍是首位相連的那種，因此牛頓同時也發明了色輪，這個是色彩理論的最初的探索。後來歌德完善了色彩理論，還把顏色分爲了暖色和冷色。

再後來，顏色理論逐漸被髮揚光大，好比蒙塞爾的球體，還有色環，明度，亮度，飽和度，色相，色調，對比度，灰度等等各類各樣的發現，若是使用過ps調色的人會很熟悉這些概念，而在大多數的開發者眼裏，或許顏色只是計算機裏的一個16進制的數值。

很神奇的是，這些理論的奠定者期中一個是你們熟知的物理學家數學家牛頓，另外一個是散文家，詩人大名鼎鼎的《少年維特之煩惱》的做者歌德。但這點偏偏說明色彩不只僅是設計師關注的，也是科學所關注的，而詩人喜歡色彩是由於色彩和文字同樣在傳遞了感情。

顏色的感受

顏色來源於大天然，來源於人的肉眼所能接受到的大天然不一樣物體所反射的光線。因此顏色的感受更多的也來源於大天然，好比說

綠色表明生機，因爲大天然的包容，因此綠色也表明「原諒」。

紅色會充滿熱情，由於紅色就像火焰同樣熾熱，暗紅色會像血液同樣，因此紅色有時也會有種不詳的感受，後來紅色也表明黨，表示一個在血淚中成長起來，而且充滿熱情的組織。

藍色表明冰冷也表明大海。藍色和白色在會讓人聯想到冬天的雪後透徹的藍天和白茫茫的一片。

藍色和橙色在一塊兒會有種落日和大海的感受。

紫色會比較撫媚，也會讓人以爲浪漫。

感覺不一樣的顏色傳達的感受這個是一個設計師最基本的能力，也是平面設計或者視覺傳達設計中最基礎的知識。

RGB

rgb經過三種不一樣的顏色混合來表達顏色，也是最多見的顏色表示法，混合顏色一般用三原色，即紅綠藍，用這三種顏色混合能夠獲得任意顏色，注意這是光的顏色的拆分，而印刷須要的是三基色，web開發者不會接觸到印刷方面的顏色問題，感興趣的能夠去搜一下三原色和三基色的區別。

顏色的混合

rgb分別是red green和blue，下邊的這張圖裏能夠很清晰的看到混合的過程

當三種顏色都是最大的時候混合出來的顏色就是白色

綠色和紅色混合是黃色（第三個塊）

藍色和紅色混合是洋紅色（第七個塊）

綠色和藍色混合是青色（第五個塊）

橙色的話實際上是較多的紅色和較少的綠色混合的結果（第二個塊），是處於紅色和黃色的中間值。

紫色是較少的紅色和較多的藍色（第八個），等量的紅色和藍色其實應該叫作洋紅色。

若是熟知這些那麼調色就能垂手可得了。

稍微提一下，青，洋紅，黃就是三基色，顏色模式種的另一種模式是CMYK，分別就是說Cyan，Magenta，Yellow還有Blank。開發是不會用到印刷知識的，因此不須要知道這點。

計算機中顏色的表示

計算機爲了表達顏色也有一些規定，最多見的就是#開頭的16進制6位字符串。

16進制是0到f，因此#fff意思是三種顏色都是最大值，因此就是白色。而#fff和#ffffff是等價的，能夠認爲前者是後者的縮寫，好比#ffaa33就能夠縮寫做#fa3

而上面所示的八種顏色用十六進制就是這樣

知道顏色的混合就能很清楚根據給出的色值猜到大概是個什麼顏色

好比#014589，拆分紅rgb就是紅色01，綠色45，藍色89。因爲藍色最多，綠色次之，而藍色加綠色是青色，那較多的而藍色加較少的綠色因此會是一個偏藍的青色。總體色值較低，因此偏暗一些，所以這個色值接近於藏青色。

也能夠根據想要的顏色，寫出一個差很少的色值，好比說想要一個下邊這樣的桃紅色

這個顏色很接近洋紅色，可是比洋紅色更紅，或者說藍色的成分要少一些。而洋紅色是#ff00ff，因此這個顏色大概就是爲#ff0088。

rgba表示

css還提供了一種表示方法是rgba或者rgb，rgba會比rgb多出一個alpha，爲何叫作alpha不叫作opacity呢。

區別在於一張圖片的opacity是50%，那麼意味着全部的區域都是50%的透明度。

而事實上一張圖不一樣地方的透明度是不同的，好比一團火焰，火焰其實在淡的區域是能夠穿透的，在濃烈的地方能夠認爲是沒有透明度的，那麼這意味着不一樣地方的顏色的穿透能力不一樣，造成了一個顏色的通道，這個通道就叫作alpha通道。因此alpha能夠理解爲顏色的可穿透的程度。這個點到爲止，反正理解成透明度也不會出錯。

rgba模式和16進制自己是一摸同樣的，只是16進制是00到ff，rgba是0到255，255實際上是2^8。這個是由於計算機的存儲顏色的方式，一個色值用8bits。

顏色的度

目前學習的顏色都是不一樣的顏色的表示方法，其實通常人所謂的顏色是指色相，什麼叫作色相呢，就是說顏色的品相，一般紅橙黃綠藍靛紫就是不一樣的色相，就像不一樣的星座同樣，一個範圍內的某種顏色都是一種色相，和星座不一樣的是，色相併無嚴格的規定什麼範圍到什麼範圍是什麼相。由於對於設計師這種限定並無什麼意義。

既然同一種顏色其實包含各類各樣的顏色，好比綠色有墨綠，青綠，淡綠等等。因此同一種顏色內，其實須要有各類各樣的度。飽和度（純度），亮度，明度，灰度，對比度。

而這些度裏最重要的是色相，飽和度，明度，被稱爲顏色的三要素。

品顏色須要有強大的感知能力，因此在繼續往下讀的同時放鬆雙眼。

飽和度

通俗的說飽和度下降就是讓顏色顯得看起來不那麼刺激或者鮮豔。

## 爲何飽和度高會讓人產生視覺刺激強烈的感受呢？

是由於人眼有三種視錐細胞，用來接受三原色，最後合併爲一種顏色。一個顏色對人的眼球產生刺激是由於眼睛接受到的三原色之間的差距很大，三種視錐細胞獲得了差距很大的三種顏色就會刺眼，因此就產生了鮮豔感。

飽和度在色值的表現上一般是rgb三種色值的差距縮小，飽和度爲0就是三原色的差距爲0。而飽和度的數學概念就是三原色的最大值和最小值之間的差，上邊說的那個桃紅色的飽和度就是ff和00的差值是100%。

當咱們把一張彩色的圖片的飽和度變成0那麼圖片應該只有黑白灰，變得像一張黑白照片同樣，可是黑白照片的算法和飽和度爲0並不同。

黑白照片的算法是根據顏色的份量計算一個分量相等的灰色，一個圖變成黑白以後整個圖的直方圖信息並不會發生改變，關於這個能夠之後再聊。

而飽和度爲0是取rgb的最大值和最小值的中間值。讓三種顏色同時趨於這個中間值。

明度

通俗的來說，明度就是某個顏色看起來是偏黑仍是偏白。好比說上邊說到的藏藍色的總體色值都比較小，其實就是說他的明度低。若是理解了飽和度的話，再理解明度就會很是簡單。

一樣，咱們站在生物學和數學兩種角度理解這個暗仍是白的問題。

生物學的角度說，暗意味着三種顏色對三種視錐細胞的刺激都很小，相反意味着三種顏色都比較多，會使得顏色看起來發白，而素色就是說明度比較高的顏色，這種顏色比較偏白，只是淡淡的展露出一種顏色，因此看起來感受更淡雅。

明度增長

明度下降

其實明度的變化也會引發飽和度的變化，由於黑色和白色的飽和度也是0。但飽和度和明度是從兩個不一樣的維度去控制一個顏色的。這也是css中的另外一種顏色表達方式HSL。

HSL模式

工業顏色標準，經過色相 hues，飽和度 saturation 和明度 lightness來表達顏色，能夠表達視覺所覆蓋的全部顏色，是迄今使用最廣的顏色標準，css也支持這種方式來表達顏色。

這個時候不少人就開始吐槽了，是由於rgb表達的顏色不夠多仍是很差用，非要造出來這麼多奇奇怪怪的模式，css那麼多屬性都學不動了，學個顏色搞得這麼麻煩嘛～

其實顏色確實是門很是複雜的學問，但顏色的學問要比編程容易理解的多，由於顏色很貼近生活。並且若是你繼續往下看的話，就能知道hsl能夠解決問題是多麼的強有力

使用hsl表示顏色

要用hsl，先得知道它是怎麼表示顏色的呢

理論上講一個顏色用HSL表示應該是這樣的 hsl(#f00, 100, 50%)，這個表示一個飽和度100，明度在中間值不黑不白的紅色。

可是這個事實上應該是這樣的 hsl(0, 100, 50%)

0？0既然也能表示顏色，這個讓人有點匪夷所思。

上邊提到牛頓發明了一個叫作色輪的東西，這個東西就是色相。好吧，我再糾正一下，前邊說到的顏色並非真正的色相。

準確的說色相環是飽和度爲100%，明度爲50%的顏色組成的一個顏色環，就像下邊這樣。能夠經過下降三種顏色值讓顏色變幻無窮，同時也能夠經過改變明度和飽和度讓顏色變幻無窮。

並且後者更容易控制顏色的變幻無窮。

色相環只有一個屬性就是角度。0度是紅色，360度也是紅色，藍色是240度，而色相環的旋轉是按照上邊的圖逆時針轉的，飽和度和明度都是經過0到100來表示百分比的。

hsl有什麼用呢

要知道用處是什麼，就須要知道他是怎麼誕生的，hsl誕生是由於使用顏色的人並不關心顏色的值是多少，須要關心的是這個原色的變化。

好比hsl能夠很是很是容易的解決變幻無窮的口紅顏色的問題。

有女友的人都知道口紅的顏色是一個很是恐怖的東西，但使用hsl來理解口紅的顏色就很是簡單，假如須要粉一些，就把色相到這轉30度，須要淡一些，就把明度往高調一些。要暗一些就把顏色往低調一些。

hsl也能夠很好的解決設計師配色的問題，一個視覺效果好的網頁色不過三，甚至就頗有可能就一種顏色。

若是兩種顏色的話，一般是色相環中相差180度的兩種顏色，這個叫作互補色。

若是是三種顏色頗有多是色相環的三種相差120度的顏色。

因此即使是兩種顏色，或者三種顏色，只須要定一個主色，而後根據顏色來變更就行了。hsl的最大的特色就是變化。還有一點就是即使是不一樣的顏色，他們仍然會有相同的明度還有飽和度。

好比下邊就是兩個明度飽和度相同的互補色，是否是看起來比較協調統一併且還互補呢。

這兩個顏色用hsl表示是 hsl(30, 80, 70) 和 hsl(210, 80, 70)，可是用rgb表示的話是#f3c291和#91c2f3。相比較而言hsl能夠更加清楚的看出來二者的關係，也能夠配合css中的樣式預處理器表示。

hsl還有一個做用就是顏色明度或者飽和度變化，表達顏色的不一樣狀態。

一般表示鼠標hover active等效果的時候會由設計師給出兩個不一樣的色值，但實際上是兩個明度不一樣的色值，因此若是使用hsl的話。

hsl模式能夠很是輕鬆的表達一個顏色和其餘顏色的變化關係，因此能夠一個顏色走天下，固然前提是這個設計師知道如何配色。若是變量定義的足夠好，理想狀態下，只須要改變主色的值就能讓網站全部的顏色發生相應的改變

因此若是一個公司有很是好的設計規範的話，用hsl的效率要遠遠大於rgb

HSV

除了hsl之外還有使用hsv模式來控制顏色的，和HSL很類似，經過色相 hues，飽和度 saturation 和亮度 brightness 來表達顏色，由於brightness有的地方會叫作value，因此hsv和hsb都是說這個模式。

ps提供了五種表示顏色的方法，分別是HSV，RGB，16進制，CMYK還有Lab。Lab是基於通道的一種模式，開發不會用到的。

hsv和hsl均可以很是好的表示顏色的變化。兩者的區別能夠在下面的圖中很直觀的看出來，前者注重明度的變化，後者注重亮度的變化。

有這種模式的緣由是設計師配色主要看重明度，而修圖的後期會重視亮度，因此web開發用hsl，ps中用hsv。