前面的话

　　赏心悦目的颜色搭配让人感到舒服，修改元素颜色的功能让人趋之若鹜。但颜色规划不当，会让网站用户无所适从。颜色从 <font color=""> 发展至今，保留了很多内容，也增加了新的内容，本文将介绍关于颜色模式的内容

颜色模式

　　以前主要采用关键字、16 进制和 RGB 这三种设置颜色的方式。CSS3 出现后，增加了 RGBA、HSL、HSLA 这三种模式，极大地丰富了 CSS 颜色设置的方式

关键字

　　CSS 颜色关键字包括命名颜色、transparent、currentColor 属性值

命名颜色

　　直接使用的名字的颜色值称为命名颜色

　　CSS 支持 17 种合法命名颜色 (标准颜色):

aqua fuchsia lime olive red white black gray maroon orange silver yellow blue green navy purple teal

　　[注意] 浏览器支持 140 种颜色

transparent

　　color: transparent 用来表示文本的颜色纯透明，可以近似认为是 rgba(0,0,0,0)

　　[注意]IE7- 不支持 color:transparent，但支持 background-color: transparent 和 border-color: transparent

currentColor

　　currentColor 顾名思义指当前颜色，准确来讲指当前的文字颜色

　　[注意]IE8- 不支持该属性值

16 进制

　　16 进制是设置颜色值的常用方式，将三个介于 00-FF 的十六进制数连接起来，若 16 进制的 3 组数各自成对，则可简写为 3 位

　　#abcdef
　　#aabbcc <=> #abc

< 安全颜色 >

　　web 安全颜色是指在 256 色计算机系统上总能避免抖动的颜色，表示为 RGB 值 20% 和 51(相应的 16 进制值为 33) 的倍数。因此，采用 16 进制时，使用 00\33\66\99\cc\ff 认为是 Web 安全色，一共 6*6*6=216 种

RGB 模式

　　通过组合不同的红色、绿色、蓝色分量创造出的颜色成为 RGB 模式的颜色。显示器是由一个个像素构成，利用电子束来表现色彩。像素把光的三原色: 红色 (R)、绿色(G)、蓝色(B) 组合起来。每像素包含 8 位元色彩的信息量，有 0-255 的 256 个单元，其中 0 是完全无光状态，255 是最亮状态

　　rgb(x%,y%,z%)　　rgb(a,b,c)

　　[注意] 若数值小于最小值 0, 则默认调整为 0; 若数值大小最大值 255, 则默认调整为 255

RGBA 模式

　　rgba 模式是在 RGB 基础上增加了 alpha 通道，用来设置颜色的透明度，其中这个通道值的范围是 0-1。0 代表完全透明，1 代表完全不透明

　　[注意]IE8- 浏览器不支持

    rgba(r,g,b,a)

<IE 滤镜 >

　　IE8- 浏览器对新增的颜色模式并不支持，需要使用 gradient 滤镜。gradient 滤镜的前两位表示 Alpha 透明度值 (00-ff)，其中 00 表示全透明，ff 表示完全不透明。后六位代表的是 RGB 模式

　　如果使用 #A6DADC 并且透明度为 0.6 的透明色 (0.6*255=153，转换成 16 进制是 99)，用 gradient 滤镜表示为

filter:progid:DXImageTransform.Microsoft.gradient(enabled = 'true',startColorstr="#99A6DADC",endColorstr="#99A6DADC")

　　[注意]IE 滤镜只能兼容背景色，而不能兼容前景色

HSL 模式

　　HSL 模式是通过对色调 (H)、饱和度(S)、亮度(L) 三个颜色通道的变化以及它们相互的叠加得到各式各样的颜色。HSL 标准几乎可以包括人类视力所能感知的所有颜色

　　[注意]IE8- 浏览器不支持

    hsl(h,s,l)

　　h: 色调 (hue) 可以为任意整数。0(或 360 或 -360)表示红色，60 表示黄色，120 表示绿色，180 表示青色，240 表示蓝色，300 表示洋红(当 h 值大于 360 时，实际的值等于该值模 360 后的值)

　　s: 饱和度 (saturation)，就是指颜色的深浅度和鲜艳程度。取 0-100% 范围的值，其中 0 表示灰度 (没有该颜色)，100% 表示饱和度最高 (颜色最鲜艳)

　　l: 亮度 (lightness)，取 0-100% 范围的值，其中 0 表示最暗 (黑色)，100% 表示最亮 (白色)

 

HSLA 模式

　　HSLA 模式是 HSL 的扩展模式，在 HSL 的基础上增加一个透明通道 alpha 来设置透明度

　　[注意]IE8- 浏览器不支持

    hsla(<length>,<percentage>,<percentage>,<opacity>)