在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为完全透明
网友评论