CSS 颜色名称：完整参考指南
颜色是网页设计的灵魂。虽然大多数开发者为了精确度使用 HEX 代码或 RGB 值，但 CSS 颜色名称 提供了一种更具可读性的方式来快速应用样式。现代浏览器支持 140 多种命名颜色，从常见的 Red（红色）和 Blue（蓝色）到更独特的 AliceBlue（爱丽丝蓝）或 PapayaWhip（番木瓜色）。
本指南提供了所有 CSS 命名颜色的完整、可搜索参考，并按色调分类，帮助您为项目找到完美的色彩。
1. 快速参考：16 种基础颜色
这些是 HTML 4.01 规范中定义的原始颜色，所有浏览器和设备都支持。
| 颜色名称 | HEX | RGB | 示例 |
|---|---|---|---|
| White (白色) | #FFFFFF |
(255, 255, 255) |
|
| Silver (银色) | #C0C0C0 |
(192, 192, 192) |
|
| Gray (灰色) | #808080 |
(128, 128, 128) |
|
| Black (黑色) | #000000 |
(0, 0, 0) |
|
| Red (红色) | #FF0000 |
(255, 0, 0) |
|
| Maroon (栗色) | #800000 |
(128, 0, 0) |
|
| Yellow (黄色) | #FFFF00 |
(255, 255, 0) |
|
| Olive (橄榄色) | #808000 |
(128, 128, 0) |
|
| Lime (青柠色) | #00FF00 |
(0, 255, 0) |
|
| Green (绿色) | #008000 |
(0, 128, 0) |
|
| Aqua (浅绿色) | #00FFFF |
(0, 255, 255) |
|
| Teal (鸭翅绿) | #008080 |
(0, 128, 128) |
|
| Blue (蓝色) | #0000FF |
(0, 0, 255) |
|
| Navy (藏青色) | #000080 |
(0, 0, 128) |
|
| Fuchsia (紫红色) | #FF00FF |
(255, 0, 255) |
|
| Purple (紫色) | #800080 |
(128, 0, 128) |
2. 140 多种 CSS 颜色完整列表
以下是现代浏览器支持的完整扩展颜色集（SVG 1.0/CSS3）。
粉色系 (Pink Colors)
| 名称 | HEX | RGB | 分类 |
|---|---|---|---|
| Pink | #FFC0CB |
(255, 192, 203) |
粉色 |
| LightPink | #FFB6C1 |
(255, 182, 193) |
粉色 |
| HotPink | #FF69B4 |
(255, 105, 180) |
粉色 |
| DeepPink | #FF1493 |
(255, 20, 147) |
粉色 |
| PaleVioletRed | #DB7093 |
(219, 112, 147) |
粉色 |
| MediumVioletRed | #C71585 |
(199, 21, 133) |
粉色 |
红色系 (Red Colors)
| 名称 | HEX | RGB | 分类 |
|---|---|---|---|
| LightSalmon | #FFA07A |
(255, 160, 122) |
红色 |
| Salmon | #FA8072 |
(250, 128, 114) |
红色 |
| DarkSalmon | #E9967A |
(233, 150, 122) |
红色 |
| LightCoral | #F08080 |
(240, 128, 128) |
红色 |
| IndianRed | #CD5C5C |
(205, 92, 92) |
红色 |
| Crimson | #DC143C |
(220, 20, 60) |
红色 |
| FireBrick | #B22222 |
(178, 34, 34) |
红色 |
| DarkRed | #8B0000 |
(139, 0, 0) |
红色 |
| Red | #FF0000 |
(255, 0, 0) |
红色 |
橙色系 (Orange Colors)
| 名称 | HEX | RGB | 分类 |
|---|---|---|---|
| Orange | #FFA500 |
(255, 165, 0) |
橙色 |
| DarkOrange | #FF8C00 |
(255, 140, 0) |
橙色 |
| Coral | #FF7F50 |
(255, 127, 80) |
橙色 |
| Tomato | #FF6347 |
(255, 99, 71) |
橙色 |
| OrangeRed | #FF4500 |
(255, 69, 0) |
橙色 |
黄色系 (Yellow Colors)
| 名称 | HEX | RGB | 分类 |
|---|---|---|---|
| Yellow | #FFFF00 |
(255, 255, 0) |
黄色 |
| LightYellow | #FFFFE0 |
(255, 255, 224) |
黄色 |
| LemonChiffon | #FFFACD |
(255, 250, 205) |
黄色 |
| LightGoldenRodYellow | #FAFAD2 |
(250, 250, 210) |
黄色 |
| PapayaWhip | #FFEFD5 |
(255, 239, 213) |
黄色 |
| Moccasin | #FFE4B5 |
(255, 228, 181) |
黄色 |
| PeachPuff | #FFDAB9 |
(255, 218, 185) |
黄色 |
| PaleGoldenRod | #EEE8AA |
(238, 232, 170) |
黄色 |
| Khaki | #F0E68C |
(240, 230, 140) |
黄色 |
| DarkKhaki | #BDB76B |
(189, 183, 107) |
黄色 |
| Gold | #FFD700 |
(255, 215, 0) |
黄色 |
棕色系 (Brown Colors)
| 名称 | HEX | RGB | 分类 |
|---|---|---|---|
| Cornsilk | #FFF8DC |
(255, 248, 220) |
棕色 |
| BlanchedAlmond | #FFEBCD |
(255, 235, 205) |
棕色 |
| Bisque | #FFE4C4 |
(255, 228, 196) |
棕色 |
| NavajoWhite | #FFDEAD |
(255, 222, 173) |
棕色 |
| Wheat | #F5DEB3 |
(245, 222, 179) |
棕色 |
| BurlyWood | #DEB887 |
(222, 184, 135) |
棕色 |
| Tan | #D2B48C |
(210, 180, 140) |
棕色 |
| RosyBrown | #BC8F8F |
(188, 143, 143) |
棕色 |
| SandyBrown | #F4A460 |
(244, 164, 96) |
棕色 |
| GoldenRod | #DAA520 |
(218, 165, 32) |
棕色 |
| Peru | #CD853F |
(205, 133, 63) |
棕色 |
| Chocolate | #D2691E |
(210, 105, 30) |
棕色 |
| SaddleBrown | #8B4513 |
(139, 69, 19) |
棕色 |
| Sienna | #A0522D |
(160, 82, 45) |
棕色 |
| Brown | #A52A2A |
(165, 42, 42) |
棕色 |
| Maroon | #800000 |
(128, 0, 0) |
棕色 |
绿色系 (Green Colors)
| 名称 | HEX | RGB | 分类 |
|---|---|---|---|
| DarkOliveGreen | #556B2F |
(85, 107, 47) |
绿色 |
| Olive | #808000 |
(128, 128, 0) |
绿色 |
| OliveDrab | #6B8E23 |
(107, 142, 35) |
绿色 |
| YellowGreen | #9ACD32 |
(154, 205, 50) |
绿色 |
| LimeGreen | #32CD32 |
(50, 205, 50) |
绿色 |
| Lime | #00FF00 |
(0, 255, 0) |
绿色 |
| LawnGreen | #7CFC00 |
(124, 252, 0) |
绿色 |
| Chartreuse | #7FFF00 |
(127, 255, 0) |
绿色 |
| GreenYellow | #ADFF2F |
(173, 255, 47) |
绿色 |
| SpringGreen | #00FF7F |
(0, 255, 127) |
绿色 |
| MediumSpringGreen | #00FA9A |
(0, 250, 154) |
绿色 |
| LightGreen | #90EE90 |
(144, 238, 144) |
绿色 |
| PaleGreen | #98FB98 |
(152, 251, 152) |
绿色 |
| DarkSeaGreen | #8FBC8F |
(143, 188, 143) |
绿色 |
| MediumSeaGreen | #3CB371 |
(60, 179, 113) |
绿色 |
| SeaGreen | #2E8B57 |
(46, 139, 87) |
绿色 |
| ForestGreen | #228B22 |
(34, 139, 34) |
绿色 |
| Green | #008000 |
(0, 128, 0) |
绿色 |
| DarkGreen | #006400 |
(0, 100, 0) |
绿色 |
青色与鸭翅绿 (Cyan and Teal Colors)
| 名称 | HEX | RGB | 分类 |
|---|---|---|---|
| Aqua | #00FFFF |
(0, 255, 255) |
青色 |
| Cyan | #00FFFF |
(0, 255, 255) |
青色 |
| LightCyan | #E0FFFF |
(224, 255, 255) |
青色 |
| PaleTurquoise | #AFEEEE |
(175, 238, 238) |
青色 |
| Aquamarine | #7FFFD4 |
(127, 255, 212) |
青色 |
| Turquoise | #40E0D0 |
(64, 224, 208) |
青色 |
| MediumTurquoise | #48D1CC |
(72, 209, 204) |
青色 |
| DarkTurquoise | #00CED1 |
(0, 206, 209) |
青色 |
| LightSeaGreen | #20B2AA |
(32, 178, 170) |
青色 |
| CadetBlue | #5F9EA0 |
(95, 158, 160) |
青色 |
| DarkCyan | #008B8B |
(0, 139, 139) |
青色 |
| Teal | #008080 |
(0, 128, 128) |
青色 |
蓝色系 (Blue Colors)
| 名称 | HEX | RGB | 分类 |
|---|---|---|---|
| LightSteelBlue | #B0C4DE |
(176, 196, 222) |
蓝色 |
| PowderBlue | #B0E0E6 |
(176, 224, 230) |
蓝色 |
| LightBlue | #ADD8E6 |
(173, 216, 230) |
蓝色 |
| SkyBlue | #87CEEB |
(135, 206, 235) |
蓝色 |
| LightSkyBlue | #87CEFA |
(135, 206, 250) |
蓝色 |
| DeepSkyBlue | #00BFFF |
(0, 191, 255) |
蓝色 |
| DodgerBlue | #1E90FF |
(30, 144, 255) |
蓝色 |
| CornflowerBlue | #6495ED |
(100, 149, 237) |
蓝色 |
| MediumSlateBlue | #7B68EE |
(123, 104, 238) |
蓝色 |
| RoyalBlue | #4169E1 |
(65, 105, 225) |
蓝色 |
| Blue | #0000FF |
(0, 0, 255) |
蓝色 |
| MediumBlue | #0000CD |
(0, 0, 205) |
蓝色 |
| DarkBlue | #00008B |
(0, 0, 139) |
蓝色 |
| Navy | #000080 |
(0, 0, 128) |
蓝色 |
| MidnightBlue | #191970 |
(25, 25, 112) |
蓝色 |
紫色系 (Purple and Violet Colors)
| 名称 | HEX | RGB | 分类 |
|---|---|---|---|
| Lavender | #E6E6FA |
(230, 230, 250) |
紫色 |
| Thistle | #D8BFD8 |
(216, 191, 216) |
紫色 |
| Plum | #DDA0DD |
(221, 160, 221) |
紫色 |
| Violet | #EE82EE |
(238, 130, 238) |
紫色 |
| Orchid | #DA70D6 |
(218, 112, 214) |
紫色 |
| Fuchsia | #FF00FF |
(255, 0, 255) |
紫色 |
| Magenta | #FF00FF |
(255, 0, 255) |
紫色 |
| MediumOrchid | #BA55D3 |
(186, 85, 211) |
紫色 |
| MediumPurple | #9370DB |
(147, 112, 219) |
紫色 |
| BlueViolet | #8A2BE2 |
(138, 43, 226) |
紫色 |
| DarkViolet | #9400D3 |
(148, 0, 211) |
紫色 |
| DarkOrchid | #9932CC |
(153, 50, 204) |
紫色 |
| DarkMagenta | #8B008B |
(139, 0, 139) |
紫色 |
| Purple | #800080 |
(128, 0, 128) |
紫色 |
| Indigo | #4B0082 |
(75, 0, 130) |
紫色 |
| DarkSlateBlue | #483D8B |
(72, 61, 139) |
紫色 |
| SlateBlue | #6A5ACD |
(106, 90, 205) |
紫色 |
| RebeccaPurple | #663399 |
(102, 51, 153) |
紫色 |
白色系 (White and Off-White Colors)
| 名称 | HEX | RGB | 分类 |
|---|---|---|---|
| White | #FFFFFF |
(255, 255, 255) |
白色 |
| Snow | #FFFAFA |
(255, 250, 250) |
白色 |
| HoneyDew | #F0FFF0 |
(240, 255, 240) |
白色 |
| MintCream | #F5FFFA |
(245, 255, 250) |
白色 |
| Azure | #F0FFFF |
(240, 255, 255) |
白色 |
| AliceBlue | #F0F8FF |
(240, 248, 255) |
白色 |
| GhostWhite | #F8F8FF |
(248, 248, 255) |
白色 |
| WhiteSmoke | #F5F5F5 |
(245, 245, 245) |
白色 |
| SeaShell | #FFF5EE |
(255, 245, 238) |
白色 |
| Beige | #F5F5DC |
(245, 245, 220) |
白色 |
| OldLace | #FDF5E6 |
(253, 245, 230) |
白色 |
| FloralWhite | #FFFAF0 |
(255, 250, 240) |
白色 |
| Ivory | #FFFFF0 |
(255, 255, 240) |
白色 |
| AntiqueWhite | #FAEBD7 |
(250, 235, 215) |
白色 |
| Linen | #FAF0E6 |
(250, 240, 230) |
白色 |
| MistyRose | #FFE4E1 |
(255, 228, 225) |
白色 |
| LavenderBlush | #FFF0F5 |
(255, 240, 245) |
白色 |
灰色与黑色系 (Gray and Black Colors)
| 名称 | HEX | RGB | 分类 |
|---|---|---|---|
| Gainsboro | #DCDCDC |
(220, 220, 220) |
灰色 |
| LightGray | #D3D3D3 |
(211, 211, 211) |
灰色 |
| LightGrey | #D3D3D3 |
(211, 211, 211) |
灰色 |
| Silver | #C0C0C0 |
(192, 192, 192) |
灰色 |
| DarkGray | #A9A9A9 |
(169, 169, 169) |
灰色 |
| DarkGrey | #A9A9A9 |
(169, 169, 169) |
灰色 |
| Gray | #808080 |
(128, 128, 128) |
灰色 |
| Grey | #808080 |
(128, 128, 128) |
灰色 |
| DimGray | #696969 |
(105, 105, 105) |
灰色 |
| DimGrey | #696969 |
(105, 105, 105) |
灰色 |
| LightSlateGray | #778899 |
(119, 136, 153) |
灰色 |
| LightSlateGrey | #778899 |
(119, 136, 153) |
灰色 |
| SlateGray | #708090 |
(112, 128, 144) |
灰色 |
| SlateGrey | #708090 |
(112, 128, 144) |
灰色 |
| DarkSlateGray | #2F4F4F |
(47, 79, 79) |
灰色 |
| DarkSlateGrey | `#2F4F4F" | (47, 79, 79) |
灰色 |
| Black | #000000 |
(0, 0, 0) |
灰色 |
3. 如何使用 CSS 颜色名称
在代码中使用这些名称非常简单。它们可以应用于任何接受 <color> 值的属性。
标准 CSS 属性
/* 使用名称设置文本颜色 */
h1 {
color: Crimson;
}
/* 使用名称设置背景色 */
.alert {
background-color: PapayaWhip;
border: 1px solid OrangeRed;
}
SVG 属性
CSS 颜色名称也完全适用于 SVG 属性：
<circle cx="50" cy="50" r="40" fill="RoyalBlue" stroke="MidnightBlue" stroke-width="2" />
'currentColor' 关键字
currentColor 是一个特殊值，它继承元素的 color 属性值。
div {
color: SeaGreen;
border: 2px solid currentColor; /* 边框也将是 SeaGreen */
}
4. 常见问题 (FAQ)
Q: CSS 颜色名称区分大小写吗？
A: 不区分。您可以写成 AliceBlue、aliceblue 甚至 ALICEBLUE。它们都被视为同一种颜色。不过，为了提高可读性，许多开发者更喜欢使用驼峰式命名（如 AliceBlue）。
Q: 哪些颜色名称是“网页安全色”？
A: “网页安全色”是过去显示器仅支持 256 色时代的产物。如今，所有 140 多种 CSS 命名颜色在任何现代设备上都是安全的。
Q: 为什么使用颜色名称而不是 HEX 代码？
A: 颜色名称更容易记忆，且能提高代码的可读性。background-color: White 一眼就能看懂，而 #FFFFFF 则需要一点脑内转换。不过，对于精确的企业品牌色，HEX、RGB 或 HSL 仍是最佳选择。
Q: 存在重复的名称吗？
A: 是的。Aqua 和 Cyan 完全相同（#00FFFF），Fuchsia 和 Magenta 也完全相同（#FF00FF）。此外，许多灰色有两种拼写方式（如 Gray 和 Grey、DarkGray 和 DarkGrey）。
Q: 如何处理对比度问题？
A: 使用命名颜色时，请务必确保文本与背景之间有足够的对比度。例如，白色背景上的黄色（Yellow）文本几乎无法阅读，且无法通过无障碍标准（WCAG）。
Tool3M 相关工具
- 颜色转换器: 立即将这些命名颜色转换为 HEX、RGB、HSL 或 CMYK 格式。
- 图片转 Base64: 将图片转换为 Base64 字符串，以便在 CSS/HTML 中使用。