前言
通过CSS指定元素颜色是经常遇到的操作。在CSS中有多种表示颜色的方式。其中，RGBA、HSL、HSLA这三个是CSS3中新增的颜色表示方法。CSS提供了很多和color相关的属性，常用的主要有color、background-color、border-color、text-decoration-color等。下面的说明，均以对background-color的赋值为例。
Color Name
格式
background-color: Color Name
说明
直接指定颜色英文名称。在webstorm中，我们只需要输入red/green/blue/yellow这样常见的颜色单词，IDE会提示我们相关颜色，可以通过预览进行选择，如下：
案例
指定一组div元素的背景色：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1 {
border-radius: 50%;
background-color: red;
width: 100px;
height: 100px;
float: left;
margin-left: 20px;
}
#i2 {
border-radius: 50%;
background-color: blue;
width: 100px;
height: 100px;
float: left;
margin-left: 20px;
}
#i3 {
border-radius: 50%;
background-color: yellow;
width: 100px;
height: 100px;
float: left;
margin-left: 20px;
}
#i4 {
border-radius: 50%;
background-color: green;
width: 100px;
height: 100px;
float: left;
margin-left: 20px;
}
#i5 {
border-radius: 50%;
background-color: gray;
width: 100px;
height: 100px;
float: left;
margin-left: 20px;
}
</style>
</head>
<body>
<div id="color-preview">
<div id="i1"></div>
<div id="i2"></div>
<div id="i3"></div>
<div id="i4"></div>
<div id="i5"></div>
</div>
</body>
</html>
结果如下：
HEX
格式
background-color: #RRGGBB 或 #RGB
说明
可以用如上的十六进制法表示颜色，其中RR、GG、BB或者R、G、B分别代表红(R)、绿(G)、蓝(B)三个颜色通道的变化用它们相互之间的叠加来得到各式各样的颜色。6位或者3位，每一位是一个十六进制数字（其中字母大小写均可），取值范围0~F。表示时必须是两位数，对于只有一位的，应在前面补零。如果每个参数各自在两位上的数字都相同，那么本单位也可缩写为 #RGB 的方式。例如：#FF8800 可以缩写为 #F80。注意此色彩模式与RGB色彩模式不同。
案例
将上述代码中background-color分别替换为：”#0A8”、”#4a226d”、”#ee5f5b”、”#2b542c”、”#4f74cd”，结果如下：
RGB
格式
background-color: rgb(R,G,B)
说明
R：
红色值。正整数 | 百分数
G：
绿色值。正整数 | 百分数
B：
蓝色值。正整数 | 百分数
以上三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。如：rgb(300,0,0)会被解析为rgb(255,0,0)正整数值255对应百分比数值100%，如：rgb(255,255,255) = rgb(100%,100%,100%) = #FFFFFF = #FFF。此RGB色彩模式与#RRGGBB/#RGB(HEX)不同。
案例
将上述代码中background-color分别替换为：”rgb(255,255,0)”、”rgb(0,0,255)”、”rgb(0,255,0)”、”rgb(255,0,0)”、”rgb(0,0,0)”，结果如下：
RGBA
格式
background-color: rgb(R,G,B,A)
说明
R：
红色值。正整数 | 百分数
G：
绿色值。正整数 | 百分数
B：
蓝色值。正整数 | 百分数
A：
Alpha透明度。取值0~1之间。
此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。0是完全透明，1是完全不透明。
案例
将上述代码中background-color分别替换为：”rgba(0,255,0,0.1)”、”rgba(0,255,0,0.3)”、”rgba(0,255,0,0.5)”、”rgba(0,255,0,0.7)”、”rgba(0,255,0,1)”，结果如下：
HSL
格式
background-color: HSL(H,S,L)
说明
H：
Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：
Saturation(饱和度)。取值为：0.0% - 100.0%。饱和度可定义为彩度除以明度，与彩度同样表征彩色偏离同亮度灰色的程度。饱和度是指色彩的鲜艳程度，也称色彩的纯度。饱和度取决于该色中含色成分和消色成分（灰色）的比例。含色成分越大，饱和度越大；消色成分越大，饱和度越小。纯的颜色都是高度饱和的，如鲜红，鲜绿。混杂上白色，灰色或其他色调的颜色，是不饱和的颜色，如绛紫，粉红，黄褐等。
L：
Lightness(亮度)。取值为：0.0% - 100.0%。在白色背景下，当亮度达到100.0%，表现出的效果就是完全看不到。
从网上找了一张HSL的色轮图如下：
案例
将上述代码中background-color分别替换为：”HSL(0,40.0%,50.0%)”、”HSL(0,70.0%,50.0%)”、”HSL(0,100.0%,50.0%)”、”HSL(0,100.0%,70.0%)”、”HSL(0,100.0%,90.0%)”。前三个侧重比较在相同的亮度下，饱和度对颜色表现的影响；后三个侧重比较在相同的饱和度下，亮度对颜色表现的影响。结果如下：
HSLA
格式
background-color: HSLA(H,S,L,A)
说明
H：
Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：
Saturation(饱和度)。取值为：0.0% - 100.0%
L：
Lightness(亮度)。取值为：0.0% - 100.0%
A：
Alpha透明度。取值0~1之间。HSLA与HSL在颜色表现方式上相同，不同就在于多了这个透明度参数，0是完全透明，1是完全不透明。
案例
将上述代码中background-color分别替换为：”HSLA(220,100.0%,50.0%,0.1)”、”HSLA(220,100.0%,50.0%,0.3)”、”HSLA(220,100.0%,50.0%,0.5)”、
“HSLA(220,100.0%,50.0%,0.7)”、”HSLA(220,100.0%,50.0%,1)”，结果如下：