<named-color>

语法

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

取值

命名颜色包含标准颜色、transparent 和 currentcolor 关键字。

标准颜色

基本颜色具有标准、易记的名字：

除上述 16 种颜色外，另外约有 150 种颜色有与之关联的关键字：

起初在 CSS 第 1 级中仅定义了 16 种基本颜色，在 CSS 第 2 级中添加了 orange。Web 设计师认为这些颜色太少，于是浏览器厂商根据 X11 颜色名为颜色添加了大量名字。这些名字先后在 SVG 1.0 和 CSS 颜色第 3 级中获得标准化、正式定义和一致性（某些名字的不同拼写现为别名）。这些名字称为扩展性颜色关键字、X11 颜色或 SVG 颜色。

为纪念 web 先驱 Eric Meyer，在 CSS 颜色第 4 级中添加了又一种颜色 rebeccapurple。

transparent

transparent 关键字表示完全透明的颜色。此颜色的元素后的背景完全可见。技术上，transparent 为 rgba(0,0,0,0) 的缩写。

为防止意外行为（如在 <gradient> 中），目前的 CSS 规范称应在预乘 alpha 颜色空间中计算 transparent。然而注意旧浏览器可能将其视为 alpha 值为 0 的黑色。

transparent 关键字在 CSS 第 2 级（修订 1）中并非真正的颜色，而是可在两个 CSS 属性——background 和 border——上代替常规 <color> 值使用的特殊关键字。添加此关键字主要是为了允许开发者覆盖继承的纯色。随着 alpha 通道在 CSS 颜色第 3 级中的到来，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> 为此数据类型定义的构成部分