CSS 颜色值

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

颜色关键字

颜色关键字是表示特定颜色的不区分大小写的标识符，例如 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（红-绿-蓝）颜色模型是在 CSS 中定义颜色值的最常用方法。可以通过两种方式使用 RGB 模型定义颜色：

十六进制表示法的 RGB 值由 # 字符指定，后跟三个或六个十六进制字符（0-9，a-f）。

当使用六位符号 (#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，所有值都表示同一种颜色，即aqua。数值周围允许有空格。

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()。