CSS 颜色
最后一次修改 2017年08月04日
CSS 颜色
使用CSS时，您可以指定不同方式范围内的颜色。
我们可以使用预定义的颜色名称。或者我们可以为每个红色，绿色和蓝色组件使用十进制或十六进制值。
十进制值由逗号分隔，十六进制值为通常以＃为前缀，如 #ffffff ，表示白色。
下表具有一些预定义的颜色名称及其十进制和十六进制等效值。
| 颜色名称 | 十六进制 | 十进制 |
|---|---|---|
| black | #000000 | 0,0,0 |
| green | #008000 | 0,128,0 |
| silver | #C0C0C0 | 192,192,192 |
| lime | #00FF00 | 0,255,0 |
| gray | #808080 | 128,128,128 |
| olive | #808000 | 128,128,0 |
| white | #FFFFFF | 255,255,255 |
| yellow | #FFFF00 | 255,255,0 |
| maroon | #800000 | 128,0,0 |
| navy | #000080 | 0,0,128 |
| red | #FF0000 | 255,0,0 |
| blue | #0000FF | 0,0,255 |
| purple | #800080 | 128,0,128 |
| teal | #008080 | 0,128,128 |
| aqua | #00FFFF | 0,255,255 |
这些被称为基本颜色名称。
下表显示了可以使用的扩展灰度阴影。
| 颜色名称 | 十六进制 | 十进制 |
|---|---|---|
| darkgray | #a9a9a9 | 169,169,169 |
| darkslategray | #2f4f4f | 47,79,79 |
| dimgray | #696969 | 105,105,105 |
| gray | #808080 | 128,128,128 |
| lightgray | #d3d3d3 | 211,211,211 |
| lightslategray | #778899 | 119,136,153 |
| slategray | #708090 | 112,128,144 |
RGB值简写
对红色，绿色和蓝色分量使用十六进制值。每对都是十六进制符号，范围为00 - FF。
十六进制值通常以＃作为前缀，如#ffffff，表示白色。 “纯”蓝色将被写入＃0000FF，“纯”红色被写入＃FF0000。
#RGB 是上述六位数符号的较短形式。在此格式中，每个数字都被复制以获得等效的六位数值，例如＃F7C变为＃FF77CC。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-color: yellow;
}
div#one {
width: 50px;
height: 50px;
border: 1px solid rgb(128, 128, 128);
margin: 5px;
float: left;
background-color: #000;
}
</style>
</head>
<body>
<div id="one"></div>
</body>
</html>
颜色函数
颜色名称和简单的十六进制值不是您可以指定颜色的唯一方法。
有许多函数允许您选择颜色。
rgb（r，g，b）使用RGB模型指定颜色。
示例：rgb（112，128，144）rgba（r，g，b，a）使用RGB模型指定颜色，添加了alpha值以指定不透明度。 值为0是完全透明的; 值为1是完全不透明的。
示例：rgba（112，128，144，0.4）hsl（h，s，l）使用色相，饱和度和亮度（HSL）模型指定颜色。
示例：hsl（120,100％，22％）hsla（h，s，l，a）使用alpha值来指定不透明度。
示例：hsla（120,100％，22％，0.4）
rgb(rrr.rr％，ggg.gg％，bbb.bb％)使用0％到100％范围内的RGB值，允许十进制值（例如75.5％）。因此，黑色的值将是rgb（0％，0％，0％），而蓝色将是rgb（0％，0％，100％）。
在 rgb(rrr，ggg，bbb)中，接受的值范围是0-255。范围是十六进制的00-FF的十进制等效值。在此格式中，绿色将为rgb（0,255,0），白色将表示为rgb（255,255,255）。
下表列出了颜色名称，十六进制颜色值和rgb颜色值。
| 颜色 | HEXCOLOR | RGB颜色 |
|---|---|---|
| Black | #000000 | rgb(0,0,0) |
| Red | #FF0000 | rgb(255,0,0) |
| Green | #00FF00 | rgb(0,255,0) |
| Blue | #0000FF | rgb(0,0,255) |
| Yellow | #FFFF00 | rgb(255,255,0) |
| Cyan | #00FFFF | rgb(0,255,255) |
| Magenta | #FF00FF | rgb(255,0,255) |
| Gray | #C0C0C0 | rgb(192,192,192) |
| White | #FFFFFF | rgb(255,255,255) |
以下代码显示如何使用色彩函数。
<!DOCTYPE HTML> <html> <body> <p style="background-color:#C0C0C0"> Color set by using hex value </p> <p style="background-color:rgb(192,192,192)"> Color set by using rgb value </p> <p style="background-color:gray"> Color set by using color name </p> </body> </html>
在上面的代码中，我们使用各种形式的颜色值来设置段落的背景颜色。
CSS3中的扩展颜色关键字
| 颜色 | 名称 | 十六进制 | RGB |
|---|---|---|---|
| aliceblue | #f0f8ff | 240，248，255 | |
| antiquewhite | #faebd7 | 250，235，215 | |
| aqua | #00ffff | 0，255，255 | |
| aquamarine | #7fffd4 | 127，255，212 | |
| azure | #f0ffff | 240，255，255 | |
| beige | #f5f5dc | 245，245，220 | |
| bisque | #ffe4c4 | 255，228，196 | |
| black | #000000 | 0，0，0 | |
| blanchedalmond | #ffebcd | 255，235，205 | |
| blue | #0000ff | 0，0，255 | |
| blueviolet | #8a2be2 | 138，43，226 | |
| brown | #a52a2a | 165，42，42 | |
| burlywood | #deb887 | 222，184，135 | |
| cadetblue | #5f9ea0 | 95，158，160 | |
| chartreuse | #7fff00 | 127，255，0 | |
| chocolate | #d2691e | 210，105，30 | |
| coral | #ff7f50 | 255，127，80 | |
| cornflowerblue | #6495ed | 100，149，237 | |
| cornsilk | #fff8dc | 255，248，220 | |
| crimson | #dc143c | 220，20，60 | |
| cyan | #00ffff | 0，255，255 | |
| darkblue | #00008b | 0，0，139 | |
| darkcyan | #008b8b | 0，139，139 | |
| darkgoldenrod | #b8860b | 184，134，11 | |
| darkgray | #a9a9a9 | 169，169，169 | |
| darkgreen | #006400 | 0，100，0 | |
| darkgrey | #a9a9a9 | 169，169，169 | |
| darkkhaki | #bdb76b | 189，183，107 | |
| darkmagenta | #8b008b | 139，0，139 | |
| darkolivegreen | #556b2f | 85，107，47 | |
| darkorange | #ff8c00 | 255，140，0 | |
| darkorchid | #9932cc | 153，50，204 | |
| darkred | #8b0000 | 139，0，0 | |
| darksalmon | #e9967a | 233，150，122 | |
| darkseagreen | #8fbc8f | 143，188，143 | |
| darkslateblue | #483d8b | 72，61，139 | |
| darkslategray | #2f4f4f | 47，79，79 | |
| darkslategrey | #2f4f4f | 47，79，79 | |
| darkturquoise | #00ced1 | 0，206，209 | |
| darkviolet | #9400d3 | 148，0，211 | |
| deeppink | #ff1493 | 255，20，147 | |
| deepskyblue | #00bfff | 0，191，255 | |
| dimgray | #696969 | 105，105，105 | |
| dimgrey | #696969 | 105，105，105 | |
| dodgerblue | #1e90ff | 30，144，255 | |
| firebrick | #b22222 | 178，34，34 | |
| floralwhite | #fffaf0 | 255，250，240 | |
| forestgreen | #228b22 | 34，139，34 | |
| fuchsia | #ff00ff | 255，0，255 | |
| gainsboro | #dcdcdc | 220，220，220 | |
| ghostwhite | #f8f8ff | 248，248，255 | |
| gold | #ffd700 | 255，215，0 | |
| goldenrod | #daa520 | 218，165，32 | |
| gray | #808080 | 128，128，128 | |
| green | #008000 | 0，128，0 | |
| greenyellow | #adff2f | 173，255，47 | |
| grey | #808080 | 128，128，128 | |
| honeydew | #f0fff0 | 240，255，240 | |
| hotpink | #ff69b4 | 255，105，180 | |
| indianred | #cd5c5c | 205，92，92 | |
| indigo | #4b0082 | 75，0，130 | |
| ivory | #fffff0 | 255，255，240 | |
| khaki | #f0e68c | 240，230，140 | |
| lavender | #e6e6fa | 230，230，250 | |
| lavenderblush | #fff0f5 | 255，240，245 | |
| lawngreen | #7cfc00 | 124，252，0 | |
| lemonchiffon | #fffacd | 255，250，205 | |
| lightblue | #add8e6 | 173，216，230 | |
| lightcoral | #f08080 | 240，128，128 | |
| lightcyan | #e0ffff | 224，255，255 | |
| lightgoldenrodyellow | #fafad2 | 250，250，210 | |
| lightgray | #d3d3d3 | 211，211，211 | |
| lightgreen | #90ee90 | 144，238，144 | |
| lightgrey | #d3d3d3 | 211，211，211 | |
| lightpink | #ffb6c1 | 255，182，193 | |
| lightsalmon | #ffa07a | 255，160，122 | |
| lightseagreen | #20b2aa | 32，178，170 | |
| lightskyblue | #87cefa | 135，206，250 | |
| lightslategray | #778899 | 119，136，153 | |
| lightslategrey | #778899 | 119，136，153 | |
| lightsteelblue | #b0c4de | 176，196，222 | |
| lightyellow | #ffffe0 | 255，255，224 | |
| lime | #00ff00 | 0，255，0 | |
| limegreen | #32cd32 | 50，205，50 | |
| linen | #faf0e6 | 250，240，230 | |
| magenta | #ff00ff | 255，0，255 | |
| maroon | #800000 | 128，0，0 | |
| mediumaquamarine | #66cdaa | 102，205，170 | |
| mediumblue | #0000cd | 0，0，205 | |
| mediumorchid | #ba55d3 | 186，85，211 | |
| mediumpurple | #9370db | 147，112，219 | |
| mediumseagreen | #3cb371 | 60，179，113 | |
| mediumslateblue | #7b68ee | 123，104，238 | |
| mediumspringgreen | #00fa9a | 0，250，154 | |
| mediumturquoise | #48d1cc | 72，209，204 | |
| mediumvioletred | #c71585 | 199，21，133 | |
| midnightblue | #191970 | 25，25，112 | |
| mintcream | #f5fffa | 245，255，250 | |
| mistyrose | #ffe4e1 | 255，228，225 | |
| moccasin | #ffe4b5 | 255，228，181 | |
| navajowhite | #ffdead | 255，222，173 | |
| navy | #000080 | 0，0，128 | |
| oldlace | #fdf5e6 | 253，245，230 | |
| olive | #808000 | 128，128，0 | |
| olivedrab | #6b8e23 | 107，142，35 | |
| orange | #ffa500 | 255，165，0 | |
| orangered | #ff4500 | 255，69，0 | |
| orchid | #da70d6 | 218，112，214 | |
| palegoldenrod | #eee8aa | 238，232，170 | |
| palegreen | #98fb98 | 152，251，152 | |
| paleturquoise | #afeeee | 175，238，238 | |
| palevioletred | #db7093 | 219，112，147 | |
| papayawhip | #ffefd5 | 255，239，213 | |
| peachpuff | #ffdab9 | 255，218，185 | |
| peru | #cd853f | 205，133，63 | |
| pink | #ffc0cb | 255，192，203 | |
| plum | #dda0dd | 221，160，221 | |
| powderblue | #b0e0e6 | 176，224，230 | |
| purple | #800080 | 128，0，128 | |
| red | #ff0000 | 255，0，0 | |
| rosybrown | #bc8f8f | 188，143，143 | |
| royalblue | #4169e1 | 65，105，225 | |
| saddlebrown | #8b4513 | 139，69，19 | |
| salmon | #fa8072 | 250，128，114 | |
| sandybrown | #f4a460 | 244，164，96 | |
| seagreen | #2e8b57 | 46，139，87 | |
| seashell | #fff5ee | 255，245，238 | |
| sienna | #a0522d | 160，82，45 | |
| silver | #c0c0c0 | 192，192，192 | |
| skyblue | #87ceeb | 135，206，235 | |
| slateblue | #6a5acd | 106，90，205 | |
| slategray | #708090 | 112，128，144 | |
| slategrey | #708090 | 112，128，144 | |
| snow | #fffafa | 255，250，250 | |
| springgreen | #00ff7f | 0，255，127 | |
| steelblue | #4682b4 | 70，130，180 | |
| tan | #d2b48c | 210，180，140 | |
| teal | #008080 | 0，128，128 | |
| thistle | #d8bfd8 | 216，191，216 | |
| tomato | #ff6347 | 255，99，71 | |
| turquoise | #40e0d0 | 64，224，208 | |
| violet | #ee82ee | 238，130，238 | |
| wheat | #f5deb3 | 245，222，179 | |
| white | #ffffff | 255，255，255 | |
| whitesmoke | #f5f5f5 | 245，245，245 | |
| yellow | #ffff00 | 255，255，0 | |
| yellowgreen | #9acd32 | 154，205，50 |
例子
以下代码显示如何使用颜色名称及其相应的RGB值和十六进制等效值。
<!DOCTYPE HTML>
<html>
<head>
<title>Named colors in CSS</title>
<style type="text/css">
table {
border-spacing: 2em 1em;
margin:25px auto;
}
caption {
font-family:Tahoma, Geneva, sans-serif;
font-weight:bold;
font-size:20px;
}
td {
border: #000 solid 1px;
text-align:center;
padding:10px;
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
font-weight:bold;
color:#FFF;
width:7em;
white-space: pre;
}
#aqua {
background-color:aqua;
}
#black {
background-color:black;
}
#blue {
background-color:blue;
}
#fuchsia {
background-color:fuchsia;
}
#gray {
background-color:gray;
}
#green {
background-color:green;
}
#lime {
background-color:lime;
}
#maroon {
background-color:maroon;
}
#navy {
background-color:navy;
}
#olive {
background-color:olive;
}
#purple {
background-color:purple;
}
#red {
background-color:red;
}
#silver {
background-color:silver;
}
#teal {
background-color:teal;
}
#white {
background-color:white;
}
#yellow {
background-color:yellow;
}
#aqua, #fuchsia, #lime, #red, #silver, #white, #yellow {
color:black;
}
</style>
</head>
<body>
<table>
<caption>
Basic Color Keywords
</caption>
<tr>
<td id="aqua">aqua
#00FFFF
0, 255, 255</td>
<td id="black">black
#000000
0, 0, 0</td>
<td id="blue">blue
#0000FF
0, 0, 255</td>
<td id="fuchsia">fuchsia
#FF00FF
255, 0, 255</td>
</tr>
<tr>
<td id="gray">gray
#808080
128, 128, 128</td>
<td id="green">green
#008000
0, 128, 0</td>
<td id="lime">lime
#00FF00
0, 255, 0</td>
<td id="maroon">maroon
#800000
128, 0, 0</td>
</tr>
<tr>
<td id="navy">navy
#000080
0, 0, 128</td>
<td id="olive">olive
#808000
128, 128, 0</td>
<td id="purple">purple
#800080
128, 0, 128</td>
<td id="red">red
#FF0000
255, 0, 0</td>
</tr>
<tr>
<td id="silver">silver
#C0C0C0
192, 192, 192</td>
<td id="teal">teal
#008080
0, 128, 128</td>
<td id="white">white
#FFFFFF
255, 255, 255</td>
<td id="yellow">yellow
#FFFF00
255, 255, 0</td>
</tr>
</table>
</body>
</html>
上面的代码呈现如下：
CSS 颜色
使用CSS时，您可以指定不同方式范围内的颜色。
我们可以使用预定义的颜色名称。或者我们可以为每个红色，绿色和蓝色组件使用十进制或十六进制值。
十进制值由逗号分隔，十六进制值为通常以＃为前缀，如 #ffffff ，表示白色。
下表具有一些预定义的颜色名称及其十进制和十六进制等效值。
| 颜色名称 | 十六进制 | 十进制 |
|---|---|---|
| black | #000000 | 0,0,0 |
| green | #008000 | 0,128,0 |
| silver | #C0C0C0 | 192,192,192 |
| lime | #00FF00 | 0,255,0 |
| gray | #808080 | 128,128,128 |
| olive | #808000 | 128,128,0 |
| white | #FFFFFF | 255,255,255 |
| yellow | #FFFF00 | 255,255,0 |
| maroon | #800000 | 128,0,0 |
| navy | #000080 | 0,0,128 |
| red | #FF0000 | 255,0,0 |
| blue | #0000FF | 0,0,255 |
| purple | #800080 | 128,0,128 |
| teal | #008080 | 0,128,128 |
| aqua | #00FFFF | 0,255,255 |
这些被称为基本颜色名称。
下表显示了可以使用的扩展灰度阴影。
| 颜色名称 | 十六进制 | 十进制 |
|---|---|---|
| darkgray | #a9a9a9 | 169,169,169 |
| darkslategray | #2f4f4f | 47,79,79 |
| dimgray | #696969 | 105,105,105 |
| gray | #808080 | 128,128,128 |
| lightgray | #d3d3d3 | 211,211,211 |
| lightslategray | #778899 | 119,136,153 |
| slategray | #708090 | 112,128,144 |
RGB值简写
对红色，绿色和蓝色分量使用十六进制值。每对都是十六进制符号，范围为00 - FF。
十六进制值通常以＃作为前缀，如#ffffff，表示白色。 “纯”蓝色将被写入＃0000FF，“纯”红色被写入＃FF0000。
#RGB 是上述六位数符号的较短形式。在此格式中，每个数字都被复制以获得等效的六位数值，例如＃F7C变为＃FF77CC。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-color: yellow;
}
div#one {
width: 50px;
height: 50px;
border: 1px solid rgb(128, 128, 128);
margin: 5px;
float: left;
background-color: #000;
}
</style>
</head>
<body>
<div id="one"></div>
</body>
</html>
颜色函数
颜色名称和简单的十六进制值不是您可以指定颜色的唯一方法。
有许多函数允许您选择颜色。
rgb（r，g，b）使用RGB模型指定颜色。
示例：rgb（112，128，144）rgba（r，g，b，a）使用RGB模型指定颜色，添加了alpha值以指定不透明度。 值为0是完全透明的; 值为1是完全不透明的。
示例：rgba（112，128，144，0.4）hsl（h，s，l）使用色相，饱和度和亮度（HSL）模型指定颜色。
示例：hsl（120,100％，22％）hsla（h，s，l，a）使用alpha值来指定不透明度。
示例：hsla（120,100％，22％，0.4）
rgb(rrr.rr％，ggg.gg％，bbb.bb％)使用0％到100％范围内的RGB值，允许十进制值（例如75.5％）。因此，黑色的值将是rgb（0％，0％，0％），而蓝色将是rgb（0％，0％，100％）。
在 rgb(rrr，ggg，bbb)中，接受的值范围是0-255。范围是十六进制的00-FF的十进制等效值。在此格式中，绿色将为rgb（0,255,0），白色将表示为rgb（255,255,255）。
下表列出了颜色名称，十六进制颜色值和rgb颜色值。
| 颜色 | HEXCOLOR | RGB颜色 |
|---|---|---|
| Black | #000000 | rgb(0,0,0) |
| Red | #FF0000 | rgb(255,0,0) |
| Green | #00FF00 | rgb(0,255,0) |
| Blue | #0000FF | rgb(0,0,255) |
| Yellow | #FFFF00 | rgb(255,255,0) |
| Cyan | #00FFFF | rgb(0,255,255) |
| Magenta | #FF00FF | rgb(255,0,255) |
| Gray | #C0C0C0 | rgb(192,192,192) |
| White | #FFFFFF | rgb(255,255,255) |
以下代码显示如何使用色彩函数。
<!DOCTYPE HTML> <html> <body> <p style="background-color:#C0C0C0"> Color set by using hex value </p> <p style="background-color:rgb(192,192,192)"> Color set by using rgb value </p> <p style="background-color:gray"> Color set by using color name </p> </body> </html>
在上面的代码中，我们使用各种形式的颜色值来设置段落的背景颜色。
CSS3中的扩展颜色关键字
| 颜色 | 名称 | 十六进制 | RGB |
|---|---|---|---|
| aliceblue | #f0f8ff | 240，248，255 | |
| antiquewhite | #faebd7 | 250，235，215 | |
| aqua | #00ffff | 0，255，255 | |
| aquamarine | #7fffd4 | 127，255，212 | |
| azure | #f0ffff | 240，255，255 | |
| beige | #f5f5dc | 245，245，220 | |
| bisque | #ffe4c4 | 255，228，196 | |
| black | #000000 | 0，0，0 | |
| blanchedalmond | #ffebcd | 255，235，205 | |
| blue | #0000ff | 0，0，255 | |
| blueviolet | #8a2be2 | 138，43，226 | |
| brown | #a52a2a | 165，42，42 | |
| burlywood | #deb887 | 222，184，135 | |
| cadetblue | #5f9ea0 | 95，158，160 | |
| chartreuse | #7fff00 | 127，255，0 | |
| chocolate | #d2691e | 210，105，30 | |
| coral | #ff7f50 | 255，127，80 | |
| cornflowerblue | #6495ed | 100，149，237 | |
| cornsilk | #fff8dc | 255，248，220 | |
| crimson | #dc143c | 220，20，60 | |
| cyan | #00ffff | 0，255，255 | |
| darkblue | #00008b | 0，0，139 | |
| darkcyan | #008b8b | 0，139，139 | |
| darkgoldenrod | #b8860b | 184，134，11 | |
| darkgray | #a9a9a9 | 169，169，169 | |
| darkgreen | #006400 | 0，100，0 | |
| darkgrey | #a9a9a9 | 169，169，169 | |
| darkkhaki | #bdb76b | 189，183，107 | |
| darkmagenta | #8b008b | 139，0，139 | |
| darkolivegreen | #556b2f | 85，107，47 | |
| darkorange | #ff8c00 | 255，140，0 | |
| darkorchid | #9932cc | 153，50，204 | |
| darkred | #8b0000 | 139，0，0 | |
| darksalmon | #e9967a | 233，150，122 | |
| darkseagreen | #8fbc8f | 143，188，143 | |
| darkslateblue | #483d8b | 72，61，139 | |
| darkslategray | #2f4f4f | 47，79，79 | |
| darkslategrey | #2f4f4f | 47，79，79 | |
| darkturquoise | #00ced1 | 0，206，209 | |
| darkviolet | #9400d3 | 148，0，211 | |
| deeppink | #ff1493 | 255，20，147 | |
| deepskyblue | #00bfff | 0，191，255 | |
| dimgray | #696969 | 105，105，105 | |
| dimgrey | #696969 | 105，105，105 | |
| dodgerblue | #1e90ff | 30，144，255 | |
| firebrick | #b22222 | 178，34，34 | |
| floralwhite | #fffaf0 | 255，250，240 | |
| forestgreen | #228b22 | 34，139，34 | |
| fuchsia | #ff00ff | 255，0，255 | |
| gainsboro | #dcdcdc | 220，220，220 | |
| ghostwhite | #f8f8ff | 248，248，255 | |
| gold | #ffd700 | 255，215，0 | |
| goldenrod | #daa520 | 218，165，32 | |
| gray | #808080 | 128，128，128 | |
| green | #008000 | 0，128，0 | |
| greenyellow | #adff2f | 173，255，47 | |
| grey | #808080 | 128，128，128 | |
| honeydew | #f0fff0 | 240，255，240 | |
| hotpink | #ff69b4 | 255，105，180 | |
| indianred | #cd5c5c | 205，92，92 | |
| indigo | #4b0082 | 75，0，130 | |
| ivory | #fffff0 | 255，255，240 | |
| khaki | #f0e68c | 240，230，140 | |
| lavender | #e6e6fa | 230，230，250 | |
| lavenderblush | #fff0f5 | 255，240，245 | |
| lawngreen | #7cfc00 | 124，252，0 | |
| lemonchiffon | #fffacd | 255，250，205 | |
| lightblue | #add8e6 | 173，216，230 | |
| lightcoral | #f08080 | 240，128，128 | |
| lightcyan | #e0ffff | 224，255，255 | |
| lightgoldenrodyellow | #fafad2 | 250，250，210 | |
| lightgray | #d3d3d3 | 211，211，211 | |
| lightgreen | #90ee90 | 144，238，144 | |
| lightgrey | #d3d3d3 | 211，211，211 | |
| lightpink | #ffb6c1 | 255，182，193 | |
| lightsalmon | #ffa07a | 255，160，122 | |
| lightseagreen | #20b2aa | 32，178，170 | |
| lightskyblue | #87cefa | 135，206，250 | |
| lightslategray | #778899 | 119，136，153 | |
| lightslategrey | #778899 | 119，136，153 | |
| lightsteelblue | #b0c4de | 176，196，222 | |
| lightyellow | #ffffe0 | 255，255，224 | |
| lime | #00ff00 | 0，255，0 | |
| limegreen | #32cd32 | 50，205，50 | |
| linen | #faf0e6 | 250，240，230 | |
| magenta | #ff00ff | 255，0，255 | |
| maroon | #800000 | 128，0，0 | |
| mediumaquamarine | #66cdaa | 102，205，170 | |
| mediumblue | #0000cd | 0，0，205 | |
| mediumorchid | #ba55d3 | 186，85，211 | |
| mediumpurple | #9370db | 147，112，219 | |
| mediumseagreen | #3cb371 | 60，179，113 | |
| mediumslateblue | #7b68ee | 123，104，238 | |
| mediumspringgreen | #00fa9a | 0，250，154 | |
| mediumturquoise | #48d1cc | 72，209，204 | |
| mediumvioletred | #c71585 | 199，21，133 | |
| midnightblue | #191970 | 25，25，112 | |
| mintcream | #f5fffa | 245，255，250 | |
| mistyrose | #ffe4e1 | 255，228，225 | |
| moccasin | #ffe4b5 | 255，228，181 | |
| navajowhite | #ffdead | 255，222，173 | |
| navy | #000080 | 0，0，128 | |
| oldlace | #fdf5e6 | 253，245，230 | |
| olive | #808000 | 128，128，0 | |
| olivedrab | #6b8e23 | 107，142，35 | |
| orange | #ffa500 | 255，165，0 | |
| orangered | #ff4500 | 255，69，0 | |
| orchid | #da70d6 | 218，112，214 | |
| palegoldenrod | #eee8aa | 238，232，170 | |
| palegreen | #98fb98 | 152，251，152 | |
| paleturquoise | #afeeee | 175，238，238 | |
| palevioletred | #db7093 | 219，112，147 | |
| papayawhip | #ffefd5 | 255，239，213 | |
| peachpuff | #ffdab9 | 255，218，185 | |
| peru | #cd853f | 205，133，63 | |
| pink | #ffc0cb | 255，192，203 | |
| plum | #dda0dd | 221，160，221 | |
| powderblue | #b0e0e6 | 176，224，230 | |
| purple | #800080 | 128，0，128 | |
| red | #ff0000 | 255，0，0 | |
| rosybrown | #bc8f8f | 188，143，143 | |
| royalblue | #4169e1 | 65，105，225 | |
| saddlebrown | #8b4513 | 139，69，19 | |
| salmon | #fa8072 | 250，128，114 | |
| sandybrown | #f4a460 | 244，164，96 | |
| seagreen | #2e8b57 | 46，139，87 | |
| seashell | #fff5ee | 255，245，238 | |
| sienna | #a0522d | 160，82，45 | |
| silver | #c0c0c0 | 192，192，192 | |
| skyblue | #87ceeb | 135，206，235 | |
| slateblue | #6a5acd | 106，90，205 | |
| slategray | #708090 | 112，128，144 | |
| slategrey | #708090 | 112，128，144 | |
| snow | #fffafa | 255，250，250 | |
| springgreen | #00ff7f | 0，255，127 | |
| steelblue | #4682b4 | 70，130，180 | |
| tan | #d2b48c | 210，180，140 | |
| teal | #008080 | 0，128，128 | |
| thistle | #d8bfd8 | 216，191，216 | |
| tomato | #ff6347 | 255，99，71 | |
| turquoise | #40e0d0 | 64，224，208 | |
| violet | #ee82ee | 238，130，238 | |
| wheat | #f5deb3 | 245，222，179 | |
| white | #ffffff | 255，255，255 | |
| whitesmoke | #f5f5f5 | 245，245，245 | |
| yellow | #ffff00 | 255，255，0 | |
| yellowgreen | #9acd32 | 154，205，50 |
例子
以下代码显示如何使用颜色名称及其相应的RGB值和十六进制等效值。
<!DOCTYPE HTML>
<html>
<head>
<title>Named colors in CSS</title>
<style type="text/css">
table {
border-spacing: 2em 1em;
margin:25px auto;
}
caption {
font-family:Tahoma, Geneva, sans-serif;
font-weight:bold;
font-size:20px;
}
td {
border: #000 solid 1px;
text-align:center;
padding:10px;
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
font-weight:bold;
color:#FFF;
width:7em;
white-space: pre;
}
#aqua {
background-color:aqua;
}
#black {
background-color:black;
}
#blue {
background-color:blue;
}
#fuchsia {
background-color:fuchsia;
}
#gray {
background-color:gray;
}
#green {
background-color:green;
}
#lime {
background-color:lime;
}
#maroon {
background-color:maroon;
}
#navy {
background-color:navy;
}
#olive {
background-color:olive;
}
#purple {
background-color:purple;
}
#red {
background-color:red;
}
#silver {
background-color:silver;
}
#teal {
background-color:teal;
}
#white {
background-color:white;
}
#yellow {
background-color:yellow;
}
#aqua, #fuchsia, #lime, #red, #silver, #white, #yellow {
color:black;
}
</style>
</head>
<body>
<table>
<caption>
Basic Color Keywords
</caption>
<tr>
<td id="aqua">aqua
#00FFFF
0, 255, 255</td>
<td id="black">black
#000000
0, 0, 0</td>
<td id="blue">blue
#0000FF
0, 0, 255</td>
<td id="fuchsia">fuchsia
#FF00FF
255, 0, 255</td>
</tr>
<tr>
<td id="gray">gray
#808080
128, 128, 128</td>
<td id="green">green
#008000
0, 128, 0</td>
<td id="lime">lime
#00FF00
0, 255, 0</td>
<td id="maroon">maroon
#800000
128, 0, 0</td>
</tr>
<tr>
<td id="navy">navy
#000080
0, 0, 128</td>
<td id="olive">olive
#808000
128, 128, 0</td>
<td id="purple">purple
#800080
128, 0, 128</td>
<td id="red">red
#FF0000
255, 0, 0</td>
</tr>
<tr>
<td id="silver">silver
#C0C0C0
192, 192, 192</td>
<td id="teal">teal
#008080
0, 128, 128</td>
<td id="white">white
#FFFFFF
255, 255, 255</td>
<td id="yellow">yellow
#FFFF00
255, 255, 0</td>
</tr>
</table>
</body>
</html>
上面的代码呈现如下：
← 没有了