当我在已经忘记了还有 HSL 这么个东西，最近却又用上了它的时候，我觉得还是有必要写一点关于颜色的总结（不涉及 IE）
CSS 中的颜色是以光的三原色 红-RED，绿-GREEN，蓝-BLUE 为基础表示出来的。其表示方法大致可以分为 颜色名称，RGB，HEX，HSL 四类
颜色名称
/* color: colorName */
p { color: red; }
这个没太多说的，就是用颜色的 英文名称 直接表示，名称具体对应的 HEX值 可以 参照页面
RGB
/*
color: rgb(red, green, blue)
color: rgba(red, green, blue, alpha)
*/
p {
color: rgb(255, 255, 255);
background-color: rgba(0, 0, 0, .5)
}
RGB 的 3 个参数分别对应 red，green，blue。它是红绿蓝三色在数值上的直观体现，取值范围为 0~255，也可以是 0%~100%，但要注意的是，数值和百分比不能混合使用，rgb(255, 0, 0 ) 换成百分比，需要写作 rgb(100%, 0%, 0%)，否则属于无效属性。
RGBA 在 RGB 的基础上增加了 alpha 属性，用来设置透明度，取值范围为 0~1，请不要尝试使用百分比 :)
HEX
/* color: hex */
p { color: #ffb500; }
HEX 就是十六进制，这是页面开发中使用频率最高的颜色表示方法。它的值是由红绿蓝三色数值的十六进制数组合而成。这样说可能有点绕口，让我们把上面例子中的值拆分成 4 个部分：#，ff，b5，00：
- 第 1 部分
#相当于十六进制颜色的识别符，告诉浏览器后面跟上的是表示颜色的十六进制数 - 第 2 部分
ff是 red 的十六进制数值，换算成十进制就是15 * 16 + 15 = 255 - 第 3 部分
b5是 green 的十六进制数值，换算成十进制就是11 * 16 + 5 = 181 - 第 4 部分
00是 blue 的十六进制数值，换算成十进制就是0 * 16 + 0 = 0
因此，HEX 与 RGB 相互转换的过程可以分解为
#ffb500 ←→ rgb(ff, b5, 00) ←→ rgb(255, 181, 0)
而当 3 个十六进制数值的两位数都重复时（#ff0000），可以采用简写形式（#f00）。
HSL
/*
color: hsl(hue, saturation, lightness)
color: hsla(hue, saturation, lightness, alpha)
*/
p {
color: hsl(0, 0%, 100%);
background-color: hsla(0, 0%, 0%, .5)
}
HSL 对于我个人来说是不太好理解的（色彩基础弱鸡）。它有 3 个参数：
- H：Hue（色调）。取值范围为：0~360，0（或360）表示红色，120表示绿色，240表示蓝色。但实际上它是一个圆环的形式，因此当取值小于 0 或大于 360 时，这个值仍然是有效的
- S：Saturation（饱和度）。取值为：0%~100%。这个值决定了颜色的鲜艳程度，当它为 100% 时，会将当前色调完全展示出来，而随着百分比的降低，颜色的鲜艳程度会降低，表现出来的视觉效果就是颜色逐渐变灰
- L：Lightness（亮度）。取值为：0%~100%。这个值和饱和度不同，并不是越高表现力越强。假定给它设定一个标准值为 50%，那么它在这个标准值时，表现出来的色调是最正的。当它高于或者低于标准值时，就会像照相一样，曝光过度导致相片泛白，或者曝光不足导致相片发黑
所以如果用 HSL 来表示红绿蓝三色，就是 red: hsl(0, 100%, 50%) green: hsl(120, 100%, 50%) blue: hsl(240, 100%, 50%)。当你需要随机产生一些比较鲜艳的颜色时，把 hue 单独作为变量是个不错的选择。
和 RGBA 一样，HSLA 也有一个 alpha 属性来调节透明度。
另外关于 HSL 和 RGB 之间的转换，可以 参考页面
关于透明度
rgb 和 hsl 有相应的 rgba 和 hsla 来设置透明度，对于 颜色名称 和 HEX 来说，就是使用 opacity，但是两者之间是有区别的。
opacity 是针对元素的透明度，p { opacity: .5 } 这样的设置会使元素整体透明，包括它的子元素。
而 alpha 是针对元素样式属性的透明度，p { background-color: rgba(0, 0, 0, .5) } 这样的设置只会使元素的背景色透明，并不会影响到其他属性（比如 color），也不会对子元素起效果。
其他
颜色对于前端来说其实是比较基础的东西，它的内容不多，但是不熟悉的话也会引起一些小麻烦。比如通过 element.style.color = '#f00' 将元素的字体设为红色，再想通过 #f00 来操作 DOM 是不能实现的，因为浏览器（非IE）会自动将 #f00 转换成 rgb(255, 0, 0) 之后再加入到元素的行间样式中 :)
网友评论