CSS 中颜色的表示和转换_王力国

基本概念

原色：是指不能透过其他颜色的混合调配而得出的“基本色”，以不同比例将原色混合可以产生出其它的新颜色。由于人类肉眼有三种不同颜色的感光体，因此所见的色彩空间通常可以由三种基本色所表达，这三种颜色被称为“三原色”。一般来说叠加型的三原色是红色、绿色、蓝色、（又称三基色，用于电视机、投影仪等显示设备）。

basic

色彩空间：是对色彩的组织方式，借助色彩空间和针对物理设备的测试，可以得到色彩的固定模拟和数字表示（例如 Adobe RGB 和 sRGB）。

色彩模型：是一种抽象数学模型，通过一组数字来描述颜色（例如 RGB 使用三元组）。

CSS 中颜色的表示和转换

方式一：颜色词

css color: red; // 红色 color: green; // 绿色 color: blue; // 蓝色

在这里查看全部颜色词。

方式二：RGB

css 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 色彩模型的创建方式是将红色、绿色、蓝色映射到三维笛卡尔坐标系中。

rgb-space

方式三：HEX

css color: #FF0000; // 红色 color: #00FF00; // 绿色 color: #0000FF; // 蓝色

HEX 是以一组十六进制数值表示颜色，结构为 #RRGGBB[AA] 或 #RGB[A]（其中 A 表示透明度），下面这个等式可以成立：

css color: #FF0000; // 等价于 color: #F00; // 等价于 color: #F00F;

RGB 转 HEX 算法：

```javascript // 摘自 http://github.com/bgrins/TinyColor/blob/master/tinycolor.js#L497 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(""); } ```

方式四：HSL

css color: hsl(0, 1000%, 50%); // 红色 color: hsl(120, 100%, 50%); // 绿色 color: hsl(240, 100%, 50%); // 蓝色

HSL 的结构为 hsl(H,S,L,A)（其中 A 表示透明度），是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示方式，这种色彩模型能够做到比基于笛卡尔坐标系的几何结构更加直观。

rgb-space

色相（Hue）：取值 0～360，指色彩的基本属性，0（或360）表示红色，120 表示绿色，240表示蓝色。
饱和度（Saturation）：取值 0～100%，指色彩的纯度，越高色彩越纯，低则逐渐变灰。
明度（Lightness）：取值 0～100%。

RGB 转 HSL 算法：

```javascript // 摘自 http://github.com/bgrins/TinyColor/blob/master/tinycolor.js#L379 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 }; } ```