除了RGB外，颜色也可以使用 hsl() 函数符被定义为色相-饱和度-明度（Hue-saturation-lightness）模式。
背景
日常写样式代码时，常用的颜色表示方式有以下几种：
颜色关键字
颜色关键字表示法通过英文单词来表示对应颜色，这些颜色通过关键词定义便于记忆和快速使用。
但是这些颜色大多为不带透明度的颜色（关键字transparent除外，它代表的颜色是rgba(0, 0, 0, 0)）。
例如：
| 关键字 | 对应颜色 |
|---|---|
| black | #000 |
| white | #fff |
| red | #f00 |
| yellow | #ff0 |
| blue | #00f |
| pink | #ffc0cb |
| indigo | #cb0082 |
| grey | #808080 |
| green | #008000 |
| tranparent | rgba(0, 0, 0, 0) |
十六进制表示法
十六进制表示法的基本语法是#XXXXXX，其中X代表一个0-F的数字(16进制)。
它也不支持颜色透明度的设定(在CSS里)。
如果在CSS中使用时，十六进制中a-f大小写都可以支持。
不过最佳实践建议适用小写字母来表示颜色。并且如果颜色格式为#aabbcc建议缩写为#abc。
RGB与RGBA表示法
RGB与RGBA是CSS里定义好的用于表示颜色的内置函数，后者相比于前者多了一个用于表示透明度的参数。
R-G-B分别表示Red，Green，Blue。这三位的取值范围都为0-255或者0%-100%，100%与255表示的意义相同，都为FF。有两点需要注意：
- 不能接受小数作为参数。
- 整数与百分数的形式不可混用。
Alpha透明度值的取值范围为0-1，可以设置这个范围内的任意小数，并且在小数以0开始的时候可以省略0。
如rgba(255, 0, 0, .35)。
HSL与HSLA表示法
HSL和HSLA是CSS定义的另外2种表示颜色的内置函数，后者比前者多的仍然是用于表示透明度的参数，且取值范围同上。
HSL分别代表Hue（色相），Saturation（饱和度），Lightness（明度）。分别代表的意义:
- 色相 表示颜色在色环上的角度。用一个无单位的整数来表示。并且
0=360=red，其它颜色在色环上均匀分布。所以green=120，blue=240。 - 饱和度 表示颜色的饱和程度。 用一个百分数来表示。
100%代表满饱和度，0%代表一种灰度。一般颜色设置为满饱和度。 - 明度 表示颜色的明亮程度。 用一个百分数来表示。
100%代表白色，0%代表一种黑色。50%的明度是一般的(常见颜色的明度)。
所以常用的颜色用HSL表示法为hsl(0, 100%, 50%)（表示红色，#f00）。而减小明度，表示深色，增大明度表示浅色。如：
1 | color: hsl(0, 100%, 25%); /* 深红 */ |
优点： HSL颜色表示法在同种颜色间调整是线性可控的，比如我要将深绿色调整为浅绿色，只需要对应地调整其明度就可以。在一些特殊的场景里，这种颜色的表示方法更方便使用。
举例：
- 你是色盲吗小游戏，需要生成随机颜色的对应的颜色相近但是不同的颜色。
- 动画里的颜色调整。
兼容性
IE9+
详情见Can I Use
