CSS学习篇（八） 颜色

色彩理论在设计学和美术领域中是个大学问，但是在设计网站的时候，需要设计师对颜色有一定的了解才能创建出更加醒目又不失和谐的视觉效果，从而提高用户体验。

在CSS中有三种方法来表示颜色，分别是颜色名、十六进制值、RGB和HSL。

在分别介绍三种表示法之前，先了解下计算机中颜色的表现原理。众多的电子显示器与手机设备屏幕一致，它们里面的背景颜色、图片等都是由红（Red）、绿(Green)、蓝(Blue)三原色光进行混合相加所形成的图像，我们称这是一种三原色光模型或RGB颜色模型。两种原色相加可以变成二次色，例如：蓝绿（G+B）、品红（R+B）和黄色（R+G），同理三种原色混合起来也会生成新的颜色——白色。

那么，三原色在计算机中是具体怎么定义的呢？红绿蓝三原色分别代表R、G、B，它们各自用一个字节（8位）来表示，即每种颜色通道分别单独有256种不同程度的变种色，而R、G、B三种颜色搭配起来可以形成一种单独的组合色，那么组合排列一下可以有256*256*256=16,777,216种的颜色。

 

颜色名

在CSS中只指定了部分颜色可以使用的关键字，而其他颜色只能通过后面几种表示法来设置。

例如，利用颜色名在CSS中设置背景颜色为红色：

background-color: red;

目前可以指定的颜色名可以参考这里。

 

十六进制值

上面提到R、G、B三种颜色分别用一个字节来表示，那么每种颜色对应十六进制就是两个位来表示，三种颜色合起来就是六个位来表示，那么很自然的红色是FF0000，绿色是00FF00，蓝色0000FF，很简单！FF代表这个字节是全1（即255），表示这种颜色是满值，同理如果是00就是全0，表示这种颜色是空值，如果RGB都设为0（即000000），代表的就是黑色。三原色中每种颜色都有相当于0到255之间不同程度的色值，我们可以通过设置这个值来表示不同的颜色。如：65FE33、453266、125E8F等

在CSS中通过十六进制值设置一个背景颜色为红色：

background-color: #FF0000;

可以看到，在设置的颜色值前方需要添加一个“#”，然后追加十六进制值。

另外如果在同一种颜色中，两个进制数相同，那么可以缩写为：

background-color: #F00;

这样表示的同样是红色。

 

RGB

RGB设置法理论上跟十六进制是一样的，它使用rgb函数并传入红、绿、蓝三个颜色值作为参数，在CSS中进行设置方式如下：

background-color: rgb(255, 0, 0);

第一个参数代表红色值，第二个参数代表绿色值，第三个参数代表蓝色值，可以分别传入0到255之间的色值，它与十六进制值的表示是类似的，只是这里使用十进制参数传入rgb函数的方式来表示。

 

HSL

这是一种相对RGB来说较新的方法，它由一个hsl函数来传入三个参数来表示颜色，不过这三个参数不是简单的代表R、G、B三种颜色，而是色调（Hue）、饱和度（Saturation）及明度（Lightness），它同样可以用来表示1670万多种颜色。

1. 色调：颜色的底色调。这个值在0到360之间，表示色环的角度。
2. 饱和度：饱和度是多少？这需要一个从0-100%的值，其中0是没有颜色（它将显示为灰色），100%是全彩色饱和度。
3. 明度：颜色有多亮或明亮？这需要一个从0-100%的值，其中0是无光（它会出现全黑的），100%是充满光的（它会出现全白）。

简单来说，色调就是颜色的值，这是在一个色环中指定的，用来确定颜色（0/360代表红，120代表绿，240代表蓝）。而饱和度用来调节颜色的纯度（深浅），而明度代表颜色的亮度（明暗）。

使用hsl来设置背景颜色为红色：

background-color: hsl(0,100%,50%);

 

透明度版本的RGB和HSL——RGBA和HSLA

RGB和HSL都有一个透明版本的函数，rgba和hsla，它们都增加了第四个参数用于设置颜色的透明度，这是一个0到1之间的数值来表示，0代表完全透明，1代表完全不透明。

例如，利用它们分别设置半透明的红色：

background-color: rgba(255, 0, 0, 0.5);

background-color: hsla(0, 100%, 50%, 0.5);

设置透明度除了上面的*a版本函数之外，CSS中还有一个单独的属性可以设置——opacity，同样是0-1的值，0代表完全透明，1代表完全不透明。不过有一个区别就是，*a版本函数只会设置设置对应颜色的不透明度，但是opacity会对整个选择器所有元素（包括颜色和文本）都进行透明度的设置。