CSS 颜色值

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

颜色关键字 color

颜色关键字 color 是不区分大小写的标识符,该标识符表示特定的颜色,例如 redgreenblueyellowblack 等。

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

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

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

透明颜色关键字

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

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

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

注意: CSS 2.1 只允许两个属性 background-colorborder-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) 。其中,每个参数(redgreenblue)定义颜色的强度,可以是整数值(从 0 到 255)或百分比值(从 0%到 100%)。

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

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

00% 代表不存在的特定颜色成分的,而值 255100%fff 表示颜色分量的全部存在。

注意: 有效范围(0-2550%-100%) 之外的值会自动剪裁或更改为落在设备支持的范围内。

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