CSS 颜色

颜色是样式的重要组成部分，CSS 的颜色使用预定义的颜色名称或 RGB、HEX、HSL、RGBA、HSLA 值指标识。

CSS 中用到颜色属性主要有：

• color: 文本颜色
• background-color: 背景颜色
• border-color: 边框颜色

颜色的表示方法

在 HTML 中颜色有很多表示方法，最方便的是使用内置的颜色名称，还有就是通过 RGB 三原色表示法和 16 进制表示方法来组合颜色。

内置颜色名称

HTML 支持 140 个标准颜色名称，常见的颜色有：

RGB 颜色

RGB 三原色表示法是通过通过三个基色（红色、绿色、蓝色）按照不同的比例混合成所有的颜色。将三个基色（红色、绿色、蓝色）每种按照颜色的深浅（强度）分成 256 个等级，每个等级用 0 - 255 之间的数字表示（数字越小表示此种颜色越弱）。

RGB 颜色表示方法为: rgb(红色等级, 绿色等级, 蓝色等级)。 因此 RGB 表示法总共可以表示 256 x 256 x 256 = 16777216 种颜色，称为 1600 万色。

下面是几种常见颜色的 RGB 表示方法

• 红色: rgb(255, 0, 0)
• 绿色: rgb(0, 255, 0)
• 蓝色: rgb(0, 0, 255)
• 黄色: rgb(255, 255, 0)

可以使用下面的方法文字设置颜色：

<h1 styles="color:rgb(255, 0, 0);">我是红色的标题</h1>
<h1 styles="color:rgb(0, 255, 0);">我是绿色的标题</h1>
<h1 styles="color:rgb(0, 0, 255);">我是蓝色的标题</h1>

RGBA 值

RGBA 颜色值是对 RGB 颜色值的扩展，增加了 alpha 通道指定颜色的不透明度。

RGBA 颜色值表示方法为：

rgba(red, green, blue, alpha)

alpha 参数即是不透明度，取值为 0.0（完全透明）和 1.0（完全不透明）之间的数。

设置半透明的背景颜色

div {
  background: rgba(0, 128, 0, 0.3); /* 带有 30% 不透明度的绿色 */
}

16 进制表示法

16 进制表示法其实也是 RGB 三原色表示法的另外一种简化写法。在 RGB 三原色表示方法中，红绿蓝分别分为 256 个等级，用 0 - 255 数字表示， 0 - 255 这些数字对应的 16 进制为 00 - FF。 16 进制表示方法为 #RRGGBB，也就是两位 16 进制的红色代码，两位 16 进制的绿色代码，两位 16 进制的蓝色代码进行组合。

上述例子中的 RGB 颜色转为 16 进制如下：

<h1 styles="color:#FF0000;">我是红色的标题</h1>
<h1 styles="color:#00FF00">我是绿色的标题</h1>
<h1 styles="color:#0000FF;">我是蓝色的标题</h1>

其中 16 进制中的字母不区分大小写， #FF0000 和 #ff0000 表示的颜色值是一样的。