CSS颜色

CSS颜色分类

• HEX（十六进制）
• RGB/RGBA
• HSL/HSLA
• 颜色关键词

HEX

每对值表示一个通道——红色、绿色和蓝色，由#后面带6个十六进制的数表示，每个十六进制数字都可以是0到f之间的16个数中间的一个，那么每个通道也就是两个十六进制数的组合就有16*16=256个选择。
如这种表示：#02798b
#000000表示黑色 #ffffff表示白色

• 3个通道使用相等的值是从黑到白之间的各种灰色值。

#ff0000表示红色-红色通道是最大值ff，其他是最小值00

RGB / RGBA

可以区分256256256=16,777,216种颜色

RGB是一个包含三个参数的函数——rgb(r, g, b)，分别表示红色，绿色和蓝色的通道值。这里的通道值由0-255之间的十进制数值表示。
rgb(255, 0, 0)表示红色
rgb(255, 255, 255) 白色
rgb(0, 0, 0)黑色

RGBA在RGB基础上增加了第四个通道，表示不透明度，值越大越不透明
0表示完全透明，1表示完全不透明

区别于opacity属性，opacity也是表示不透明度，但它是设置一个元素的不透明度，这里的RGBA是设置颜色的不透明度。

虽然现在浏览器都进行了更新，rgb和rgba可以通用，但是为了区别透明与不透明的定义，最好还是在有透明度设置的情况下使用rgba更好。

HSL / HSLA

在旧版本的IE中不支持

可以区分1670万种颜色

hsl(色调，饱和度，亮度值)

• 色调： 颜色的底色。这个值在0和360之间，表示色轮周围的角度。
• 饱和度： 颜色有多饱和？ 它的值为0 - 100%，其中0为无颜色(它将显示为灰色阴影)，100%为全色饱和度
  ** 亮度**：颜色有多亮？ 它从0 - 100%中获取一个值，其中0表示没有光(它将完全显示为黑色)，100%表示完全亮(它将完全显示为白色)

hsla增加了第四个通道：不透明度

颜色关键词

参考 https://developer.mozilla.org/en-US/docs/Web/CSS/color_value