1. hsl() 函数使用色相、饱和度、亮度来定义颜色。
HSL 即：色相（Hue）、饱和度（Saturation）、亮度（Lightness）。
hue-色相 定义色相（0到360）-0（或360）为红色，120为绿色，240为蓝色
saturation-饱和度 定义饱和度；0%为灰色，100%全白
lightness-亮度 定义亮度0%为暗，50%为普通，100%为白
生成一个互补色：
假如你的网站LOGO是橙色的，它对应的HSL颜色值为：hsl(30,90%,29%)，互补色就是色调值增加180度，得到的HSL颜色：hsl(210,90%,29%)
2. hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。
HSLA 即：色相、饱和度、亮度、透明度（英语：Hue, Saturation, Lightness, Alpha ）。
色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
亮度（L） 取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。
透明度（A） 取值 0~1 之间， 代表透明度。0透完全明, 1完全不透明。
其实HSLA() 和 HSL()函数用法基本一致，只不过在HSL()的基础上添加一个透明效果。