W3C 的 CSS 工作组发布 CSS 颜色模块（CSS Color Module Level 4）首份公开标准工作草案已经有一年之久了，你可能无法想象 CSS 中这一个
color或background-color等属性包含了色彩学多少基本知识。色彩学广泛运用于美术、计算机图形学、机器学习、心理学等学科中，这次我们就来假借 CSS 颜色模块来窥见其一斑。（因本人水平有限，如有描述不当的地方，希望大家指出）
已命名颜色（Named Colors）
字如其名，就是有公认名字的颜色。具体颜色名称引用请见 W3C 网站：
https://www.w3.org/TR/SVG/types.html#ColorKeywords
/* CSS 引用已命名颜色时不可以使用引号 */
.font-aqua {
color: aqua;
}
灰度（gray）
从最暗黑色到最亮的白色的灰度，中间根据采样的级数可能分为 8 bits、16 bits 等。（注意灰度图像与黑白图像的区别）
网页设计时可能可以加上透明度参数。
.font-gray-1 {
color: gray(50%);
}
三原色光 模式（RGB）
又称 RGB颜色模型 或 红绿蓝颜色模型，是一种加色模型，将红（Red）、绿（Green）、蓝（Blue）三原色的色光以不同的比例相加，以产生多种多样的色光。(且三原色的红绿蓝不可能用其他单色光合成)
目前市场上主要有两种 RGB 类色彩空间：
sRGB，standard RGB，是惠普和微软公司于1997年共同开发的标准色彩空间，应用范围更广泛，因为绝大多数的数码图像输入输出设备（如：数码相机、数码摄像机、扫描仪、打印机、投影仪等）和软件都默认支持sRGB标准，同时它也是为平面设计师而设计的标准。
Adobe RGB，由 Adobe 公司于 1998 年推出的色彩空间，较之 sRGB 有更宽广的色彩空间范围，层次较丰富，但色彩饱和较低，多用于印刷行业。sRGB 色彩空间是 Adobe RGB 色彩空间的子集。（注意 色彩空间 和 色域 的区别）
在页面设计时，RGB 颜色标记方式主要有四种：
RGB(0～255, 0～255, 0～255)
RGBA(0～255, 0～255, 0～255, 0～1)，第四位 A 表示透明度（Alpha）
#RRGGBB，6 位有效 16 进制数表示法（6 digits hex），每两位从 00～ff （或 FF）表示三色中的一种从 0～255 的强度，每个颜色通道有 8bit数据，所以这个属于真彩 24bit
-
#RGB，即 3 位有效 16 进制表示法（3 digits hex），每一位从 0～f（或 F）表示三色中的一种颜色的强度
- 注意这不是 Web 安全色，Web 安全色仅有 6 * 6 * 6 = 216 (种)
#RRGGBBAA，8 digits，类比以上标记法，多出的 AA 表示透明度，这种表示法在安卓等平台早就实现了，这次 CSS 草案也将其纳入范围内，并且已经在火狐浏览器上得到支持（此文撰写时，谷歌浏览器好像还并不支持）。
#RGBA，类比以上标记法，不再赘述。
/* 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）
彩色印刷时采用的一种套色模式，利用色料的三原色混色原理，加上黑色油墨（由于颜料达不到理想的纯度，所以用 CMY 模式混合无色彩的灰、黑很困难，便增加了一个专门的黑色通道，同时为了不与蓝色 B 混淆缩写使用 K），共计四种颜色混合叠加，形成所谓“全彩印刷”。四种标准颜色是：青色（Cyan），洋红色（Magenta），又称为‘品红色‘，黄色（Yellow），黑色（blacK）。
网页设计时将其标记为：device-cmyk(0～1, 0～1, 0～1, 0～1)，可能还会加上透明度 Alpha，每种原色的强度可用 0～1 的数字表示也可以用百分比表示。
/* CMYK */
.font-aqua {
color: device-cmyk(0, 0, 100%, 0);
}
CSS 颜色模块的草案是这么愉快地决定啦，但是毕竟只是草案，这种颜色表示方式似乎暂时并没有浏览器实现。
此外，从三原色光模式可以转换成印刷模式，印刷品仍然可以再转换成三原色光模式显示。但一件印刷模式的图片转换成三原色光模式显示，再转换成印刷模式就会造成色彩的畸变，两件印刷品的颜色会有区别。所以如果商业应用需要颜色非常精确时，不要使用转换的方法。而且，印刷四分色模式向三原色光模式转换时，需要经过一个中间三分色模式的变化，将黑色版的因素去掉。
- 从四分色向三原色转换
转换成三分色
然后再转换成三原色光
- 从三原色向四分色转换
先转换成三分色 CMY
若
则
否则，再转换成四分色
HSV、HSB 和 HSL
| H | hue, 色相 |
|---|---|
| S | saturation, 饱和度 |
| L | lightness, 亮度 |
| V | value, 明度 |
| B | brightness, 明度 |
可见，HSV 和 HSB 色彩空间模型指的是同一个，而 HSL 与前者有些区别。
- 色相
又被称为色调，是色彩的首要特征，是颜色等效光谱峰值的位置，但并非所有色相都在光谱上，比如说色谱是带状，而色相是首尾相连的环状，所以比色谱多出一段连接红色端和紫色端的洋红色片段。
| 0 度 / 360 度 | 红色 |
|---|---|
| 60 度 | 黄色 |
| 120 度 | 绿色 |
| 180 度 | 青色 |
| 240 度 | 蓝色 |
| 300 度 | 品红色 |
/* 色相环角度转 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% 的数值。（100% 时颜色饱和度最好）
- 亮度和明度
- 亮度 Lightness，指颜色从全黑到全白 。(50% 为原来的颜色，100% 为白色)
- 明度 Brightness（或 Value），指颜色从全黑到颜色能维持最大饱和度的亮度。（100% 为原来的颜色）
与 RGB 模型的笛卡尔直角坐标系不同，HSV（色相，饱和度，色调）在概念上可以被认为是颜色的倒圆锥体（黑点在下顶点，白色在上底面圆心），HSL 在概念上表示了一个双圆锥体和圆球体（白色在上顶点，黑色在下顶点，最大横切面的圆心是半程灰色）。
/* 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 间的转换关系
/* HSL 转 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）为基础的色彩模型，加上白色（White）的的程度，黑色（Black）的程度这两个参数，可以使其比饱和度和亮度更容易让人理解。
/* HWB，可能有第四位表示透明度 */
.font-aqua {
color: (180, 0%, 0%);
}
- 与 RGB 之间的转换关系
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 转 RGB
还有
此外还有 LAB、LCH、YIQ、CIE 等色彩模型，因为CSS 颜色模块中并为提及，就不在此处赘述，感兴趣的可以自行查阅其他资料。
参考
三原色光模式 . wikipedia.org：https://zh.wikipedia.org/wiki/三原色光模式
印刷四分色模式 . wikipedia.org：https://zh.wikipedia.org/wiki/印刷四分色模式
不可不知的色彩学 . 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
