揭秘HSLA

在css中表示颜色有几种方式：十六进制（#fff、#FFFFFF）、RGB（rgb(0, 0, 0)、rgb(255, 255, 255)）、RGBA（rgba(0, 0, 0, 1)、rgba(0, 0, 0,  0.1)）、还可直接使用英文单词（blank、white、red）、还有今天的重点HSL、HSLA。

H Hue 色调

    就是区分其本质颜色的 （红橙黄绿蓝靛紫）

    选值是：0度~360度 , 0是红色、120是绿色、240是蓝色、360也是红色

S Saturation 饱和度 

    就是其纯度（通俗一点儿就是这个红色是纯红还是灰蒙蒙的红）

    选值是：0%~100%, 0%饱和度最低，100%饱和度最高

L Lightness 亮度

    就是说此颜色亮不亮

    选值是：0%~100%， 0%最暗，100%最亮

A Alpha 不透明度

    选值是： 0.0~1.0， 0完全透明， 1完全不透明

结合一张图来看：

0~360度表示色调，围绕着圆柱体的一圈

从圆面的圆心向圆周表示饱和度

从圆柱底到圆柱顶表示亮度

举几个栗子吧：

1.色调（H）改变，饱和度不变，亮度不变，透明度不变

基本颜色会改变

2.色调不变，饱和度（S）改变，亮度不变，透明度不变

饱和度改变，颜色由纯变浑

3.色调不变，饱和度不变，亮度（L）改变，透明度不变

亮度为50%是为纯正的颜色，100%最亮，0%最暗

4.色调不变，饱和度不变，亮度不变，透明度（A）改变

1为完全不透明，0为完全透明