CSS3颜色特性-创新互联

 CSS3颜色特性

“佛靠金装，人靠衣装”，网页也是如此。随着互联网的迅速发展，一个网页给人们留下的第一印象，既不是它的内容，也不是它的设计， 而是整体颜色。为了能够达到人们的需求，Web设计师除了需要掌握网站制作的技术之外，还必须能够很好地应用 Web颜色。换句话说，网站颜色的使用好坏， 直接影响网站的生存力。

网页色彩的表现原理：

我们知道有256种Web安全颜色，其实这256种颜色是指8位颜色的表现能力，随着科技的发展，现在颜色不局限于8位，16位色彩的总数是65536色，也就是2的16次方，而新增了24位元色彩，也就是2的24次方，即16777216种颜色。32位色就是2的32次方的发色数，即16777216种颜色，不过它增加了256阶颜色的灰度。 32位色和16位色肉眼分辨不出来吗？ 如果用两台品牌型号都一样 的显示器， 分别调不同的颜色， 就能看出区别。 而在Web页面的设计中， 颜色主要运用16 进制数值的表示方法， 为了用HTML表现RGB颜色， 使用十六进制数 0 ～ 255， 改为十六进制就是 00 ～ FF， 用RGB的顺序罗列就成为HTML颜色编码。 例如， 在 HTML 编码中“ 000000” 就是指红色（ R）、绿色（ G） 和蓝色（ B） 都没有，就是0状态，也就是黑色。相反“ FFFFFF” 就是就是 红色（ R）、 绿色（ G） 和蓝色（ B）都是 255，也就是白色。显示器是由一个个像素构成，利用电子束来表现色彩。像素把光的三原色： 红色（ R）、绿色（ G）、蓝色（ B） 组合成的色彩 按照科学原理表现出来。 一 像素包含 8 位元色彩的信息量， 有 从 0 ～ 255 的256个单元， 其中 0 是 完全 无光 状态， 255 是最 亮 状态。

http:/ /www.iis7.com/b/wzjk/

1. RGB色彩模式，RGB色彩模式是光的三原色 红、 绿、 蓝 混合产生的。 Web页面中使用的图片在大多数是在RGB色彩模式中制作的。 RGB色彩是颜色相加混合产生的， 这样的混合称为加色混合。加色混合中， 补色是指相关的两个颜色混合时， 成为白色的情况。

2.CMYK色彩模式，CMYK色彩模式是指颜料的三原色青色、洋红、黄色加上黑色，这四种颜色减色混合表现出的色彩是主要用于出版印刷时制作图像的一种模式。 减色混合是指是指颜色混合后出现 的色彩比原来的颜色暗淡， 这样与补色相关的两种颜色混合就会出现彩色的情况。

3. 索引色彩模式，索引色彩模式是已经被限定在256种颜色以内的模式， 主要用于Web页面安全色彩和制作透明GIF图片。在Photoshop中制作透明GIF图片时， 一定要使用索引色彩模式。

4. 灰度模式，灰度模式是无色彩模式， 在制作黑白图片时使用， 主要用于处理 黑、白、灰色 图片。

5.双色调模式，双色调模式是在黑白图片中加入颜色，使色调更加丰富的模式。RGB、CMYK等颜色模式都不可以直接转换为双色调模式，必须将色彩模式先转换为灰度模式后， 才能够转换为双色调 模式。 用双色调模式可以用很小的空间制作出漂亮的图片。

6.位图模式，位图模式是用白色和黑色共同处理图片的模式。与双色调一样，除双色调模式和灰度模式外，其他色彩模式都需要转换为灰度模式后，再转换为位图模式。 位图模式可以选定5种图片 处理 方法：

-50% 阈值， 是在 256 种 颜色 中， 当 颜色 值 大于 129 就 处理 为 白色， 反之则处理为黑色。 

-图案仿色， 是按一定的模式处理图片。 

-扩散仿色为最常用的选项， 是按黑色和白色的阴影使其分布。 

-半调网屏与自定图案， 是利用盲点的各种形态和密度与用户自己设置样式的处理方式。

CSS3 颜色模式在 CSS2.  的基础 CSS3上 新增了 RGBA、 HSL 和 HSLA：

1. RGBA在RGB基础上增加了控制alpha透明度的参数，其中RGB颜色模式（ 也称为三原色） 是工业界的一种颜色标准，通过对红（ R）、绿（ G）、蓝（ B） 三个颜色通道的变化以及它们相互之间的叠加得到各种颜色，RGB几乎包括人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。 而RGBA仅在 RGB 的基础上增加了alpha通道， 用来设置颜色的透明度。

RGBA的属性参数很简单， 分别代表红，绿，蓝以及透明度的值。

-R： 红色值， 其取值可以是正整数或者百分值。 

-G： 绿色值， 其取值可以是正整数或者百分值。 

-B： 蓝色值， 其取值可以是正整数或者百分值。 

-A： alpha透明值， 其取值在0～1范围之间。

这几个参数值都不可以取负值。

2. HSL颜色模式HSL和RGB一样，同属于工业界的一种颜色标准，通过对色调（ H）、饱和度（ S）、亮度（ L）三个颜色通道的变化以及它们相互之间的叠加 得到各式各样的颜色的。 HSL标准几乎包括人类视力所能感知的所有颜色， 是目前运用最广的颜色系统之一。使用HSL模型为图像中每一个像素的HSL分量分配 一个0～255范围内的强度值。HSL图像只用三种通道按照不同的比例混合，在屏幕上呈现16777216种颜色。前面也说过，色调（ H）是在色盘上的颜色，颜色 的选择是使用饱和度（ S），0度是红色，120度为绿色，240度为蓝色。同时可以使用不同的亮度（ L）来控制这个颜色，其中0表示的是一个灰度，不使用任何 的色彩，而100%是指在充分使用一个颜色。

-H： 色调（ Hue）取整数值（< length>），可以为任意整数，其中0（ 或360或-360） 表示红色， 60表示黄色， 120表示绿色， 180表示青色，240表示 蓝色， 300表示洋红。 当它们的值大于360时，实际的值等于该值除360之后的余数。例如，如果色调的值是480，则实际的颜色值为480除以360之后得到的 余数120。 

-S： 饱和度（ Saturation）。就是颜色的深浅度和鲜艳程序， 取百分数（< percentage>）， 可以取值0～100%之间的任意值，其中0表示灰度（ 没有该 颜色）， 100%表示饱和度最高（ 该颜色最鲜艳）。 

-L： 亮度（ Lightness）。取值和饱和度（ S） 一样，可以取值0～100%之间的任意值，其中0最暗（ 黑色），100%最亮（白色）。

3. HSLA颜色模式HSLA是HSL的扩展模式， 在HSL的基础上增加一个透明通道alpha来设置不透明参数。