HTML 支持 140 个颜色名称，这些名称可以直接用于指定元素的颜色。以下是一些常见的颜色名称及其示例：
常见颜色名称
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML 颜色名称示例</title>
</head>
<body>
<h2>HTML 颜色名称示例</h2>
<p style="color: Black;">Black</p>
<p style="color: White; background-color: Black;">White</p>
<p style="color: Red;">Red</p>
<p style="color: Green;">Green</p>
<p style="color: Blue;">Blue</p>
<p style="color: Yellow;">Yellow</p>
<p style="color: Cyan;">Cyan</p>
<p style="color: Magenta;">Magenta</p>
<p style="color: Gray;">Gray</p>
<p style="color: Orange;">Orange</p>
<p style="color: Purple;">Purple</p>
<p style="color: Brown;">Brown</p>
<p style="color: Pink;">Pink</p>
</body>
</html>完整的 HTML 颜色名称列表
以下是 HTML 支持的 140 个颜色名称的完整列表：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完整的 HTML 颜色名称列表</title>
<style>
.color-box {
display: inline-block;
width: 100px;
height: 20px;
margin: 5px;
text-align: center;
color: white;
line-height: 20px;
}
.color-label {
font-family: Arial, sans-serif;
margin: 0;
}
</style>
</head>
<body>
<h2>完整的 HTML 颜色名称列表</h2>
<div class="color-box" style="background-color: AliceBlue;">AliceBlue</div>
<div class="color-box" style="background-color: AntiqueWhite;">AntiqueWhite</div>
<div class="color-box" style="background-color: Aqua;">Aqua</div>
<div class="color-box" style="background-color: Aquamarine;">Aquamarine</div>
<div class="color-box" style="background-color: Azure;">Azure</div>
<div class="color-box" style="background-color: Beige;">Beige</div>
<div class="color-box" style="background-color: Bisque;">Bisque</div>
<div class="color-box" style="background-color: Black;">Black</div>
<div class="color-box" style="background-color: BlanchedAlmond;">BlanchedAlmond</div>
<div class="color-box" style="background-color: Blue;">Blue</div>
<div class="color-box" style="background-color: BlueViolet;">BlueViolet</div>
<div class="color-box" style="background-color: Brown;">Brown</div>
<div class="color-box" style="background-color: BurlyWood;">BurlyWood</div>
<div class="color-box" style="background-color: CadetBlue;">CadetBlue</div>
<div class="color-box" style="background-color: Chartreuse;">Chartreuse</div>
<div class="color-box" style="background-color: Chocolate;">Chocolate</div>
<div class="color-box" style="background-color: Coral;">Coral</div>
<div class="color-box" style="background-color: CornflowerBlue;">CornflowerBlue</div>
<div class="color-box" style="background-color: Cornsilk;">Cornsilk</div>
<div class="color-box" style="background-color: Crimson;">Crimson</div>
<div class="color-box" style="background-color: Cyan;">Cyan</div>
<div class="color-box" style="background-color: DarkBlue;">DarkBlue</div>
<div class="color-box" style="background-color: DarkCyan;">DarkCyan</div>
<div class="color-box" style="background-color: DarkGoldenRod;">DarkGoldenRod</div>
<div class="color-box" style="background-color: DarkGray;">DarkGray</div>
<div class="color-box" style="background-color: DarkGreen;">DarkGreen</div>
<div class="color-box" style="background-color: DarkKhaki;">DarkKhaki</div>
<div class="color-box" style="background-color: DarkMagenta;">DarkMagenta</div>
<div class="color-box" style="background-color: DarkOliveGreen;">DarkOliveGreen</div>
<div class="color-box" style="background-color: DarkOrange;">DarkOrange</div>
<div class="color-box" style="background-color: DarkOrchid;">DarkOrchid</div>
<div class="color-box" style="background-color: DarkRed;">DarkRed</div>
<div class="color-box" style="background-color: DarkSalmon;">DarkSalmon</div>
<div class="color-box" style="background-color: DarkSeaGreen;">DarkSeaGreen</div>
<div class="color-box" style="background-color: DarkSlateBlue;">DarkSlateBlue</div>
<div class="color-box" style="background-color: DarkSlateGray;">DarkSlateGray</div>
<div class="color-box" style="background-color: DarkTurquoise;">DarkTurquoise</div>
<div class="color-box" style="background-color: DarkViolet;">DarkViolet</div>
<div class="color-box" style="background-color: DeepPink;">DeepPink</div>
<div class="color-box" style="background-color: DeepSkyBlue;">DeepSkyBlue</div>
<div class="color-box" style="background-color: DimGray;">DimGray</div>
<div class="color-box" style="background-color: DodgerBlue;">DodgerBlue</div>
<div class="color-box" style="background-color: FireBrick;">FireBrick</div>
<div class="color-box" style="background-color: FloralWhite;">FloralWhite</div>
<div class="color-box" style="background-color: ForestGreen;">ForestGreen</div>
<div class="color-box" style="background-color: Fuchsia;">Fuchsia</div>
<div class="color-box" style="background-color: Gainsboro;">Gainsboro</div>
<div class="color-box" style="background-color: GhostWhite;">GhostWhite</div>
<div class="color-box" style="background-color: Gold;">Gold</div>
<div class="color-box" style="background-color: GoldenRod;">GoldenRod</div>
<div class="color-box" style="background-color: Gray;">Gray</div>
<div class="color-box" style="background-color: Green;">Green</div>
<div class="color-box" style="background-color: GreenYellow;">GreenYellow</div>
<div class="color-box" style="background-color: HoneyDew;">HoneyDew</div>
<div class="color-box" style="background-color: HotPink;">HotPink</div>
<div class="color-box" style="background-color: IndianRed;">IndianRed</div>
<div class="color-box" style="background-color: Indigo;">Indigo</div>
<div class="color-box" style="background-color: Ivory;">Ivory</div>
<div class="color-box" style="background-color: Khaki;">Khaki</div>
<div class="color-box" style="background-color: Lavender;">Lavender</div>
<div class="color-box" style="background-color: LavenderBlush;">LavenderBlush</div>
<div class="color-box" style="background-color: LawnGreen;">LawnGreen</div>
<div class="color-box" style="background-color: LemonChiffon;">LemonChiffon</div>
<div class="color-box" style="background-color: LightBlue;">LightBlue</div>
<div class="color-box" style="background-color: LightCoral;">LightCoral</div>
<div class="color-box" style="background-color: LightCyan;">LightCyan</div>
<div class="color-box" style="background-color: LightGoldenRodYellow;">LightGoldenRodYellow</div>
<div class="color-box" style="background-color: LightGray;">LightGray</div>
<div class="color-box" style="background-color: LightGreen;">LightGreen</div>
<div class="color-box" style="background-color: LightPink;">LightPink</div>
<div class="color-box" style="background-color: LightSalmon;">LightSalmon</div>
<div class="color-box" style="background-color: LightSeaGreen;">LightSeaGreen</div>
<div class="color-box" style="background-color: LightSkyBlue;">LightSkyBlue</div>
<div class="color-box" style="background-color: LightSlateGray;">LightSlateGray</div>
<div class="color-box" style="background-color: LightSteelBlue;">LightSteelBlue</div>
<div class="color-box" style="background-color: LightYellow;">LightYellow</div>
<div class="color-box" style="background-color: Lime;">Lime</div>
<div class="color-box" style="background-color: LimeGreen;">LimeGreen</div>
<div class="color-box" style="background-color: Linen;">Linen</div>
<div class="color-box" style="background-color: Magenta;">Magenta</div>
<div class="color-box" style="background-color: Maroon;">Maroon</div>
<div class="color-box" style="background-color: MediumAquaMarine;">MediumAquaMarine</div>
<div class="color-box" style="background-color: MediumBlue;">MediumBlue</div>
<div class="color-box" style="background-color: MediumOrchid;">MediumOrchid</div>
<div class="color-box" style="background-color: MediumPurple;">MediumPurple</div>
<div class="color-box" style="background-color: MediumSeaGreen;">MediumSeaGreen</div>
<div class="color-box" style="background-color: MediumSlateBlue;">MediumSlateBlue</div>
<div class="color-box" style="background-color: MediumSpringGreen;">MediumSpringGreen</div>
<div class="color-box" style="background-color: MediumTurquoise;">MediumTurquoise</div>
<div class="color-box" style="background-color: MediumVioletRed;">MediumVioletRed</div>
<div class="color-box" style="background-color: MidnightBlue;">MidnightBlue</div>
<div class="color-box" style="background-color: MintCream;">MintCream</div>
<div class="color-box" style="background-color: MistyRose;">MistyRose</div>
<div class="color-box" style="background-color: Moccasin;">Moccasin</div>
<div class="color-box" style="background-color: NavajoWhite;">NavajoWhite</div>
<div class="color-box" style="background-color: Navy;">Navy</div>
<div class="color-box" style="background-color: OldLace;">OldLace</div>
<div class="color-box" style="background-color: Olive;">Olive</div>
<div class="color-box" style="background-color: OliveDrab;">OliveDrab</div>
<div class="color-box" style="background-color: Orange;">Orange</div>
<div class="color-box" style="background-color: OrangeRed;">OrangeRed</div>
<div class="color-box" style="background-color: Orchid;">Orchid</div>
<div class="color-box" style="background-color: PaleGoldenRod;">PaleGoldenRod</div>
<div class="color-box" style="background-color: PaleGreen;">PaleGreen</div>
<div class="color-box" style="background-color: PaleTurquoise;">PaleTurquoise</div>
<div class="color-box" style="background-color: PaleVioletRed;">PaleVioletRed</div>
<div class="color-box" style="background-color: PapayaWhip;">PapayaWhip</div>
<div class="color-box" style="background-color: PeachPuff;">PeachPuff</div>
<div class="color-box" style="background-color: Peru;">Peru</div>
<div class="color-box" style="background-color: Pink;">Pink</div>
<div class="color-box" style="background-color: Plum;">Plum</div>
<div class="color-box" style="background-color: PowderBlue;">PowderBlue</div>
<div class="color-box" style="background-color: Purple;">Purple</div>
<div class="color-box" style="background-color: RebeccaPurple;">RebeccaPurple</div>
<div class="color-box" style="background-color: Red;">Red</div>
<div class="color-box" style="background-color: RosyBrown;">RosyBrown</div>
<div class="color-box" style="background-color: RoyalBlue;">RoyalBlue</div>
<div class="color-box" style="background-color: SaddleBrown;">SaddleBrown</div>
<div class="color-box" style="background-color: Salmon;">Salmon</div>
<div class="color-box" style="background-color: SandyBrown;">SandyBrown</div>
<div class="color-box" style="background-color: SeaGreen;">SeaGreen</div>
<div class="color-box" style="background-color: SeaShell;">SeaShell</div>
<div class="color-box" style="background-color: Sienna;">Sienna</div>
<div class="color-box" style="background-color: Silver;">Silver</div>
<div class="color-box" style="background-color: SkyBlue;">SkyBlue</div>
<div class="color-box" style="background-color: SlateBlue;">SlateBlue</div>
<div class="color-box" style="background-color: SlateGray;">SlateGray</div>
<div class="color-box" style="background-color: Snow;">Snow</div>
<div class="color-box" style="background-color: SpringGreen;">SpringGreen</div>
<div class="color-box" style="background-color: SteelBlue;">SteelBlue</div>
<div class="color-box" style="background-color: Tan;">Tan</div>
<div class="color-box" style="background-color: Teal;">Teal</div>
<div class="color-box" style="background-color: Thistle;">Thistle</div>
<div class="color-box" style="background-color: Tomato;">Tomato</div>
<div class="color-box" style="background-color: Turquoise;">Turquoise</div>
<div class="color-box" style="background-color: Violet;">Violet</div>
<div class="color-box" style="background-color: Wheat;">Wheat</div>
<div class="color-box" style="background-color: White;">White</div>
<div class="color-box" style="background-color: WhiteSmoke;">WhiteSmoke</div>
<div class="color-box" style="background-color: Yellow;">Yellow</div>
<div class="color-box" style="background-color: YellowGreen;">YellowGreen</div>
</body>
</html>在上述示例中，每个颜色名称都被用作 background-color 属性的值，以便直观地展示不同颜色名称对应的颜色。您可以将这些颜色名称直接用于 HTML 和 CSS 中的颜色属性，如 color、background-color、border-color 等。