<named-color>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CSS 数据类型 <named-color> 为颜色名——如 redblueblacklightseagreen<named-color> 在语法上为 <ident>

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

语法

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

取值

命名颜色包含标准颜色、transparentcurrentcolor 关键字。

标准颜色

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

关键字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
transparenttransparent
turquoise#40e0d0
violet#ee82ee
wheat#f5deb3
white#ffffff
whitesmoke#f5f5f5
yellow#ffff00
yellowgreen#9acd32

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

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

transparent

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

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

transparent 关键字在 CSS 第 2 级(修订 1)中并非真正的颜色,而是可在两个 CSS 属性——backgroundborder——上代替常规 <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

浏览器兼容性

参见

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