颜色

Color 是 CSS 里的一种数据类型。

数值颜色

十六进制颜色

十六进制（Hex）语法（最主流的颜色语法）：

h1 {
  color: #b71540;
}

#RRGGBBAA 每两位代表 red、green、blue、alpha 。

缩写语法：#a4e 等价于 #aa44ee 。

RGB（ red, green, blue ）

RGB(红, 绿, 蓝) 语法：

h1 {
  color: rgb(183, 21, 64);
}

• 黑色：rgb(0 0 0) or rgb(0%, 0%, 0%)

• 白色：rgb(255, 255, 255) or rgb(100%, 100%, 100%)

透明度可以用 / 语法，或者 rgba() 函数：

• rgb(0 0 0 / 50%) or rgb(0 0 0 / 0.5)

• rgba(0, 0, 0, 50%) or rgba(0, 0, 0, 0.5)

HSL（ hue, saturation, lightness ）

HSL(色相, 饱和度, 亮度) 语法：

h1 {
  color: hsl(344, 79%, 40%);
}

• 色相由角度表示，单位可以是 deg（默认单位，可不写），rad 等。

• 饱和度和亮度必须用百分数表示。

同样有 / 语法和 hsla() 函数。

​​由于最新的 lab() 和 lch() 函数，rgb() 和 hsl() 函数可以去掉逗号。

颜色关键词

可见 颜色关键词列表 。

​​还有一些特殊的颜色关键词：

• transparent 透明，也是 background-color 初始值。

• currentColor 是个计算值，为 color 属性值。

---

参考

Color，Learn CSS - MDN

CSS 数据类型 - MDN

颜色关键词列表 - MDN

System Colors - W3C

A Nerd’s Guide to Color on the Web，Sarah Drasner - css-tricks