CSS 数据类型 - named-color

CSS 中的数据类型 <named-color>是指一组表示特定颜色的预定义颜色关键字。这些关键字是常见颜色的直观名称，提供了一种在 CSS 代码中指定颜色的便捷方法。您可以使用这些关键字来设置颜色，而不是使用 RGB 值或十六进制代码。

<named-color> 值可以在使用 <color> 的任何位置使用。

语法


color: red;
color: orange;
color: tan;
color: currentcolor;
color: transparent;

可能的值

命名颜色包括 standard colors、transparent 和 currentcolor

CSS <named-color> - 标准颜色

常见的标准颜色与简单、易于理解和令人难忘的名称相关联。以下是基本颜色、其 RGB 十六进制值和样本的列表：

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

除了上面列出的 150 种颜色之外，实际上还有 16 多种颜色，如下所示，它们与特定关键字相关联。

关键词	RGB 十六进制值	样本
aliceblue	#f0f8ff
antiquewhite	#faebd7
aqua	#00ffff
aquamarine	#7fffd4
azure	#f0ffff
beige	#f5f5dc
bisque	#ffe4c4
black	#000000
blanchedalmond	#ffebcd
blue	#0000ff
bluevoilet	#8a2be2
brown	#a52a2a
burylwood	#deb887
cadetblue	#5f9ea0
chartreuse	#7fff00
chocolate	#d2691e
aliceblue	#f0f8ff
antiquewhite	#faebd7
aqua	#00ffff
aquamarine	#7fffd4
azure	#f0ffff
beige	#f5f5dc
bisque	#ffe4c4
black	#000000
blanchedalmond	#ffebcd
blue	#0000ff
bluevoilet	#8a2be2
brown	#a52a2a
burylwood	#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
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	#8a2be2
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
peru	#cd853f
pink	#ffc0cb
cornsilk	#dda0dd
plum	#dc143c
powderblue	#b0e0e6
purple	#800080
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	透明
turquoise	#40e0d0
violet	#ee82ee
wheat	#f5deb3
white	#ffffff
whitesmoke	#f5f5f5
yellowgreen	#9acd32

CSS <named-color> - transparent

在 CSS 中，术语 transparent 表示完全透明的颜色，并显示背景颜色。
它最初用作 rgba（0,0,0,0）的快捷方式，但使用单独的计算来防止在处理渐变时出现意外结果。在较旧的浏览器中，它可能默认为黑色，没有不透明度。
transparent 在 CSS 颜色级别 3 中被重新定义为一种有效的颜色，可用于颜色适合包含 Alpha 通道的任何场景。

许多关键字可以相互作为同义词：

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

CSS <named-colors> - 基本示例

以下示例演示了 CSS <named-color>数据类型，其网格布局是一个较大的框，其中包含较小的框，每个框都填充了不同的命名颜色。


<html>
<head>
<style>
	 	body {
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 height: 100vh;
	 	 	 margin: 20;
	 	}
	 	.large-box {
	 	 	 width: 500px;
	 	 	 height: 500px;
	 	 	 border: 3px solid black;
	 	 	 display: grid;
	 	 	 grid-template-columns: repeat(3, 1fr);
	 	 	 grid-template-rows: repeat(4, 1fr);
	 	 	 gap: 10px;
	 	 	 padding: 15px;
	 	}
	 	.small-box {
	 	 	 width: 100%;
	 	 	 height: 100%;
	 	 	 border: 3px solid black;
	 	}
	 	.crimson-demo {
	 	 	 background-color: crimson;
	 	}
	 	.dodgerblue-demo {
	 	 	 background-color: dodgerblue;
	 	}
	 	.seagreen-demo {
	 	 	 background-color: seagreen;
	 	}
	 	.gold-demo {
	 	 	 background-color: gold;
	 	}
	 	.purple-demo {
	 	 	 background-color: purple;
	 	}
	 	.orange-demo {
	 	 	 background-color: orange;
	 	}
	 	.cyan-demo {
	 	 	 background-color: cyan;
	 	}
	 	.magenta-demo {
	 	 	 background-color: magenta;
	 	}
	 	.brown-demo {
	 	 	 background-color: brown;
	 	}
	 	.pink-demo {
	 	 	 background-color: pink;
	 	}
	 	.khaki-demo {
	 	 	 background-color: khaki;
	 	}
	 	.darksalmon-demo {
	 	 	 background-color: darksalmon;
	 	}
</style>
</head>
<body>
<div class="large-box">
	 	<div class="small-box crimson-demo"></div>
	 	<div class="small-box dodgerblue-demo"></div>
	 	<div class="small-box seagreen-demo"></div>
	 	<div class="small-box gold-demo"></div>
	 	<div class="small-box purple-demo"></div>
	 	<div class="small-box orange-demo"></div>
	 	<div class="small-box cyan-demo"></div>
	 	<div class="small-box magenta-demo"></div>
	 	<div class="small-box brown-demo"></div>
	 	<div class="small-box pink-demo"></div>
	 	<div class="small-box khaki-demo"></div>
	 	<div class="small-box darksalmon-demo"></div>
</div>
</body>
</html>

本页