<named-color>

语法

color: red;
color: orange;
color: tan;
color: rebeccapurple;
color: transparent;

值

命名颜色由标准颜色、transparent 和 currentColor 关键字组成。

标准颜色

基本颜色有标准的、易于记忆的名称。

除了这 16 种颜色外，还有大约 150 种其他颜色有关联的关键字。

最初，在 CSS Level 1 中，只定义了 16 种基本颜色，orange 是在 CSS Level 2 中加入的。Web 设计师发现这个列表太短，浏览器厂商根据 X11 颜色名称添加了许多颜色名称。在 SVG 1 中，然后在 CSS 颜色 Level 3 中，这些名称得到了标准化、正式定义和统一（有些名称有不同的拼写，现在是别名）。它们被称为扩展颜色关键字、X11 颜色或 SVG 颜色。

在 CSS 颜色 Level 4 中，增加了一种颜色 rebeccapurple，以纪念网络先驱 Eric Meyer。

transparent

transparent 关键字表示一个完全透明的颜色。这使得着色项目后面的背景完全可见。技术上，transparent 是 rgb(0 0 0 / 0%) 的简写。

为防止意外行为（例如在 <gradient> 中），当前的 CSS 规范规定，transparent 应在预乘 alpha 颜色空间中计算。但是，请注意，旧版浏览器可能会将其视为 alpha 值为 0 的黑色。

在 CSS Level 2 (Revision 1) 中，transparent 关键字不是一个真正的颜色。它是一个特殊的关键字，可以在两个 CSS 属性 background 和 border 上代替常规的 <color> 值使用。它的添加主要是为了让开发者能够覆盖继承的纯色。随着 CSS 颜色 Level 3 中 alpha 通道的出现，transparent 被重新定义为一个真正的颜色。现在它可以在任何可以使用 <color> 值的地方使用。

描述

所有名称都指定了 sRGB 颜色空间中的一种颜色。虽然这些名称或多或少地描述了它们各自的颜色，但它们本质上是人为定义的，背后并没有严格的术语原理。

颜色关键字都代表纯粹的、不透明的实体颜色。

有几个关键字互为别名：

• aqua / cyan
• fuchsia / magenta
• darkgray / darkgrey
• darkslategray / darkslategrey
• dimgray / dimgrey
• lightgray / lightgrey
• lightslategray / lightslategrey
• gray / grey
• slategray / slategrey

虽然许多关键字改编自 X11，但它们的 RGB 值可能与 X11 系统上相应的颜色有所不同，因为制造商有时会根据其特定的硬件调整 X11 颜色。

示例

使用命名颜色

HTML

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>

CSS

#container {
  display: flex;
  justify-content: space-around;
  background-color: darkslateblue;
  padding: 20px;
}

#container > div {
  height: 100px;
  width: 100px;
  margin: 3px;
  border: 2px solid black;
}

#one {
  background-color: red;
}

#two {
  background-color: lavender;
}

#three {
  background-color: transparent;
}

结果

规范

浏览器兼容性

另见

• <color>：<named-color> 是其定义的一部分的数据类型。