<named-color>

<命名颜色> CSS 数据类型是颜色的名称，例如 red、blue、black 或 lightseagreen。语法上，<命名颜色> 是一个 <ident>.

<命名颜色> 值可以在任何 <颜色> 可以使用的地方使用。

语法

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 Level 1 中，只定义了 16 种基本颜色，在 CSS Level 2 中添加了 orange。网页设计师发现这个列表太短了，浏览器供应商根据 X11 颜色名称添加了许多颜色的名称。在 SVG 1.0 中，然后在 CSS Colors Level 3 中，这些名称得到了标准化，正式定义，并变得统一（有些有不同的拼写，现在是别名）。它们被称为 *扩展颜色关键字*、*X11 颜色* 或 *SVG 颜色*。

在 CSS Colors Level 4 中，为了纪念网页先驱 Eric Meyer，添加了一种额外的颜色 rebeccapurple。

transparent

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

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

transparent 关键字在 CSS Level 2（修订版 1）中不是真正的颜色。它是一个特殊的关键字，可以在两个 CSS 属性上使用，而不是常规的 <color> 值：background 和 border。它本质上是添加的，允许开发人员覆盖继承的纯色。随着 CSS Colors 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

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

结果

规范

规范
CSS Color Module Level 4 # named-colors

浏览器兼容性

BCD 表格只在浏览器中加载

另请参见

<color>: 定义的 <named-color> 是其构成部分的数据类型。