作為一個總是去設計領域閒逛的開發，或許可以更好得把自己對設計的領悟給開發們講清楚，這也是我輸出的第一篇更加偏向於設計領域的文章，畢竟職業還是開發，只能算一個不入流的旁門左道的設計師，對設計的一些術語表述有誤還請設計大佬諒解。
本文旨在給開發者一個基本的色彩的認識，把一些設計知識帶入開發者的世界裡，希望開發者們可以從這篇文章中受益。
前言
色彩理論的起源是牛頓三稜鏡發現光可以分成七種顏色紅橙黃綠青藍紫，這也初步解釋了彩虹的形成。由於是漸變的並且還是首位相連的那種，所以牛頓同時也發明了色輪，這個是色彩理論的最初的探索。後來歌德完善了色彩理論，還把顏色分為了暖色和冷色。
再後來，顏色理論逐漸被髮揚光大，比如蒙塞爾的球體，還有色環，明度，亮度，飽和度，色相，色調，對比度，灰度等等各種各樣的發現，如果使用過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。