W3C 的 CSS 工作組發(fā)布 CSS 顏色模塊（CSS Color Module Level 4）首份公開標(biāo)準(zhǔn)工作草案已經(jīng)有一年之久了，你可能無法想象 CSS 中這一個(gè)
color或background-color等屬性包含了色彩學(xué)多少基本知識(shí)。色彩學(xué)廣泛運(yùn)用于美術(shù)、計(jì)算機(jī)圖形學(xué)、機(jī)器學(xué)習(xí)、心理學(xué)等學(xué)科中，這次我們就來假借 CSS 顏色模塊來窺見其一斑。（因本人水平有限，如有描述不當(dāng)?shù)牡胤剑Ｍ蠹抑赋觯?/p>
已命名顏色（Named Colors）
字如其名，就是有公認(rèn)名字的顏色。具體顏色名稱引用請(qǐng)見 W3C 網(wǎng)站：
https://www.w3.org/TR/SVG/types.html#ColorKeywords
/* CSS 引用已命名顏色時(shí)不可以使用引號(hào) */
.font-aqua {
color: aqua;
}
灰度（gray）
從最暗黑色到最亮的白色的灰度，中間根據(jù)采樣的級(jí)數(shù)可能分為 8 bits、16 bits 等。（注意灰度圖像與黑白圖像的區(qū)別）
網(wǎng)頁設(shè)計(jì)時(shí)可能可以加上透明度參數(shù)。
.font-gray-1 {
color: gray(50%);
}
三原色光 模式（RGB）
又稱 RGB顏色模型 或 紅綠藍(lán)顏色模型，是一種加色模型，將紅（Red）、綠（Green）、藍(lán)（Blue）三原色的色光以不同的比例相加，以產(chǎn)生多種多樣的色光。(且三原色的紅綠藍(lán)不可能用其他單色光合成)
目前市場(chǎng)上主要有兩種 RGB 類色彩空間：
sRGB，standard RGB，是惠普和微軟公司于1997年共同開發(fā)的標(biāo)準(zhǔn)色彩空間，應(yīng)用范圍更廣泛，因?yàn)榻^大多數(shù)的數(shù)碼圖像輸入輸出設(shè)備（如：數(shù)碼相機(jī)、數(shù)碼攝像機(jī)、掃描儀、打印機(jī)、投影儀等）和軟件都默認(rèn)支持sRGB標(biāo)準(zhǔn)，同時(shí)它也是為平面設(shè)計(jì)師而設(shè)計(jì)的標(biāo)準(zhǔn)。
Adobe RGB，由 Adobe 公司于 1998 年推出的色彩空間，較之 sRGB 有更寬廣的色彩空間范圍，層次較豐富，但色彩飽和較低，多用于印刷行業(yè)。sRGB 色彩空間是 Adobe RGB 色彩空間的子集。（注意 色彩空間 和 色域 的區(qū)別）
在頁面設(shè)計(jì)時(shí)，RGB 顏色標(biāo)記方式主要有四種：
RGB(0～255, 0～255, 0～255)
RGBA(0～255, 0～255, 0～255, 0～1)，第四位 A 表示透明度（Alpha）
#RRGGBB，6 位有效 16 進(jìn)制數(shù)表示法（6 digits hex），每?jī)晌粡?00～ff （或 FF）表示三色中的一種從 0～255 的強(qiáng)度，每個(gè)顏色通道有 8bit數(shù)據(jù)，所以這個(gè)屬于真彩 24bit
-
#RGB，即 3 位有效 16 進(jìn)制表示法（3 digits hex），每一位從 0～f（或 F）表示三色中的一種顏色的強(qiáng)度
- 注意這不是 Web 安全色，Web 安全色僅有 6 * 6 * 6 = 216 (種)
#RRGGBBAA，8 digits，類比以上標(biāo)記法，多出的 AA 表示透明度，這種表示法在安卓等平臺(tái)早就實(shí)現(xiàn)了，這次 CSS 草案也將其納入范圍內(nèi)，并且已經(jīng)在火狐瀏覽器上得到支持（此文撰寫時(shí)，谷歌瀏覽器好像還并不支持）。
#RGBA，類比以上標(biāo)記法，不再贅述。
/* RGB */
.font-aqua {
color: rgb(0, 255, 255);
}
/* RGBA */
.font-aqua {
color: rgba(0, 255, 255, 1);
}
/* 6 digits HEX */
.font-aqua {
color: #00ffff;
}
/* 8 digits HEX only for firefox */
.font-aqua {
color: #00ffffff;
}
/* 3 digits HEX */
.font-aqua {
color: #0ff;
}
/* 4 digits HEX */
.font-aqua {
color: #0fff
}
印刷四分色 模式（CMYK）
彩色印刷時(shí)采用的一種套色模式，利用色料的三原色混色原理，加上黑色油墨（由于顏料達(dá)不到理想的純度，所以用 CMY 模式混合無色彩的灰、黑很困難，便增加了一個(gè)專門的黑色通道，同時(shí)為了不與藍(lán)色 B 混淆縮寫使用 K），共計(jì)四種顏色混合疊加，形成所謂“全彩印刷”。四種標(biāo)準(zhǔn)顏色是：青色（Cyan），洋紅色（Magenta），又稱為‘品紅色‘，黃色（Yellow），黑色（blacK）。
網(wǎng)頁設(shè)計(jì)時(shí)將其標(biāo)記為：device-cmyk(0～1, 0～1, 0～1, 0～1)，可能還會(huì)加上透明度 Alpha，每種原色的強(qiáng)度可用 0～1 的數(shù)字表示也可以用百分比表示。
/* CMYK */
.font-aqua {
color: device-cmyk(0, 0, 100%, 0);
}
CSS 顏色模塊的草案是這么愉快地決定啦，但是畢竟只是草案，這種顏色表示方式似乎暫時(shí)并沒有瀏覽器實(shí)現(xiàn)。
此外，從三原色光模式可以轉(zhuǎn)換成印刷模式，印刷品仍然可以再轉(zhuǎn)換成三原色光模式顯示。但一件印刷模式的圖片轉(zhuǎn)換成三原色光模式顯示，再轉(zhuǎn)換成印刷模式就會(huì)造成色彩的畸變，兩件印刷品的顏色會(huì)有區(qū)別。所以如果商業(yè)應(yīng)用需要顏色非常精確時(shí)，不要使用轉(zhuǎn)換的方法。而且，印刷四分色模式向三原色光模式轉(zhuǎn)換時(shí)，需要經(jīng)過一個(gè)中間三分色模式的變化，將黑色版的因素去掉。
- 從四分色向三原色轉(zhuǎn)換
轉(zhuǎn)換成三分色
然后再轉(zhuǎn)換成三原色光
- 從三原色向四分色轉(zhuǎn)換
先轉(zhuǎn)換成三分色 CMY
若
則
否則，再轉(zhuǎn)換成四分色
HSV、HSB 和 HSL
| H | hue, 色相 |
|---|---|
| S | saturation, 飽和度 |
| L | lightness, 亮度 |
| V | value, 明度 |
| B | brightness, 明度 |
可見，HSV 和 HSB 色彩空間模型指的是同一個(gè)，而 HSL 與前者有些區(qū)別。
- 色相
又被稱為色調(diào)，是色彩的首要特征，是顏色等效光譜峰值的位置，但并非所有色相都在光譜上，比如說色譜是帶狀，而色相是首尾相連的環(huán)狀，所以比色譜多出一段連接紅色端和紫色端的洋紅色片段。
| 0 度 / 360 度 | 紅色 |
|---|---|
| 60 度 | 黃色 |
| 120 度 | 綠色 |
| 180 度 | 青色 |
| 240 度 | 藍(lán)色 |
| 300 度 | 品紅色 |
/* 色相環(huán)角度轉(zhuǎn) RGB */
function hueToRgb(t1, t2, hue) {
if(hue < 0) hue += 6;
if(hue >= 6) hue -= 6;
if(hue < 1) return (t2 - t1) * hue + t1;
else if(hue < 3) return t2;
else if(hue < 4) return (t2 - t1) * (4 - hue) + t1;
else return t1;
}
- 飽和度
指色彩的純度，越高色彩越純，低則逐漸變灰，取 0-100% 的數(shù)值。（100% 時(shí)顏色飽和度最好）
- 亮度和明度
- 亮度 Lightness，指顏色從全黑到全白 。(50% 為原來的顏色，100% 為白色)
- 明度 Brightness（或 Value），指顏色從全黑到顏色能維持最大飽和度的亮度。（100% 為原來的顏色）
與 RGB 模型的笛卡爾直角坐標(biāo)系不同，HSV（色相，飽和度，色調(diào)）在概念上可以被認(rèn)為是顏色的倒圓錐體（黑點(diǎn)在下頂點(diǎn)，白色在上底面圓心），HSL 在概念上表示了一個(gè)雙圓錐體和圓球體（白色在上頂點(diǎn)，黑色在下頂點(diǎn)，最大橫切面的圓心是半程灰色）。
/* HSL */
.font-aqua {
color: hsl(180, 100%, 50%);
}
/* HSLA */
.font-aqua {
color: hsl(180, 100%, 50%, 100%);
}
/* HSV */
.font-aqua {
hsv(180, 100%, 100%);
}
- 與 RGB 間的轉(zhuǎn)換關(guān)系
/* HSL 轉(zhuǎn) RGB */
function hslToRgb(hue, sat, light) {
if( light <= 0.5 ) {
var t2 = light * (sat + 1);
} else {
var t2 = light + sat - (light * sat);
}
var t1 = light * 2 - t2;
var r = hueToRgb(t1, t2, hue + 2);
var g = hueToRgb(t1, t2, hue);
var b = hueToRgb(t1, t2, hue - 2);
return [r,g,b];
}
HWB
HWB 是另一種以色相（Hue）為基礎(chǔ)的色彩模型，加上白色（White）的的程度，黑色（Black）的程度這兩個(gè)參數(shù)，可以使其比飽和度和亮度更容易讓人理解。
/* HWB，可能有第四位表示透明度 */
.font-aqua {
color: (180, 0%, 0%);
}
- 與 RGB 之間的轉(zhuǎn)換關(guān)系
function hwbToRgb(hue, white, black) {
var rgb = hslToRgb(hue, 1, .5);
for(var i = 0; i < 3; i++) {
rgb[i] *= (1 - white - black);
rgb[i] += white;
}
return rgb;
}
YUV
YUV 是一種顏色編碼方法，由輝度（Luma），色度（或濃度，Chroma）來表示，其種類較繁，且草 CSS 顏色模塊草案中并為提及，故不再占用篇幅了。
- YUV 轉(zhuǎn) RGB
還有
此外還有 LAB、LCH、YIQ、CIE 等色彩模型，因?yàn)镃SS 顏色模塊中并為提及，就不在此處贅述，感興趣的可以自行查閱其他資料。
參考
三原色光模式 . wikipedia.org：https://zh.wikipedia.org/wiki/三原色光模式
印刷四分色模式 . wikipedia.org：https://zh.wikipedia.org/wiki/印刷四分色模式
不可不知的色彩學(xué) . tec.ntu.edu.tw：http://tec.ntu.edu.tw/columns/58023fa39508fb2a459cfff2
色彩 · 理論 . styletin.com：http://styletin.com/archives/535
明度、亮度、輝度的比較 . styletin.com：http://styletin.com/archives/583#i-4
