CSS已支持使用颜色名字、十六进制值及RGB值来表示颜色，CSS3又引入了以下几种颜色标准：

• RGBA
• HSL
• HSLA
• opacity

---

• CSS3 Colors

浏览器支持

Property	Chrome	IE	Firefox	Safari	Opera
RGBA/HSL/HSLA	4.0	9.0	3.0	3.1	10.1
opacity	4.0	9.0	2.0	3.1	10.1

RGBA 颜色

RGBA颜色值是在RGB颜色值的基础上增加一个alpha通道，用来指定颜色的不透明度。

RGBA颜色值格式为：rgba(red, green, blue, alpha)，其中alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的数字。

rgba(255, 0, 0, 0.2);

rgba(255, 0, 0, 0.4);

rgba(255, 0, 0, 0.6);

rgba(255, 0, 0, 0.8);

HSL颜色

HSL是Hue（色相）、Saturation（饱和度）和Lightness（亮度）三个单词的缩写。

HSL颜色值使用hsl(hue, saturation, lightness)格式来指定：

1. Hue 是色轮上一个度数
   • 0 (或360) 是红色
   • 120 是绿色
   • 240 是蓝色
2. Saturation 是一个百分数，100%是全色
3. Lightness 也是个百分数，0%是黑色，100%是白色

hsl(120, 100%, 90%)

hsl(120, 100%, 60%)

hsl(120, 60%, 90%)

hsl(120, 60%, 60%)

HSLA 颜色

HSLA颜色值在HSL基础上增加了一个alpha通道，用来指定颜色的不饱和度。

HSLA颜色值用hsla(hue, saturation, lightness, alpha)格式来指定，其中alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的数字。

hsla(120, 100%, 90%, 0.4)

hsla(120, 100%, 60%, 0.4)

hsla(120, 60%, 90%, 0.4)

hsla(120, 60%, 60%, 0.4)

Opacity（不透明度）

CSS3的opacity属性用来设置整个元素的不透明度（包括背景色和文本），该属性的值必须是一个介于0.0（完全透明）和1.0（完全不透明）之间的数字。

注意：上面的文本也会受到不透明度的影响

---