摘要：十六進(jìn)制格式，紅綠藍(lán)分別用兩位十六進(jìn)制數(shù)表示。函數(shù)表達(dá)式，三原色分別由的整數(shù)值表示。開頭表示十六進(jìn)制數(shù)，中不區(qū)分大小寫，至于不知道什么是十六進(jìn)制的，請(qǐng)自行百度紅色是，綠色是，藍(lán)色。

本篇主要講解關(guān)于計(jì)算機(jī)顏色系統(tǒng)的概念，后續(xù)結(jié)合一些canvas的應(yīng)用。因?yàn)槭恰澳悴恢酪矝]關(guān)系”的邊緣知識(shí)，所以作為本系列教程的擴(kuò)展，沒有興趣的同學(xué)可以跳過。
開始我們?nèi)f紫千紅的故事吧！
本人能力有限，歡迎牛人共同討論，批評(píng)指正。

我們熟悉的CSS風(fēng)格顏色表示方式，大體有下面幾種，canvas大體是直接沿用這些寫法的，但最后包含透明度的寫法有些許不同。

#RRGGBB：十六進(jìn)制格式，紅綠藍(lán)分別用兩位十六進(jìn)制數(shù)表示。

#RGB：簡(jiǎn)寫的十六進(jìn)制格式，轉(zhuǎn)換成6位格式時(shí)會(huì)重復(fù)三原色，例如#fb0->#ffbb00。

rgb(R,G,B)：函數(shù)表達(dá)式，三原色分別由0~255的整數(shù)值表示。

rgba(R,G,B,A)：包含透明度的函數(shù)表達(dá)式，其中alpha參數(shù)為0~1，需要指定透明度的顏色必須使用該格式。

作為前端人員平時(shí)用得很多，但你可能會(huì)一臉懵逼之前自己寫的顏色字符串居然是十六進(jìn)制？
待我細(xì)細(xì)道來。這里的R即是紅色（red），G即是綠色（green），B即是藍(lán)色（blue），這三個(gè)是顯示器普遍使用的三基色，屬于疊加型原色，百科摘錄如下。

【科普】原色是指不能透過其他顏色的混合調(diào)配而得出的“基本色”。  
以不同比例將原色混合，可以產(chǎn)生出其他的新顏色。以數(shù)學(xué)的向量空間來解釋色彩系統(tǒng)，則原色在空間內(nèi)可作為一組基底向量，并且能組合出一個(gè)“色彩空間”。由于人類肉眼有三種不同顏色的感光體，因此所見的色彩空間通?？梢杂扇N基本色所表達(dá)，這三種顏色被稱為“三原色”。一般來說疊加型的三原色是紅色、綠色、藍(lán)色（又稱三基色，用于電視機(jī)、投影儀等顯示設(shè)備）；而消減型的三原色是品紅色、黃色、青色（用于書本、雜志等的印刷）。

每一個(gè)顏色都是由三基色疊加合成，所以我們需要告訴計(jì)算機(jī)這各個(gè)基色的比例（濃度），將這個(gè)比例量化就是一個(gè)0~255的整數(shù)，也可說是256個(gè)級(jí)別，越大即表示各種原色更多（更濃）。

【PS】至于為什么是256個(gè)級(jí)別?  
是因?yàn)橛?jì)算機(jī)中每個(gè)原色用8位二進(jìn)制（0或1）表示，也就是2的8次方共256。

每個(gè)顏色都是256個(gè)級(jí)別，那它的組合的可能就有256*256*256=16777216，換句話說，一個(gè)顏色用24位二進(jìn)制表示，換算成十進(jìn)制就是0~16777215。
這里你應(yīng)該可以看懂上面CSS顏色表示方式前三個(gè)的含義了吧，至于rgba(R,G,B,A)多加入了A，表示透明度，這個(gè)是擴(kuò)展版的32位顏色系統(tǒng)，多了一個(gè)額外的8位二進(jìn)制表示透明度的級(jí)別，CSS將它簡(jiǎn)化成0~1表示。

*

舉個(gè)例子吧！
以#FF55F3這個(gè)顏色為例進(jìn)行講解。（0x開頭表示十六進(jìn)制數(shù)，js中不區(qū)分大小寫，至于不知道什么是十六進(jìn)制的，請(qǐng)自行百度）
紅色是0xFF，綠色是0x55，藍(lán)色0xF3。
轉(zhuǎn)換成十進(jìn)制：紅色是255，綠色是85，藍(lán)色是243。也就是說這個(gè)數(shù)值和rgb(255,85,243)寫法是等價(jià)的。

【PS】簡(jiǎn)便的轉(zhuǎn)換方法，直接在控制臺(tái)打印即可，比如console.log(0xF3);，js默認(rèn)輸出十進(jìn)制表示的字符串。

顏色理論學(xué)得差不多了，現(xiàn)在來看看合成，已知三原色的值，要如何用代碼合成一個(gè)顏色呢？
以上面說的#FF55F3為例，現(xiàn)在已知的是各個(gè)顏色值，下面提供兩種做法：

直接利用js數(shù)字轉(zhuǎn)換為字符串時(shí)默認(rèn)是十進(jìn)制的特性。

let r = 0xFF;
let g = 0x55;
let b = 0xF3;
let color = `rgb(${r},${g},$)`;

一個(gè)24位的顏色值，二進(jìn)制即：RRRRRRRRGGGGGGGGBBBBBBBB
紅色值左移16位，綠色左移8位，將三者做“或”就能得到合成的24位顏色值，再轉(zhuǎn)成16進(jìn)制字符串即可。

0xFF << 16 = 111111110000000000000000
0x55 << 08 = 000000000101010100000000
0xF3       = 000000000000000011110011
OR         = 111111110101010111110011

//省略跟前面一樣的...
let color = `#${(r << 16 | g << 8 | b).toString(16)}`;

合成學(xué)完了，現(xiàn)在考慮一下如何用代碼分解顏色，也就是把一個(gè)顏色分離出紅、綠、藍(lán)。
rgb(R,G,B)格式就說了，切字符串就能得到。
重點(diǎn)討論#RRGGBB格式，其實(shí)就是第二種合成方法的逆過程，右移后“與“操作，簡(jiǎn)單來說就是把想要的顏色值所在的位置移動(dòng)到末尾，再用“與”0xFF剔除其他顏色。
還是以#FF55F3為例，現(xiàn)已知這個(gè)字符串，要求分解出三基色的值。

切除“#”號(hào)得到16進(jìn)制字符串；

紅色：右移16位，與0xFF做“與”操作；

綠色：右移8位，與0xFF做“與”操作；

藍(lán)色：直接與0xFF做“與”操作。

let color = parseInt("#FF55F3".slice(1), 16);
let r = color >> 16 & 0xFF
let g = color >> 8 & 0xFF
let b = color & 0xFF

以綠色提取過程為例：

0xFF55F3      = 111111110101010111110011
0xFF55F3 >> 8 = 000000001111111101010101
0xFF          = 000000000000000011111111
AND           = 000000000000000001010101

當(dāng)然，上面的合成、分解代碼都是基本理論的應(yīng)用，實(shí)際項(xiàng)目中使用會(huì)為了健壯性封裝成更加合理的工具，可以參考我們工具類utils.js中的colorToRGB()和parseColor()兩個(gè)函數(shù)。

colorToRGB()用于將#RRGGBB格式或任意數(shù)字，轉(zhuǎn)換成rgb(R,G,B)或rgba(R,G,B,A)；

parseColor()用于將#RRGGBB格式轉(zhuǎn)成數(shù)字，將數(shù)字轉(zhuǎn)成#RRGGBB格式。