rgb

RGBA 色彩模式是 RGB 色彩模式的扩展，他在红、绿、蓝三原色的通道上增加了不透明度

色字头上一把刀

设计者使用 RGB 可以设置颜色， CSS 3中新增了另外一种设置颜色的方式： HSL 。 HSL 色彩模式是工业界的一种颜色标准，是通过对色调（ H ）、饱和度（ S ）和亮度（ L ）三个颜色通道的变化以及相互之间的叠加得到各式各样的颜色。

HSL 代表了色调、饱和度和亮度三个通道的颜色，这个标准几乎包括人类视力所感知的所有颜色，也是目前运用最为广泛的颜色系统之一。如下所示为 HSL 的语法：

hsl(hue, saturation, lightness);

使用 HSL 时，需要向 hsl()中添加三个参数，说明如下:

• hue ：表示色调， 0或者 360表示红色， 120表示绿色， 240表示蓝色，也可以设置其它值确定其它的颜色。当值大于 360时，实际值等于该值除以 360之后的余数，例如色调设置为 600，则实际值是 600%360=240。
• saturation ：饱和度的百分比，用于指定颜色被使用了多少，即颜色的深浅和鲜艳程度。它的取值在 0%~100%之间，其中， 0%表示没有颜色（使用灰度）， 100%表示饱和度最高（颜色最鲜艳）。
• lightness ：高度的百分比，取值范围在 0%~100%之间。其中， 0%表示最暗，显示为黑色； 100%表示最亮，显示为白色。

hsl

hsl ，其中 色调（ H ）、饱和度（ S ）、亮度（ L ） 3种颜色通道变化叠加，语法如下:

hsl(<length>,<percentage>,<percentage>)

其中，色调 (HUE)衍生于色盘，取值为任意值。其中 0（ 360、 -360）表示红色、 60表示黄色、 120代表绿色、 180代表青色、 240代表蓝色、 300代表洋红。

饱和度表示色彩被使用了多少，或者说颜色的深浅程度、鲜艳程度。取值在 0% ~ 100% 之间。 0%显示灰色，即没有该颜色； 100%饱和度最高，颜色最艳。

亮度取值在 0% ~ 100% 之间。 0% 最暗 ，显示为黑色， 50% 为均衡， 100% 显示为白色。

HSL 的使用方法与 RGB 和 RGBA 一样非常简单，只需要在 hsl()中指定各个参数的值即可。

background: #ffffff; /*设置边框阴影效果*/
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; /*兼容 Mozilla 类型浏览器，如 FF*/
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
/*兼容 Webkit 引擎，如 Chorme 和 Safari 等*/
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;

W3C 标准列出了 17种颜色：浅绿色、黑色、蓝色、紫红色、灰色、绿色、石灰色、茶色、深蓝色、橄榄色、橙色、紫色、红色、银色、凫蓝色、白色和黄色。

色轮（ color wheel ）是一张图表，以圆形方式显示了颜色的组织。它的显示方法是尝试帮助你形象地表示主色、辅色与补色之间的关系。配色方案是通过操作色轮开发的，理解配色方案有助于确定要在整个 Web 站点中一致地使用的调色板。例如，知道一些关于颜色关系的知识将有希望使你能够避免在淡蓝色背景上使用橙色文本，或者在棕褐色背景上使用翠蓝色文本。

Web 设计中的一些常见的配色方案如下。

• 类似色：使用色轮上彼此相邻的颜色，比如黄色和绿色。其中一种颜色是主色，其相似的邻近颜色可以丰富显示效果
• 补色：使用色轮上彼此相对的颜色，比如暖色（红色）和冷色（绿色）
• 三色：使用在色轮上间隔相等的 3种颜色。三色方案可以提供平衡感，同时仍然允许使用丰富的颜色

十六进制

十六进制的颜色格式是 #RrGgBb ，其中 rr 、 gg 和 bb 是 2位数字的十六进制值，分别用于颜色中的红色（ rr ）、绿色（ gg ）和蓝色（ bb ）成分。

rgba

以 十进制转化 十六进制 ,a 表示 透明度 ,取值 0-1。

HSLA

HSLA ，在 hsl 的基础上添加了 透明度，取值在 0 ~ 1 之间。

li:nth-child(1) {
  background: hsla(120, 50%, 50%, 0.1);
}
li:nth-child(2) {
  background: hsla(120, 50%, 50%, 0.2);
}
li:nth-child(3) {
  background: hsla(120, 50%, 50%, 0.3);
}
li:nth-child(4) {
  background: hsla(120, 50%, 50%, 0.4);
}
li:nth-child(5) {
  background: hsla(120, 50%, 50%, 0.5);
}

Web 安全色

在过去，显示器性能比较落后，最多支持 256种颜色，其中 40种颜色被操作系统作为保留色，剩下的 216种就是 Web 安全色。 Web 安全色是指在各种平台下显示效果与预期一致，如果不是安全色，操作系统可能会在处理颜色的时候产生抖动（抖动就是混合几种颜色，模拟出系统没有的颜色），这样形成的颜色在不同平台中会有色差，例如在 Mac 中显示为深绿，而在 Thinkpad 中却显示为淡绿。

用 rgb()函数表示 Web 安全色，三个参数值需要是能被 20%或 51整除的数，也可以是 0%或 0。

用十六进制标记法表示 Web 安全色，需要用 00、 33、 66、 99、 CC 或 FF 组合的值。在这 6对数中，选 3对，正好有 216种（即 6的三次方）组合方式，并且所有的安全色都可用简写。

透明度

opacity ，设置任何元素的不透明度。方法：

opacity ： <alpha value> | inherit;

使用 alpha 通道对元素设置不透明度时，可以单独针对元素的背景色和文字颜色进行设置，而 opacity 只能对指定整个元素进行设置。

.bg {
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.7;
  filter: alpha(opacity=70);
}

定义 transparent 颜色值

如果将颜色值指定为 transparent ，则会将背景、文字或边框等的颜色设定为完全透明，相当于使用了值为 0的 alpha 通道。在 CSS1中，只能在 background-color 属性中指定 transparent 值。在 CSS2中，可以在 background-color 及 border-color 属性中指定 transparent 值。在 CSS3中，可以在一切指定颜色值的属性中指定 transparent 值。