顔色模型，是用來表示顔色的數學模型。比如最常見的 <code>RGB模型</code>，使用 <code>紅綠藍</code> 三色來表示顔色。
一般的顔色模型，可以按照如下分類：
面向硬體裝置的顔色模型：RGB，CMYK，YCrCb。 面向視覺感覺的顔色模型：HSL，HSV(B)，HSI，Lab。
不同的顔色模型有不同的應用場景，而RGB模型适合于顯示器這樣的的裝置。
其中，前端支援的是 <code>RGB</code>、<code>HSL</code>，即在前端頁面中隻有這兩種模型的顔色值可以有效展示出來。
而對于 <code>HSV</code>，則是我們在建立顔色選擇器插件時所需要了解的一種模型。
目前，<code>chrome</code> 浏覽器，實作 <code>H5</code> 的顔色色盤，就是基于 <code>HSV</code> 模型：
注意：<code>fixfore</code> 浏覽器支援的仍然是電腦系統色盤（如win系統下，與畫圖軟體中編輯顔色的色盤一樣）。
本文将主要介紹 <code>RGB</code>、<code>HSL</code>、<code>HSV</code> 這三種模型。
RGB 即常說的 <code>紅(R)、綠(G)、藍(B)</code> 三原色模型，是運用最廣泛的顔色模型。
特别是在前端開發中，幾乎都使用該模型處理顔色。如：<code>rgb(0, 0, 255)</code>，<code>#d3d3d3</code>。
該模型通過紅綠藍三個顔色通道的變化和互相之間的混合疊加，使用不同的強度，表現出不同的顔色。
它是一種加色混色模型，在疊加混合的過程中，亮度等于色彩亮度的綜合，混合的越多亮度就越高。
根據三色的取值不同，一般有以下幾種類型：
R5G5B5(A1)：16位，各色都用5位表示，取值範圍 <code>0-31(2^5 - 1)</code>，剩餘1位作Alpha通道或者不用。
R5G6B5：16位，R和B占用5位，取值範圍 <code>0-31(2^5)</code>；G占用6位，取值範圍 <code>0-63(2^6 - 1)</code>。
R8G8B8：24位，各色都用8位表示，取值範圍為 <code>0-255(2^8 - 1)</code>。
最多能有 <code>2^24</code> 種顔色，從24位開始的顔色就是真彩色，基本達到人眼極限。
R8G8B8(A8)：32位，各色都用8位表示，取值範圍為 <code>0-255(2^8 - 1)</code>，剩餘8位作Alpha通道或者不用。
這其中，最常見的當然就是24位和32位的類型。
三色通道中每個顔色有256階的亮度，為0時最暗，255時最亮。
如果三色的數值都相同時，就會産生不同灰階值的灰階色調，都為0時最暗黑色，都為255時最亮白色。
先看下 <code>RGB</code> 顔色值在前端的展現，如紅色：
描述RGB模型，使用的顔色值，有 <code>rgb</code> 和 <code>hex16</code> 進制兩種方式。
<code>rgb(0,0,0)</code> 表示法，一般情況下，紅綠藍三色分别取值範圍 <code>0-255</code>，如果加上 <code>alpha</code> 透明通道，則為 <code>rgba(0,0,0,1)</code> 。
<code>hex</code> 16進制表示法，采用十六進制對24比特的一種展示方式，如 <code>#000000</code>，共6位，每兩位分别對應紅綠藍，相同時可縮寫為 <code>#000</code>。
<code>hex</code> 也可以使用 <code>#00000000</code>，後面加上透明度的十六進制數值。
此外，在前端開發中，還可以使用顔色名稱如 <code>red</code>、<code>green</code>、<code>gray</code> 等辨別顔色。
實際上，這裡的顔色名稱仍然是對應的一個RGB顔色值，有一個規定的顔色名稱與值的關系表。大部分的顔色單詞基本都能使用。
上面兩種表示法的簡單轉換關系，如下所示。
前端在顔色的處理上，除了支援 <code>RGB</code> 模型外，另外支援的就隻有 <code>HSL</code> 模型，是以我們需要了下解該模型。
<code>HSL</code> 顔色值表示，紅色：
HSL 是對<code>色相H(hue)</code>、<code>飽和度S(saturation)</code>、<code>亮度L(lightness)</code>的處理得到顔色的一種模型。
色相(H)：
色相、色調，代表人眼所能看到的不同的顔色，本質就是一種顔色。與 <code>HSV(B)</code> 模型中的 <code>H</code> 概念相同。
色相的定義中，許多的顔色分布在一個圓環上，取值範圍則是 0-360度，每個角度代表着一種顔色。
在HSL和HSV的模型中，色相是以六大主色為基礎，他們分别按 60 度的間隔排列在圓環上。這六大主色分别是：360°/0°紅、60°黃、120°綠、180°青、240°藍、300°洋紅。
而在前端進行處理時，常常把圓環處理成長方形的色塊，通過顔色的線性漸變方式進行分段處理，角度換算成一定的比例，如下所示：
飽和度(S)：
飽和度是指顔色的強度或純度，使用 <code>0 ~ 100%</code> 的百分比來度量。
表示色相中顔色成分所占的比例，數值越大，顔色中的灰色越少，顔色越鮮豔，呈現的是一種從灰色到色相顔色的變化。
亮度(L)：
表現顔色的明暗程度，使用 <code>0 ~ 100%</code> 的百分比來度量。
反映色彩中混入的黑白兩色，50% 處隻有純色，小于 50% 時，數值越小混入的黑色越多，越接近于黑色；大于 50% 時，數值越大混入的白色越多，越接近于白色。
L最大時必為白色，L最小時必為黑色。
展現的是從黑色到色相(H)選擇顔色再到白色的過渡。
<code>HSV</code> 顔色值表示，紅色：
HSV 采用<code>色相H(hue)</code>、<code>飽和度S(saturation)</code>、<code>明度V(Value)</code>3個參數來表示顔色的一種方式。
<code>HSV</code> 和 <code>HSL</code> 兩個模型都是更偏向于視覺上直覺的感覺。
而<code>HSV</code> 與 <code>HSB</code> 的内容基本是一樣的，可以了解為兩種不同寫法而已，其中 B( brightness )。
同 <code>HSL</code> 模型中的 <code>H</code> 色相。
在 <code>HSV</code> 中更多的是反映色相的顔色中混入白色的值，值越大白色越少色相顔色越純，值越小白色越多色相顔色越淡。
明度(V)：
反映色相的顔色中混入的黑色的值，值越小黑色越多顔色更暗(黑)，值越大黑色越少顔色更純(亮)。
展現的是從黑色到色相(H)選擇顔色的過渡。
下面是常用的 <code>rgb</code> 顔色值與 <code>hsl</code> 之間互相轉換的代碼。
注意：
這兩個過程中，由于取整去除了小數位，并不是完全可逆的，可能存在個别個位數的內插補點。
雖有些微差别，但在頁面顔色顯示上基本沒分别，因為人眼分辨不出來。