CSS 颜色值

有几种方法可以在 CSS 中定义颜色值。

颜色关键字 color

颜色关键字 color 是不区分大小写的标识符，该标识符表示特定的颜色，例如 red ， green ， blue ， yellow ， black 等。

h1 {
    color: red;
}
p {
    background-color: yellow;
}

警告： 颜色关键字的支持因浏览器而异，因此为了安全起见，最好使用十六进制或功能表示法。

查看颜色关键字的完整列表。

透明颜色关键字

transparent 关键字表示完全透明的颜色。

此关键字可以视为透明黑色的简写 rgba(0,0,0,0) ，也是其计算值。

h1 {
    color: transparent;
}
p {
    background-color: transparent;
}

注意： CSS 2.1 只允许两个属性 background-color 和 border-color 接受 transparent 关键字。但是，CSS3 扩展了颜色值以包含 transparent 关键字，以允许其与所有接受颜色值的属性一起使用。

RGB 颜色值

RGB（Red-Green-Blue）颜色模型是在 CSS 中定义颜色值的最常用方法。可以使用 RGB 模型以两种方式定义颜色：

十六进制表示法

以十六进制表示法表示的 RGB 值用一个 # 字符紧跟三个或六个十六进制字符（0-9，af）。

当使用六位数表示法（#rrggbb）时，第一对（rr）表示红色值，第二对（gg）表示绿色值，最后一对（bb）表示蓝色值。

h1 {
    color: #f80;
}
p {
    background-color: #ff8800;
}

提示： 三位十六进制表示法（#rgb）可以 #rrggbb 通过复制数字转换为六位数形式（），但不能通过添加零来转换。例如， #03f 可以扩展为 #0033ff ，但两个值表示相同的颜色。

函数表示法

函数表示法中的 RGB 值用：指定 rgb(red, green, blue) 。其中，每个参数（red ， green 和 blue）定义颜色的强度，可以是整数值（从 0 到 255）或百分比值（从 0％到 100％）。

整数值 255 对应于 100% ，和 f 或 ff 在十六进制符号：例如， rgb(0,255,255) = rgb(0%,100%,100%) = #0ff ，并且所有值代表相同的颜色是浅绿色。数值周围允许有空格。

h1 {
    color: rgb(0,255,255);
}
p {
    background-color: rgb(0%,100%,100%);
}

0 或 0% 代表不存在的特定颜色成分的，而值 255 ， 100% 和 f 或 ff 表示颜色分量的全部存在。

注意： 有效范围（0-255 或 0%-100%） 之外的值会自动剪裁或更改为落在设备支持的范围内。

查看有关 CSS3 颜色 的教程，了解新的功能符号，例如 rgba() ， hsl() 以及 hsla() 定义颜色值。