网页中的颜色搭配可以更好地吸引浏览者的目光，在CSS 2.1的基础上CSS 3新增了RGBA、HSL和HSLA三种颜色定义方法，有效地丰富了网页色彩的表现效果。

1.RGBA颜色模式

在CSS 3中，RGBA颜色模式在RGB颜色模式的基础上增加了控制alpha透明度的参数，其中RGB颜色模式（也称为三原色）是工业界的一种颜色标准，通过对红（R）、绿（G）、蓝（B）三个颜色通道的变化以及它们相互之间的叠加得到各种颜色，RGB几乎包括人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。而RGBA颜色模式仅在RGB颜色模式的基础上增加了alpha通道，用来设置颜色的透明度。

RGBA颜色模式的语法格式如下。

rgba (r,g,b,<opacity>);

R、G和B分别表示红色、绿色和蓝色3种原色所占的比重，R、G和B的值可以是正整数或百分数，正整数值的取值范围为0~255，百分比数值的取值范围为0%~100%，超出范围的数值将被截至其最近的取值极限。注意，并非所有浏览器都支持百分数值。第4个属性值<opacity>表示不透明度，取值范围为0~1。

2.HSL颜色模式

HSL与RGB一样，同属于工业界的一种颜色标准，通过对色调（H）、饱和度（S）和亮度（L）3个颜色通道的改变，以及它们相互之间的叠加来获得各种颜色。

CSS 3中新增了HSL颜色设置方式，在使用HSL方法设置颜色时，需要定义3个值，分别是色调（H）、饱和度（S）和亮度（L）。HSL颜色模式的语法格式如下。

hsl (<length>,<percentage>,<percentage>);

HSL的相关参数说明如下表所示。

3.HSLA颜色模式

HSLA是HSL颜色定义方法的扩展，在色相、饱和度、亮度三要素的基础上增加了不透明度的设置。使用HSLA颜色定义方法，能够灵活的设置各种不同的透明效果。HSLA颜色模式的语法格式如下。

hsla (<length>,<percentage>,<percentage>,<opacity>);

前3个参数与HSL颜色模式的参数相同，第4个参数即用于设置颜色的不透明度，取值范围为0~1之间，如果值为0，则表示颜色完全透明，如果值为1，则表示颜色完全不透明。