CSS3中给出了一种全新的颜色表示方式——HSLA。它与我们熟知的RGB表示方式相比，更具有可读性和直观性，并且支持透明度的设置。HSLA中H代表Hue（色相），S代表Saturation（饱和度），L代表Lightness（亮度），A代表Alpha（透明度）。以下是一个HSLA颜色表示的例子：

color: hsla(240, 100%, 50%, 0.5);

上面的例子表示颜色为蓝色，完全饱和度，50%亮度，透明度为50%（即半透明）。下面分别解释一下每个参数：

• Hue（色相）：取值范围为0-360，表示颜色所处的角度，例如红色在0度，绿色在120度，蓝色在240度。
• Saturation（饱和度）：取值范围为0%-100%，表示颜色的纯度。饱和度为0%表示颜色是灰色的，饱和度为100%表示颜色是完全饱和的。
• Lightness（亮度）：取值范围为0%-100%，表示颜色的明暗程度。亮度为0%表示颜色是黑色的，亮度为100%表示颜色是白色的。
• Alpha（透明度）：取值范围为0-1，表示颜色的透明程度。透明度为0表示完全透明，透明度为1表示完全不透明。

HSLA的一个好处在于，它更容易实现颜色的渐变效果。下面是一个线性渐变的例子：

background: linear-gradient(hsla(0, 100%, 50%, 1), hsla(120, 100%, 50%, 1));

这个例子实现了从红色渐变到绿色的效果。我们可以通过调整起始颜色和结束颜色的Hue值，来实现不同的渐变效果。