CSS 中颜色的表示和转换
基本概念
原色:是指不能透过其他颜色的混合调配而得出的“基本色”,以不同比例将原色混合可以产生出其它的新颜色。由于人类肉眼有三种不同颜色的感光体,因此所见的色彩空间通常可以由三种基本色所表达,这三种颜色被称为“三原色”。一般来说叠加型的三原色是红色、绿色、蓝色、(又称三基色,用于电视机、投影仪等显示设备)。
色彩空间:是对色彩的组织方式,借助色彩空间和针对物理设备的测试,可以得到色彩的固定模拟和数字表示(例如 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 色彩模型的创建方式是将红色、绿色、蓝色映射到三维笛卡尔坐标系中。
方式三: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 色彩模型中的点在圆柱坐标系中的表示方式,这种色彩模型能够做到比基于笛卡尔坐标系的几何结构更加直观。
- 色相(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 }; } ```
相关资料:
关注微信公众号“依赖注入”获得更佳阅读体验。