有几个CSS属性为HTML元素的各个部分指定颜色。例如，"颜色"，"背景颜色"，"边框"等。

我们还可以使用CSS颜色设置SVG元素的颜色，这些元素是在浏览器中呈现的矢量图形元素。在这种情况下，我们可以使用CSS设置SVG元素的笔触和填充颜色。我的SVG和CSS教程中介绍了如何将CSS与SVG元素一起使用。

指定颜色时，可以使用以下格式：

• 预设颜色代码
• 十六进制RGB
• RGB
• RGBA
• HSL

以下各节将介绍每种方法。以下是CSS规则中使用的这些不同颜色格式的一些示例：

#one   {  background-color: red;  }
#two   {  background-color: #ff0000;  }
#three {  background-color: rgb(255, 0, 0);  }
#four  {  background-color: rgba(255, 0, 0, 1.0);  }
#five  {  background-color: hsl(0%, 100%, 0%); }

所有这些CSS规则都将HTML元素的背景色设置为红色，但是它们使用预设的颜色代码，十六进制颜色代码，RGB颜色代码，RGBA颜色代码和HSL颜色代码来设置。

预定义的颜色代码

CSS包含一组预定义的颜色，例如" red"，" green"等。以下是一些最常见的预设颜色代码：

• 红色
• 绿色
• 蓝色
• 黑色
• 白色
• 灰色
• 洋红色
• 紫色
• 紫罗兰色

预定义的颜色比这些还多，但是尽管这些预定义的颜色代码似乎很方便，但是却很少满足需求。我们网站的配色方案通常会要求使用没有预定义代码的颜色。因此，大多数情况下，我们将使用十六进制或者RGB / RGBA颜色代码。

十六进制RGB

十六进制RGB颜色符号是最早的颜色符号(以及预定义的颜色代码)。十六进制RGB颜色表示法将任何给定的颜色细微差别分成三个部分：红色，绿色和蓝色。这就是三个字母RGB的来源。任何颜色都由一定数量的红色，绿色和蓝色组成。

指定十六进制RGB颜色时，将以十六进制数字写入红色，绿色和蓝色值。十六进制颜色分量编号由0到255之间的数字组成，但使用2个十六进制数字指定。

这是一个十六进制颜色代码示例：

#ff00ff;

该代码由三个颜色分量值组成：红色(ff)，绿色(00)和蓝色(ff)。因此，该颜色是红色和蓝色的混合，从而产生紫色。

注意颜色代码前面的"#"。此字符向浏览器表示这是十六进制颜色代码。

RGB颜色

RGB颜色格式与十六进制颜色格式非常相似。每种颜色都指定为红色，绿色和蓝色之间的混合色。可以使用0到255之间的十进制数字来代替十六进制数字。这是RGB颜色的示例：

rgb(255, 0, 255);

本示例将红色(第一个)细微差别设置为255，将绿色(第二个)细微差别设置为0，将蓝色(第三个)细微差别设置为255. 这将产生与十六进制颜色示例中列出的相同的紫色。

RGBA颜色

RGBA颜色表示红色，绿色，蓝色和Alpha。 RGB部分与RGB颜色相同。 A(alpha通道)指定颜色的不透明度。可以将Alpha通道值设置为0(完全透明)和1.0(完全不透明)之间。这是RGBA颜色示例：

RGBA (255, 0, 255, 1.0);

本示例将红色(第一)颜色分量设置为255，将绿色(第二)颜色分量设置为0，将蓝色(第三)颜色分量设置为255，并将alpha(第四)值设置为1.0，表示完全不透明。

可以通过将alpha值设置为0.5来指定半透明/半不透明的颜色。

当颜色是透明的或者部分透明的时，则在具有该颜色的像素下显示的所有内容都将通过这些像素可见。因此，如果我们在其他HTML元素的顶部放置了一个div元素，并且该div元素使用了半透明的背景色，则在div元素下方的HTML元素将通过div可以部分可见元素。

HSL颜色

HSL颜色(色调，饱和度，亮度)是CSS 3.0中的新增功能。如果我们是设计师，则可能比RGB颜色更习惯使用HSL颜色。我们可以像这样指定HSL颜色：

hsl(0%, 100%, 0%);

代码hsl告诉浏览器我们正在指定一种HSL颜色。括号内的三个成分是"色调"，"饱和度"和"亮度"值(按此顺序)。