HTML 教程——颜色名（二十）

HTML颜色名

目前所有浏览器都支持以下颜色名称。

141 个颜色名称是 HTML 和 CSS 颜色规范定义的（17 个标准颜色，加上 124 个）。下面列出了所有颜色的值，包括十六个恢复值。

 提示: 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄色，橙色，紫色，红色，白色，银色，蓝绿色，。点击其中一个颜色名称（或一个十六进制值）就可以查看与不同文字颜色搭配的背景颜色。

按颜色名排序

重点关注的价值排序

点击一个颜色名或者16个亮度值，就可以查看与不同文字颜色搭配的背景颜色。

<table class="reference notranslate">
<tbody>
<tr>
<th align="left" width="25%">颜色名</th>
<th align="left" width="15%">HEX</th>
<th align="left" width="43%">Color</th>
</tr>
<tr>
<td align="left">AliceBlue</td>
<td align="left">#F0F8FF</td>
<td bgcolor="#F0F8FF"></td>
</tr>
<tr>
<td align="left">AntiqueWhite</td>
<td align="left">#FAEBD7</td>
<td bgcolor="#FAEBD7"></td>
</tr>
<tr>
<td align="left">Aqua</td>
<td align="left">#00FFFF</td>
<td bgcolor="#00FFFF"></td>
</tr>
<tr>
<td align="left">Aquamarine</td>
<td align="left">#7FFFD4</td>
<td bgcolor="#7FFFD4"></td>
</tr>
<tr>
<td align="left">Azure</td>
<td align="left">#F0FFFF</td>
<td bgcolor="#F0FFFF"></td>
</tr>
<tr>
<td align="left">Beige</td>
<td align="left">#F5F5DC</td>
<td bgcolor="#F5F5DC"></td>
</tr>
<tr>
<td align="left">Bisque</td>
<td align="left">#FFE4C4</td>
<td bgcolor="#FFE4C4"></td>
</tr>
<tr>
<td align="left">Black</td>
<td align="left">#000000</td>
<td bgcolor="#000000"></td>
</tr>
<tr>
<td align="left">BlanchedAlmond</td>
<td align="left">#FFEBCD</td>
<td bgcolor="#FFEBCD"></td>
</tr>
<tr>
<td align="left">Blue</td>
<td align="left">#0000FF</td>
<td bgcolor="#0000FF"></td>
</tr>
<tr>
<td align="left">BlueViolet</td>
<td align="left">#8A2BE2</td>
<td bgcolor="#8A2BE2"></td>
</tr>
<tr>
<td align="left">Brown</td>
<td align="left">#A52A2A</td>
<td bgcolor="#A52A2A"></td>
</tr>
<tr>
<td align="left">BurlyWood</td>
<td align="left">#DEB887</td>
<td bgcolor="#DEB887"></td>
</tr>
<tr>
<td align="left">CadetBlue</td>
<td align="left">#5F9EA0</td>
<td bgcolor="#5F9EA0"></td>
</tr>
<tr>
<td align="left">Chartreuse</td>
<td align="left">#7FFF00</td>
<td bgcolor="#7FFF00"></td>
</tr>
<tr>
<td align="left">Chocolate</td>
<td align="left">#D2691E</td>
<td bgcolor="#D2691E"></td>
</tr>
<tr>
<td align="left">Coral</td>
<td align="left">#FF7F50</td>
<td bgcolor="#FF7F50"></td>
</tr>
<tr>
<td align="left">CornflowerBlue</td>
<td align="left">#6495ED</td>
<td bgcolor="#6495ED"></td>
</tr>
<tr>
<td align="left">Cornsilk</td>
<td align="left">#FFF8DC</td>
<td bgcolor="#FFF8DC"></td>
</tr>
<tr>
<td align="left">Crimson</td>
<td align="left">#DC143C</td>
<td bgcolor="#DC143C"></td>
</tr>
<tr>
<td align="left">Cyan</td>
<td align="left">#00FFFF</td>
<td bgcolor="#00FFFF"></td>
</tr>
<tr>
<td align="left">DarkBlue</td>
<td align="left">#00008B</td>
<td bgcolor="#00008B"></td>
</tr>
<tr>
<td align="left">DarkCyan</td>
<td align="left">#008B8B</td>
<td bgcolor="#008B8B"></td>
</tr>
<tr>
<td align="left">DarkGoldenRod</td>
<td align="left">#B8860B</td>
<td bgcolor="#B8860B"></td>
</tr>
<tr>
<td align="left">DarkGray</td>
<td align="left">#A9A9A9</td>
<td bgcolor="#A9A9A9"></td>
</tr>
<tr>
<td align="left">DarkGreen</td>
<td align="left">#006400</td>
<td bgcolor="#006400"></td>
</tr>
<tr>
<td align="left">DarkKhaki</td>
<td align="left">#BDB76B</td>
<td bgcolor="#BDB76B"></td>
</tr>
<tr>
<td align="left">DarkMagenta</td>
<td align="left">#8B008B</td>
<td bgcolor="#8B008B"></td>
</tr>
<tr>
<td align="left">DarkOliveGreen</td>
<td align="left">#556B2F</td>
<td bgcolor="#556B2F"></td>
</tr>
<tr>
<td align="left">DarkOrange</td>
<td align="left">#FF8C00</td>
<td bgcolor="#FF8C00"></td>
</tr>
<tr>
<td align="left">DarkOrchid</td>
<td align="left">#9932CC</td>
<td bgcolor="#9932CC"></td>
</tr>
<tr>
<td align="left">DarkRed</td>
<td align="left">#8B0000</td>
<td bgcolor="#8B0000"></td>
</tr>
<tr>
<td align="left">DarkSalmon</td>
<td align="left">#E9967A</td>
<td bgcolor="#E9967A"></td>
</tr>
<tr>
<td align="left">DarkSeaGreen</td>
<td align="left">#8FBC8F</td>
<td bgcolor="#8FBC8F"></td>
</tr>
<tr>
<td align="left">DarkSlateBlue</td>
<td align="left">#483D8B</td>
<td bgcolor="#483D8B"></td>
</tr>
<tr>
<td align="left">DarkSlateGray</td>
<td align="left">#2F4F4F</td>
<td bgcolor="#2F4F4F"></td>
</tr>
<tr>
<td align="left">DarkTurquoise</td>
<td align="left">#00CED1</td>
<td bgcolor="#00CED1"></td>
</tr>
<tr>
<td align="left">DarkViolet</td>
<td align="left">#9400D3</td>
<td bgcolor="#9400D3"></td>
</tr>
<tr>
<td align="left">DeepPink</td>
<td align="left">#FF1493</td>
<td bgcolor="#FF1493"></td>
</tr>
<tr>
<td align="left">DeepSkyBlue</td>
<td align="left">#00BFFF</td>
<td bgcolor="#00BFFF"></td>
</tr>
<tr>
<td align="left">DimGray</td>
<td align="left">#696969</td>
<td bgcolor="#696969"></td>
</tr>
<tr>
<td align="left">DodgerBlue</td>
<td align="left">#1E90FF</td>
<td bgcolor="#1E90FF"></td>
</tr>
<tr>
<td align="left">FireBrick</td>
<td align="left">#B22222</td>
<td bgcolor="#B22222"></td>
</tr>
<tr>
<td align="left">FloralWhite</td>
<td align="left">#FFFAF0</td>
<td bgcolor="#FFFAF0"></td>
</tr>
<tr>
<td align="left">ForestGreen</td>
<td align="left">#228B22</td>
<td bgcolor="#228B22"></td>
</tr>
<tr>
<td align="left">Fuchsia</td>
<td align="left">#FF00FF</td>
<td bgcolor="#FF00FF"></td>
</tr>
<tr>
<td align="left">Gainsboro</td>
<td align="left">#DCDCDC</td>
<td bgcolor="#DCDCDC"></td>
</tr>
<tr>
<td align="left">GhostWhite</td>
<td align="left">#F8F8FF</td>
<td bgcolor="#F8F8FF"></td>
</tr>
<tr>
<td align="left">Gold</td>
<td align="left">#FFD700</td>
<td bgcolor="#FFD700"></td>
</tr>
<tr>
<td align="left">GoldenRod</td>
<td align="left">#DAA520</td>
<td bgcolor="#DAA520"></td>
</tr>
<tr>
<td align="left">Gray</td>
<td align="left">#808080</td>
<td bgcolor="#808080"></td>
</tr>
<tr>
<td align="left">Green</td>
<td align="left">#008000</td>
<td bgcolor="#008000"></td>
</tr>
<tr>
<td align="left">GreenYellow</td>
<td align="left">#ADFF2F</td>
<td bgcolor="#ADFF2F"></td>
</tr>
<tr>
<td align="left">HoneyDew</td>
<td align="left">#F0FFF0</td>
<td bgcolor="#F0FFF0"></td>
</tr>
<tr>
<td align="left">HotPink</td>
<td align="left">#FF69B4</td>
<td bgcolor="#FF69B4"></td>
</tr>
<tr>
<td align="left">IndianRed<span> </span></td>
<td align="left">#CD5C5C</td>
<td bgcolor="#CD5C5C"></td>
</tr>
<tr>
<td align="left">Indigo<span> </span></td>
<td align="left">#4B0082</td>
<td bgcolor="#4B0082"></td>
</tr>
<tr>
<td align="left">Ivory</td>
<td align="left">#FFFFF0</td>
<td bgcolor="#FFFFF0"></td>
</tr>
<tr>
<td align="left">Khaki</td>
<td align="left">#F0E68C</td>
<td bgcolor="#F0E68C"></td>
</tr>
<tr>
<td align="left">Lavender</td>
<td align="left">#E6E6FA</td>
<td bgcolor="#E6E6FA"></td>
</tr>
<tr>
<td align="left">LavenderBlush</td>
<td align="left">#FFF0F5</td>
<td bgcolor="#FFF0F5"></td>
</tr>
<tr>
<td align="left">LawnGreen</td>
<td align="left">#7CFC00</td>
<td bgcolor="#7CFC00"></td>
</tr>
<tr>
<td align="left">LemonChiffon</td>
<td align="left">#FFFACD</td>
<td bgcolor="#FFFACD"></td>
</tr>
<tr>
<td align="left">LightBlue</td>
<td align="left">#ADD8E6</td>
<td bgcolor="#ADD8E6"></td>
</tr>
<tr>
<td align="left">LightCoral</td>
<td align="left">#F08080</td>
<td bgcolor="#F08080"></td>
</tr>
<tr>
<td align="left">LightCyan</td>
<td align="left">#E0FFFF</td>
<td bgcolor="#E0FFFF"></td>
</tr>
<tr>
<td align="left">LightGoldenRodYellow</td>
<td align="left">#FAFAD2</td>
<td bgcolor="#FAFAD2"></td>
</tr>
<tr>
<td align="left">LightGray</td>
<td align="left">#D3D3D3</td>
<td bgcolor="#D3D3D3"></td>
</tr>
<tr>
<td align="left">LightGreen</td>
<td align="left">#90EE90</td>
<td bgcolor="#90EE90"></td>
</tr>
<tr>
<td align="left">LightPink</td>
<td align="left">#FFB6C1</td>
<td bgcolor="#FFB6C1"></td>
</tr>
<tr>
<td align="left">LightSalmon</td>
<td align="left">#FFA07A</td>
<td bgcolor="#FFA07A"></td>
</tr>
<tr>
<td align="left">LightSeaGreen</td>
<td align="left">#20B2AA</td>
<td bgcolor="#20B2AA"></td>
</tr>
<tr>
<td align="left">LightSkyBlue</td>
<td align="left">#87CEFA</td>
<td bgcolor="#87CEFA"></td>
</tr>
<tr>
<td align="left">LightSlateGray</td>
<td align="left">#778899</td>
<td bgcolor="#778899"></td>
</tr>
<tr>
<td align="left">LightSteelBlue</td>
<td align="left">#B0C4DE</td>
<td bgcolor="#B0C4DE"></td>
</tr>
<tr>
<td align="left">LightYellow</td>
<td align="left">#FFFFE0</td>
<td bgcolor="#FFFFE0"></td>
</tr>
<tr>
<td align="left">Lime</td>
<td align="left">#00FF00</td>
<td bgcolor="#00FF00"></td>
</tr>
<tr>
<td align="left">LimeGreen</td>
<td align="left">#32CD32</td>
<td bgcolor="#32CD32"></td>
</tr>
<tr>
<td align="left">Linen</td>
<td align="left">#FAF0E6</td>
<td bgcolor="#FAF0E6"></td>
</tr>
<tr>
<td align="left">Magenta</td>
<td align="left">#FF00FF</td>
<td bgcolor="#FF00FF"></td>
</tr>
<tr>
<td align="left">Maroon</td>
<td align="left">#800000</td>
<td bgcolor="#800000"></td>
</tr>
<tr>
<td align="left">MediumAquaMarine</td>
<td align="left">#66CDAA</td>
<td bgcolor="#66CDAA"></td>
</tr>
<tr>
<td align="left">MediumBlue</td>
<td align="left">#0000CD</td>
<td bgcolor="#0000CD"></td>
</tr>
<tr>
<td align="left">MediumOrchid</td>
<td align="left">#BA55D3</td>
<td bgcolor="#BA55D3"></td>
</tr>
<tr>
<td align="left">MediumPurple</td>
<td align="left">#9370DB</td>
<td bgcolor="#9370DB"></td>
</tr>
<tr>
<td align="left">MediumSeaGreen</td>
<td align="left">#3CB371</td>
<td bgcolor="#3CB371"></td>
</tr>
<tr>
<td align="left">MediumSlateBlue</td>
<td align="left">#7B68EE</td>
<td bgcolor="#7B68EE"></td>
</tr>
<tr>
<td align="left">MediumSpringGreen</td>
<td align="left">#00FA9A</td>
<td bgcolor="#00FA9A"></td>
</tr>
<tr>
<td align="left">MediumTurquoise</td>
<td align="left">#48D1CC</td>
<td bgcolor="#48D1CC"></td>
</tr>
<tr>
<td align="left">MediumVioletRed</td>
<td align="left">#C71585</td>
<td bgcolor="#C71585"></td>
</tr>
<tr>
<td align="left">MidnightBlue</td>
<td align="left">#191970</td>
<td bgcolor="#191970"></td>
</tr>
<tr>
<td align="left">MintCream</td>
<td align="left">#F5FFFA</td>
<td bgcolor="#F5FFFA"></td>
</tr>
<tr>
<td align="left">MistyRose</td>
<td align="left">#FFE4E1</td>
<td bgcolor="#FFE4E1"></td>
</tr>
<tr>
<td align="left">Moccasin</td>
<td align="left">#FFE4B5</td>
<td bgcolor="#FFE4B5"></td>
</tr>
<tr>
<td align="left">NavajoWhite</td>
<td align="left">#FFDEAD</td>
<td bgcolor="#FFDEAD"></td>
</tr>
<tr>
<td align="left">Navy</td>
<td align="left">#000080</td>
<td bgcolor="#000080"></td>
</tr>
<tr>
<td align="left">OldLace</td>
<td align="left">#FDF5E6</td>
<td bgcolor="#FDF5E6"></td>
</tr>
<tr>
<td align="left">Olive</td>
<td align="left">#808000</td>
<td bgcolor="#808000"></td>
</tr>
<tr>
<td align="left">OliveDrab</td>
<td align="left">#6B8E23</td>
<td bgcolor="#6B8E23"></td>
</tr>
<tr>
<td align="left">Orange</td>
<td align="left">#FFA500</td>
<td bgcolor="#FFA500"></td>
</tr>
<tr>
<td align="left">OrangeRed</td>
<td align="left">#FF4500</td>
<td bgcolor="#FF4500"></td>
</tr>
<tr>
<td align="left">Orchid</td>
<td align="left">#DA70D6</td>
<td bgcolor="#DA70D6"></td>
</tr>
<tr>
<td align="left">PaleGoldenRod</td>
<td align="left">#EEE8AA</td>
<td bgcolor="#EEE8AA"></td>
</tr>
<tr>
<td align="left">PaleGreen</td>
<td align="left">#98FB98</td>
<td bgcolor="#98FB98"></td>
</tr>
<tr>
<td align="left">PaleTurquoise</td>
<td align="left">#AFEEEE</td>
<td bgcolor="#AFEEEE"></td>
</tr>
<tr>
<td align="left">PaleVioletRed</td>
<td align="left">#DB7093</td>
<td bgcolor="#DB7093"></td>
</tr>
<tr>
<td align="left">PapayaWhip</td>
<td align="left">#FFEFD5</td>
<td bgcolor="#FFEFD5"></td>
</tr>
<tr>
<td align="left">PeachPuff</td>
<td align="left">#FFDAB9</td>
<td bgcolor="#FFDAB9"></td>
</tr>
<tr>
<td align="left">Peru</td>
<td align="left">#CD853F</td>
<td bgcolor="#CD853F"></td>
</tr>
<tr>
<td align="left">Pink</td>
<td align="left">#FFC0CB</td>
<td bgcolor="#FFC0CB"></td>
</tr>
<tr>
<td align="left">Plum</td>
<td align="left">#DDA0DD</td>
<td bgcolor="#DDA0DD"></td>
</tr>
<tr>
<td align="left">PowderBlue</td>
<td align="left">#B0E0E6</td>
<td bgcolor="#B0E0E6"></td>
</tr>
<tr>
<td align="left">Purple</td>
<td align="left">#800080</td>
<td bgcolor="#800080"></td>
</tr>
<tr>
<td align="left">Red</td>
<td align="left">#FF0000</td>
<td bgcolor="#FF0000"></td>
</tr>
<tr>
<td align="left">RosyBrown</td>
<td align="left">#BC8F8F</td>
<td bgcolor="#BC8F8F"></td>
</tr>
<tr>
<td align="left">RoyalBlue</td>
<td align="left">#4169E1</td>
<td bgcolor="#4169E1"></td>
</tr>
<tr>
<td align="left">SaddleBrown</td>
<td align="left">#8B4513</td>
<td bgcolor="#8B4513"></td>
</tr>
<tr>
<td align="left">Salmon</td>
<td align="left">#FA8072</td>
<td bgcolor="#FA8072"></td>
</tr>
<tr>
<td align="left">SandyBrown</td>
<td align="left">#F4A460</td>
<td bgcolor="#F4A460"></td>
</tr>
<tr>
<td align="left">SeaGreen</td>
<td align="left">#2E8B57</td>
<td bgcolor="#2E8B57"></td>
</tr>
<tr>
<td align="left">SeaShell</td>
<td align="left">#FFF5EE</td>
<td bgcolor="#FFF5EE"></td>
</tr>
<tr>
<td align="left">Sienna</td>
<td align="left">#A0522D</td>
<td bgcolor="#A0522D"></td>
</tr>
<tr>
<td align="left">Silver</td>
<td align="left">#C0C0C0</td>
<td bgcolor="#C0C0C0"></td>
</tr>
<tr>
<td align="left">SkyBlue</td>
<td align="left">#87CEEB</td>
<td bgcolor="#87CEEB"></td>
</tr>
<tr>
<td align="left">SlateBlue</td>
<td align="left">#6A5ACD</td>
<td bgcolor="#6A5ACD"></td>
</tr>
<tr>
<td align="left">SlateGray</td>
<td align="left">#708090</td>
<td bgcolor="#708090"></td>
</tr>
<tr>
<td align="left">Snow</td>
<td align="left">#FFFAFA</td>
<td bgcolor="#FFFAFA"></td>
</tr>
<tr>
<td align="left">SpringGreen</td>
<td align="left">#00FF7F</td>
<td bgcolor="#00FF7F"></td>
</tr>
<tr>
<td align="left">SteelBlue</td>
<td align="left">#4682B4</td>
<td bgcolor="#4682B4"></td>
</tr>
<tr>
<td align="left">Tan</td>
<td align="left">#D2B48C</td>
<td bgcolor="#D2B48C"></td>
</tr>
<tr>
<td align="left">Teal</td>
<td align="left">#008080</td>
<td bgcolor="#008080"></td>
</tr>
<tr>
<td align="left">Thistle</td>
<td align="left">#D8BFD8</td>
<td bgcolor="#D8BFD8"></td>
</tr>
<tr>
<td align="left">Tomato</td>
<td align="left">#FF6347</td>
<td bgcolor="#FF6347"></td>
</tr>
<tr>
<td align="left">Turquoise</td>
<td align="left">#40E0D0</td>
<td bgcolor="#40E0D0"></td>
</tr>
<tr>
<td align="left">Violet</td>
<td align="left">#EE82EE</td>
<td bgcolor="#EE82EE"></td>
</tr>
<tr>
<td align="left">Wheat</td>
<td align="left">#F5DEB3</td>
<td bgcolor="#F5DEB3"></td>
</tr>
<tr>
<td align="left">White</td>
<td align="left">#FFFFFF</td>
<td bgcolor="#FFFFFF"></td>
</tr>
<tr>
<td align="left">WhiteSmoke</td>
<td align="left">#F5F5F5</td>
<td bgcolor="#F5F5F5"></td>
</tr>
<tr>
<td align="left">Yellow</td>
<td align="left">#FFFF00</td>
<td bgcolor="#FFFF00"></td>
</tr>
<tr>
<td align="left">YellowGreen</td>
<td align="left">#9ACD32</td>
<td bgcolor="#9ACD32"></td>
</tr>
</tbody>
</table>

点击运行查看预览