• 一、颜色总结图
• 二、currentColor - CSS3超高校级好用CSS变量
  • 2.1 currentColor 是什么
  • 2.2 浏览器兼容性
  • 2.3 demo
  • 2.4 总结
• 三、颜色关键字（别名）
• 四、十六进制
  • 4.1 兼容性
  • 4.2 进制转换
• 五、rgb 和 rgba
  • 5.1 浏览器兼容
  • 5.2 rgb 说明
  • 5.3 rgba说明
• 六、hsl 和 hsla
  • 6.1 浏览器兼容
  • 6.2 hsl 和 hsla 说明
• 七、transparent
  • 7.1 浏览器兼容性
  • 7.2 介绍

• 参考文章：
  • currentColor-CSS3超高校级好用CSS变量
  • http://www.css88.com/book/css/values/color/rgb.htm

一、颜色总结图

二、currentColor - CSS3超高校级好用CSS变量

2.1 currentColor 是什么

• currentColor 顾名思意就是“当前颜色”，准确讲应该是“当前的文字颜色”。
  • 即：currentColor = color 的值。

2.2 浏览器兼容性

• 点击查看兼容性

2.3 demo

• 点击打开demo

• 从上面实例可看到：
  • 1、只需要在输入框输入一个颜色值，那么所有文字（包括那些小方块）都变成相同颜色；
  • 2、不过，在修改颜色之前，你会发现鼠标悬浮在文字上会变红色，但在输入框中修改了颜色值后，鼠标悬浮在文字上不会再变颜色，那是因为 aTag[i].style.color = colorShop.value; 这一行代码，它设置的是行内代码，优先级高于 .list a:hover。

2.4 总结

• 1、如果元素本身设置了 color 属性，此时的 currentColor 的值就是元素所设置的 color 属性的值。
• 2、如果元素本身没有设置 color 属性，那么就会往其父元素甚至是祖父元素直到根元素找到相应的 color 值为止。

三、颜色关键字（别名）

• 可查看基础颜色关键字
• 可查看系统颜色关键字
• 可查看扩展颜色关键字

• 兼容性：

四、十六进制

4.1 兼容性

4.2 进制转换

• 十进制和十六进制间的转换：

• 示例：150 与 十六进制 96 之间的转换

五、rgb 和 rgba

5.1 浏览器兼容

• rgb

• rgba

5.2 rgb 说明

• RGB(R,G,B)
  • 以上三个参数，正整数值的取值范围为：0 - 255；百分数值的取值范围为：0.0% - 100.0%。
  • 超出范围的数值将被截至其最接近的取值极限。
    • 如：rgb(300,0,0)会被解析为 rgb(255,0,0) 正整数值 255 对应百分比数值 100%。
    • 如：rgb(255,255,255) = rgb(100%,100%,100%) = #FFFFFF = #FFF。
  • RGB 色彩是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化和它们相互之间的叠加来得到各式各样的颜色的。
  • 此 RGB 色彩模式与 #RRGGBB / #RGB ( HEX )不同。

5.3 rgba说明

• RGBA(R,G,B,Alpha)

六、hsl 和 hsla

6.1 浏览器兼容

• hsl

• hsla

6.2 hsl 和 hsla 说明

• HSL(H,S,L) && HSLA(H,S,L,A)：
  • H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
  • S：Saturation(饱和度)。取值为：0.0% - 100.0%
  • L：Lightness(亮度)。取值为：0.0% - 100.0%
  • A：Alpha透明度。取值0~1之间。

七、transparent

7.1 浏览器兼容性

7.2 介绍