颜色基本概述
1、颜色
颜色是指不能透过其他颜色的混合调配而得出的“基本色”，以不同比例将原色混合可以产生出其它的新颜色。
由于人类肉眼有 三种 不同颜色的感光体，因此所见的色彩空间通常可以由 三种 基本色所表达，这三种颜色被称为“三原色”
一般来说叠加型的三原色是 红色、绿色、蓝色
又称三基色，用于电视机、投影仪等显示设备
2、色彩空间
对色彩的组织方式，借助色彩空间和针对物理设备的测试，可以得到色彩的固定模拟和数字表示
例如 Adobe RGB 和 sRGB
3、色彩模型
是一种抽象数学模型，通过一组数字来描述颜色
例如 RGB 使用 三元组
CSS 中颜色的表示和转换
颜色词
color: red; // 红色
color: green; // 绿色
color: blue; // 蓝色
RGB
color: rgb(255, 0, 0, 1); // 红色
color: rgb(0, 255, 0, 1); // 绿色
color: rgb(0, 0, 255, 1); // 蓝色
RGB 是以一组十进制数值表示颜色，结构为 rgb(R, G, B, A)
其中 A 表示透明度
RGB 色彩模型的创建方式是将 红色、绿色、蓝色 映射到 三维笛卡尔 坐标系中
HEX
color: #FF0000; // 红色
color: #00FF00; // 绿色
color: #0000FF; // 蓝色
HEX 是以一组十六进制数值表示颜色，结构为 #RRGGBB[AA] 或 #RGB[A]
其中 A 表示透明度
下面这个等式可以成立
color: #FF0000;
// 等价于
color: #F00;
// 等价于
color: #F00F;
HSL
color: hsl(0, 1000%, 50%); // 红色
color: hsl(120, 100%, 50%); // 绿色
color: hsl(240, 100%, 50%); // 蓝色
HSL 的结构为 hsl(H,S,L,A) 其中 A 表示透明度
是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示方式
这种色彩模型能够做到比基于笛卡尔坐标系的几何结构更加直观
1、色相（Hue）：取值 0～360，指色彩的基本属性，0（或360）表示红色，120 表示绿色，240表示蓝色。
2、饱和度（Saturation）：取值 0～100%，指色彩的纯度，越高色彩越纯，低则逐渐变灰。
3、明度（Lightness）：取值 0～100%。
RGB 转 HEX 算法
function rgbToHex(r, g, b, allow3Char) {
var hex = [
pad2(mathRound(r).toString(16)),
pad2(mathRound(g).toString(16)),
pad2(mathRound(b).toString(16))
];
// Return a 3 character hex if possible
if (allow3Char &&
hex[0].charAt(0) == hex[0].charAt(1) &&
hex[1].charAt(0) == hex[1].charAt(1) &&
hex[2].charAt(0) == hex[2].charAt(1)
) {
return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
}
return hex.join("");
}
RGB 转 HSL 算法
function rgbToHsl(r, g, b) {
r = bound01(r, 255);
g = bound01(g, 255);
b = bound01(b, 255);
var max = mathMax(r, g, b), min = mathMin(r, g, b);
var h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0; // achromatic
}
else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return { h: h, s: s, l: l };
}