<named-color>
=============

CSS 数据类型 **`<named-color>`** 为颜色名——如 `red`、`blue`、`black` 或 `lightseagreen`。`<named-color>` 在语法上为 `<ident>` (en-US)。

在可使用 `<color>` 的任意位置均可使用 `<named-color>` 值。

语法
--


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

### 取值

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

#### 标准颜色

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

| 关键字 | RGB 十六进制值 | 样例 |
| --- | --- | --- |
| `black` | `#000000` |  |
| `silver` | `#c0c0c0` |  |
| `gray` | `#808080` |  |
| `white` | `#ffffff` |  |
| `maroon` | `#800000` |  |
| `red` | `#ff0000` |  |
| `purple` | `#800080` |  |
| `fuchsia` | `#ff00ff` |  |
| `green` | `#008000` |  |
| `lime` | `#00ff00` |  |
| `olive` | `#808000` |  |
| `yellow` | `#ffff00` |  |
| `navy` | `#000080` |  |
| `blue` | `#0000ff` |  |
| `teal` | `#008080` |  |
| `aqua` | `#00ffff` |  |

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

| 关键字 | RGB 十六进制值 | 样例 |
| --- | --- | --- |
| `aliceblue` | `#f0f8ff` |  |
| `antiquewhite` | `#faebd7` |  |
| `aqua` | `#00ffff` |  |
| `aquamarine` | `#7fffd4` |  |
| `azure` | `#f0ffff` |  |
| `beige` | `#f5f5dc` |  |
| `bisque` | `#ffe4c4` |  |
| `black` | `#000000` |  |
| `blanchedalmond` | `#ffebcd` |  |
| `blue` | `#0000ff` |  |
| `blueviolet` | `#8a2be2` |  |
| `brown` | `#a52a2a` |  |
| `burlywood` | `#deb887` |  |
| `cadetblue` | `#5f9ea0` |  |
| `chartreuse` | `#7fff00` |  |
| `chocolate` | `#d2691e` |  |
| `coral` | `#ff7f50` |  |
| `cornflowerblue` | `#6495ed` |  |
| `cornsilk` | `#fff8dc` |  |
| `crimson` | `#dc143c` |  |
| `cyan` | `#00ffff`（与 `aqua` 同义） |  |
| `darkblue` | `#00008b` |  |
| `darkcyan` | `#008b8b` |  |
| `darkgoldenrod` | `#b8860b` |  |
| `darkgray` | `#a9a9a9` |  |
| `darkgreen` | `#006400` |  |
| `darkgrey` | `#a9a9a9` |  |
| `darkkhaki` | `#bdb76b` |  |
| `darkmagenta` | `#8b008b` |  |
| `darkolivegreen` | `#556b2f` |  |
| `darkorange` | `#ff8c00` |  |
| `darkorchid` | `#9932cc` |  |
| `darkred` | `#8b0000` |  |
| `darksalmon` | `#e9967a` |  |
| `darkseagreen` | `#8fbc8f` |  |
| `darkslateblue` | `#483d8b` |  |
| `darkslategray` | `#2f4f4f` |  |
| `darkslategrey` | `#2f4f4f` |  |
| `darkturquoise` | `#00ced1` |  |
| `darkviolet` | `#9400d3` |  |
| `deeppink` | `#ff1493` |  |
| `deepskyblue` | `#00bfff` |  |
| `dimgray` | `#696969` |  |
| `dimgrey` | `#696969` |  |
| `dodgerblue` | `#1e90ff` |  |
| `firebrick` | `#b22222` |  |
| `floralwhite` | `#fffaf0` |  |
| `forestgreen` | `#228b22` |  |
| `fuchsia` | `#ff00ff` |  |
| `gainsboro` | `#dcdcdc` |  |
| `ghostwhite` | `#f8f8ff` |  |
| `gold` | `#ffd700` |  |
| `goldenrod` | `#daa520` |  |
| `gray` | `#808080` |  |
| `green` | `#008000` |  |
| `greenyellow` | `#adff2f` |  |
| `grey` | `#808080`（与 `gray` 同义） |  |
| `honeydew` | `#f0fff0` |  |
| `hotpink` | `#ff69b4` |  |
| `indianred` | `#cd5c5c` |  |
| `indigo` | `#4b0082` |  |
| `ivory` | `#fffff0` |  |
| `khaki` | `#f0e68c` |  |
| `lavender` | `#e6e6fa` |  |
| `lavenderblush` | `#fff0f5` |  |
| `lawngreen` | `#7cfc00` |  |
| `lemonchiffon` | `#fffacd` |  |
| `lightblue` | `#add8e6` |  |
| `lightcoral` | `#f08080` |  |
| `lightcyan` | `#e0ffff` |  |
| `lightgoldenrodyellow` | `#fafad2` |  |
| `lightgray` | `#d3d3d3` |  |
| `lightgreen` | `#90ee90` |  |
| `lightgrey` | `#d3d3d3` |  |
| `lightpink` | `#ffb6c1` |  |
| `lightsalmon` | `#ffa07a` |  |
| `lightseagreen` | `#20b2aa` |  |
| `lightskyblue` | `#87cefa` |  |
| `lightslategray` | `#778899` |  |
| `lightslategrey` | `#778899` |  |
| `lightsteelblue` | `#b0c4de` |  |
| `lightyellow` | `#ffffe0` |  |
| `lime` | `#00ff00` |  |
| `limegreen` | `#32cd32` |  |
| `linen` | `#faf0e6` |  |
| `magenta` | `#ff00ff`（与 `fuchsia` 同义） |  |
| `maroon` | `#800000` |  |
| `mediumaquamarine` | `#66cdaa` |  |
| `mediumblue` | `#0000cd` |  |
| `mediumorchid` | `#ba55d3` |  |
| `mediumpurple` | `#9370db` |  |
| `mediumseagreen` | `#3cb371` |  |
| `mediumslateblue` | `#7b68ee` |  |
| `mediumspringgreen` | `#00fa9a` |  |
| `mediumturquoise` | `#48d1cc` |  |
| `mediumvioletred` | `#c71585` |  |
| `midnightblue` | `#191970` |  |
| `mintcream` | `#f5fffa` |  |
| `mistyrose` | `#ffe4e1` |  |
| `moccasin` | `#ffe4b5` |  |
| `navajowhite` | `#ffdead` |  |
| `navy` | `#000080` |  |
| `oldlace` | `#fdf5e6` |  |
| `olive` | `#808000` |  |
| `olivedrab` | `#6b8e23` |  |
| `orange` | `#ffa500` |  |
| `orangered` | `#ff4500` |  |
| `orchid` | `#da70d6` |  |
| `palegoldenrod` | `#eee8aa` |  |
| `palegreen` | `#98fb98` |  |
| `paleturquoise` | `#afeeee` |  |
| `palevioletred` | `#db7093` |  |
| `papayawhip` | `#ffefd5` |  |
| `peachpuff` | `#ffdab9` |  |
| `peru` | `#cd853f` |  |
| `pink` | `#ffc0cb` |  |
| `plum` | `#dda0dd` |  |
| `powderblue` | `#b0e0e6` |  |
| `purple` | `#800080` |  |
| `rebeccapurple` | `#663399` |  |
| `red` | `#ff0000` |  |
| `rosybrown` | `#bc8f8f` |  |
| `royalblue` | `#4169e1` |  |
| `saddlebrown` | `#8b4513` |  |
| `salmon` | `#fa8072` |  |
| `sandybrown` | `#f4a460` |  |
| `seagreen` | `#2e8b57` |  |
| `seashell` | `#fff5ee` |  |
| `sienna` | `#a0522d` |  |
| `silver` | `#c0c0c0` |  |
| `skyblue` | `#87ceeb` |  |
| `slateblue` | `#6a5acd` |  |
| `slategray` | `#708090` |  |
| `slategrey` | `#708090` |  |
| `snow` | `#fffafa` |  |
| `springgreen` | `#00ff7f` |  |
| `steelblue` | `#4682b4` |  |
| `tan` | `#d2b48c` |  |
| `teal` | `#008080` |  |
| `thistle` | `#d8bfd8` |  |
| `tomato` | `#ff6347` |  |
| `transparent` | 见 transparent。 |  |
| `turquoise` | `#40e0d0` |  |
| `violet` | `#ee82ee` |  |
| `wheat` | `#f5deb3` |  |
| `white` | `#ffffff` |  |
| `whitesmoke` | `#f5f5f5` |  |
| `yellow` | `#ffff00` |  |
| `yellowgreen` | `#9acd32` |  |
|

起初在 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


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


#### CSS


```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;
}
```


#### 结果

规范
--

| Specification |
| --- |
| CSS Color Module Level 4 # named-colors |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `<color>`——`<named-color>` 为此数据类型定义的构成部分