HTML 颜色名称

HTML 颜色名称

HTML 和 CSS 支持一组预定义的颜色名称，可以直接在样式中使用。

所有现代浏览器都识别 CSS Color Module 规范中定义的 140 个标准颜色名称。

使用颜色名称

你可以在任何需要颜色值的地方使用这些名称，例如在 style 属性或 CSS 规则中。颜色名称不区分大小写（red、Red、RED 都指同一种颜色）。

示例：

<h1 style="color: MediumSeaGreen;">Medium Sea Green Heading</h1>

<p style="background-color: LightGray; padding: 15px;">
  This paragraph has a LightGray background.
</p>

<button style="background-color: DodgerBlue; color: White; border: none; padding: 10px 20px;">
  A DodgerBlue Button
</button>

在 CSS 文件中：

body {
  background-color: AntiqueWhite;
}

h2 {
  color: Firebrick;
}

.highlight {
  background-color: Gold;
}

标准颜色名称示例

以下是 140 个可用名称中的几个示例：

颜色名称	大致 HEX 值
Black (黑色)	#000000
White (白色)	#FFFFFF
Red (红色)	#FF0000
Lime (酸橙绿)	#00FF00
Blue (蓝色)	#0000FF
Yellow (黄色)	#FFFF00
Cyan / Aqua (青色)	#00FFFF
Magenta / Fuchsia (品红/紫红色)	#FF00FF
Silver (银色)	#C0C0C0
Gray (灰色)	#808080
Maroon (褐红色)	#800000
Olive (橄榄绿)	#808000
Green (绿色)	#008000
Purple (紫色)	#800080
Teal (青绿色)	#008080
Navy (海军蓝)	#000080
Orange (橙色)	#FFA500
Gold (金色)	#FFD700
Pink (粉色)	#FFC0CB
Tomato (番茄色)	#FF6347
CornflowerBlue (矢车菊蓝)	#6495ED
RebeccaPurple (丽贝卡紫)	#663399

你可以在 MDN Web 文档 颜色关键字页面等资源上找到全部 140 个颜色名称及其对应的 HEX/RGB 值。

使用颜色名称的优缺点

优点：

• 可读性： 像 Red 或 LightBlue 这样的名称易于理解。
• 便利性： 对于常用颜色来说，输入快捷。
• 易记性： 比标准颜色的 HEX 或 RGB 值更容易记住。

缺点：

• 调色板有限： 只有 140 个名称可用，不足以满足精确的设计要求或品牌需求。
• 特异性不足： 无法表示细微的色调或自定义颜色。
• 不支持透明度： 颜色名称不支持透明度（alpha 通道）。你需要使用 RGBA 或 HSLA 来实现。

结论：颜色名称对于基础颜色和快速原型开发非常有用，但对于需要精确颜色控制、透明度或广泛调色板的专业 Web 开发来说，你主要应该使用 HEX、RGB(A) 或 HSL(A) 值，通常通过 CSS 自定义属性（CSS Custom Properties）进行管理。