HTML 教程——颜色值（二十一）
HTML颜色值
颜色由红(R)、绿(G)、蓝(B)组成。
颜色值
颜色值由十六进制来表示红、绿、蓝（RGB）。
每个颜色的最低值为0(十六烷为00)，最高值为255(十六烷为FF)。
十六烷值的写法为#号后跟随三或六十六烷字符。
三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。
颜色实例：
<p style="background-color:#FF00FF">
这是通过十六进制设置背景颜色
</p>
<p style="background-color:rgb(255,0,255)">
这是通过 rgb 值设置背景颜色
</p>
<p style="background-color:Fuchsia ">
这是通过颜色名设置背景颜色
</p>浏览器显示如下：
这是通过十六进制设置背景颜色
这是通过 rgb 值设置背景颜色
这是通过颜色名设置背景颜色
通过十六进制（Hex）的颜色值排序
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>天牛博客(tnell.com)</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>天牛博客(tnell.com)</title>
</head>
<body>
<table class="reference notranslate" cellspacing="0" border="1" width="100%">
<tbody><tr>
<th align="left" width="25%">颜色名</th>
<th align="left" width="15%">HEX</th>
<th align="left" width="60%">Color</th>
</tr>
<tr>
<td align="left">Black</a> </td>
<td align="left">#000000</a></td>
<td bgcolor="#000000"> </td></tr>
<tr>
<td align="left">Navy</a> </td>
<td align="left">#000080</a></td>
<td bgcolor="#000080"> </td>
</tr>
<tr>
<td align="left">DarkBlue</a> </td>
<td align="left">#00008B</a></td>
<td bgcolor="#00008B"> </td>
</tr>
<tr>
<td align="left">MediumBlue</a> </td>
<td align="left">#0000CD</a></td>
<td bgcolor="#0000CD"> </td>
</tr>
<tr>
<td align="left">Blue</a> </td>
<td align="left">#0000FF</a></td>
<td bgcolor="#0000FF"> </td>
</tr>
<tr>
<td align="left">DarkGreen</a> </td>
<td align="left">#006400</a></td>
<td bgcolor="#006400"> </td>
</tr>
<tr>
<td align="left">Green</a> </td>
<td align="left">#008000</a></td>
<td bgcolor="#008000"> </td>
</tr>
<tr>
<td align="left">Teal</a> </td>
<td align="left">#008080</a></td>
<td bgcolor="#008080"> </td>
</tr>
<tr>
<td align="left">DarkCyan</a> </td>
<td align="left">#008B8B</a></td>
<td bgcolor="#008B8B"> </td>
</tr>
<tr>
<td align="left">DeepSkyBlue</a> </td>
<td align="left">#00BFFF</a></td>
<td bgcolor="#00BFFF"> </td>
</tr>
<tr>
<td align="left">DarkTurquoise</a> </td>
<td align="left">#00CED1</a></td>
<td bgcolor="#00CED1"> </td>
</tr>
<tr>
<td align="left">MediumSpringGreen</a> </td>
<td align="left">#00FA9A</a></td>
<td bgcolor="#00FA9A"> </td>
</tr>
<tr>
<td align="left">Lime</a> </td>
<td align="left">#00FF00</a></td>
<td bgcolor="#00FF00"> </td>
</tr>
<tr>
<td align="left">SpringGreen</a> </td>
<td align="left">#00FF7F</a></td>
<td bgcolor="#00FF7F"> </td>
</tr>
<tr>
<td align="left">Aqua</a> </td>
<td align="left">#00FFFF</a></td>
<td bgcolor="#00FFFF"> </td>
</tr>
<tr>
<td align="left">Cyan</a> </td>
<td align="left">#00FFFF</a></td>
<td bgcolor="#00FFFF"> </td>
</tr>
<tr>
<td align="left">MidnightBlue</a> </td>
<td align="left">#191970</a></td>
<td bgcolor="#191970"> </td>
</tr>
<tr>
<td align="left">DodgerBlue</a> </td>
<td align="left">#1E90FF</a></td>
<td bgcolor="#1E90FF"> </td>
</tr>
<tr>
<td align="left">LightSeaGreen</a> </td>
<td align="left">#20B2AA</a></td>
<td bgcolor="#20B2AA"> </td>
</tr>
<tr>
<td align="left">ForestGreen</a> </td>
<td align="left">#228B22</a></td>
<td bgcolor="#228B22"> </td>
</tr>
<tr>
<td align="left">SeaGreen</a> </td>
<td align="left">#2E8B57</a></td>
<td bgcolor="#2E8B57"> </td>
</tr>
<tr>
<td align="left">DarkSlateGray</a> </td>
<td align="left">#2F4F4F</a></td>
<td bgcolor="#2F4F4F"> </td>
</tr>
<tr>
<td align="left">LimeGreen</a> </td>
<td align="left">#32CD32</a></td>
<td bgcolor="#32CD32"> </td>
</tr>
<tr>
<td align="left">MediumSeaGreen</a> </td>
<td align="left">#3CB371</a></td>
<td bgcolor="#3CB371"> </td>
</tr>
<tr>
<td align="left">Turquoise</a> </td>
<td align="left">#40E0D0</a></td>
<td bgcolor="#40E0D0"> </td>
</tr>
<tr>
<td align="left">RoyalBlue</a> </td>
<td align="left">#4169E1</a></td>
<td bgcolor="#4169E1"> </td>
</tr>
<tr>
<td align="left">SteelBlue</a> </td>
<td align="left">#4682B4</a></td>
<td bgcolor="#4682B4"> </td>
</tr>
<tr>
<td align="left">DarkSlateBlue</a> </td>
<td align="left">#483D8B</a></td>
<td bgcolor="#483D8B"> </td>
</tr>
<tr>
<td align="left">MediumTurquoise</a> </td>
<td align="left">#48D1CC</a></td>
<td bgcolor="#48D1CC"> </td>
</tr>
<tr>
<td align="left">Indigo </a> </td>
<td align="left">#4B0082</a></td>
<td bgcolor="#4B0082"> </td>
</tr>
<tr>
<td align="left">DarkOliveGreen</a> </td>
<td align="left">#556B2F</a></td>
<td bgcolor="#556B2F"> </td>
</tr>
<tr>
<td align="left">CadetBlue</a> </td>
<td align="left">#5F9EA0</a></td>
<td bgcolor="#5F9EA0"> </td>
</tr>
<tr>
<td align="left">CornflowerBlue</a> </td>
<td align="left">#6495ED</a></td>
<td bgcolor="#6495ED"> </td>
</tr>
<tr>
<td align="left">MediumAquaMarine</a> </td>
<td align="left">#66CDAA</a></td>
<td bgcolor="#66CDAA"> </td>
</tr>
<tr>
<td align="left">DimGray</a> </td>
<td align="left">#696969</a></td>
<td bgcolor="#696969"> </td>
</tr>
<tr>
<td align="left">SlateBlue</a> </td>
<td align="left">#6A5ACD</a></td>
<td bgcolor="#6A5ACD"> </td>
</tr>
<tr>
<td align="left">OliveDrab</a> </td>
<td align="left">#6B8E23</a></td>
<td bgcolor="#6B8E23"> </td>
</tr>
<tr>
<td align="left">SlateGray</a> </td>
<td align="left">#708090</a></td>
<td bgcolor="#708090"> </td>
</tr>
<tr>
<td align="left">LightSlateGray</a> </td>
<td align="left">#778899</a></td>
<td bgcolor="#778899"> </td>
</tr>
<tr>
<td align="left">MediumSlateBlue</a> </td>
<td align="left">#7B68EE</a></td>
<td bgcolor="#7B68EE"> </td>
</tr>
<tr>
<td align="left">LawnGreen</a> </td>
<td align="left">#7CFC00</a></td>
<td bgcolor="#7CFC00"> </td>
</tr>
<tr>
<td align="left">Chartreuse</a> </td>
<td align="left">#7FFF00</a></td>
<td bgcolor="#7FFF00"> </td>
</tr>
<tr>
<td align="left">Aquamarine</a> </td>
<td align="left">#7FFFD4</a></td>
<td bgcolor="#7FFFD4"> </td>
</tr>
<tr>
<td align="left">Maroon</a> </td>
<td align="left">#800000</a></td>
<td bgcolor="#800000"> </td>
</tr>
<tr>
<td align="left">Purple</a> </td>
<td align="left">#800080</a></td>
<td bgcolor="#800080"> </td>
</tr>
<tr>
<td align="left">Olive</a> </td>
<td align="left">#808000</a></td>
<td bgcolor="#808000"> </td>
</tr>
<tr>
<td align="left">Gray</a> </td>
<td align="left">#808080</a></td>
<td bgcolor="#808080"> </td>
</tr>
<tr>
<td align="left">SkyBlue</a> </td>
<td align="left">#87CEEB</a></td>
<td bgcolor="#87CEEB"> </td>
</tr>
<tr>
<td align="left">LightSkyBlue</a> </td>
<td align="left">#87CEFA</a></td>
<td bgcolor="#87CEFA"> </td>
</tr>
<tr>
<td align="left">BlueViolet</a> </td>
<td align="left">#8A2BE2</a></td>
<td bgcolor="#8A2BE2"> </td>
</tr>
<tr>
<td align="left">DarkRed</a> </td>
<td align="left">#8B0000</a></td>
<td bgcolor="#8B0000"> </td>
</tr>
<tr>
<td align="left">DarkMagenta</a> </td>
<td align="left">#8B008B</a></td>
<td bgcolor="#8B008B"> </td>
</tr>
<tr>
<td align="left">SaddleBrown</a> </td>
<td align="left">#8B4513</a></td>
<td bgcolor="#8B4513"> </td>
</tr>
<tr>
<td align="left">DarkSeaGreen</a> </td>
<td align="left">#8FBC8F</a></td>
<td bgcolor="#8FBC8F"> </td>
</tr>
<tr>
<td align="left">LightGreen</a> </td>
<td align="left">#90EE90</a></td>
<td bgcolor="#90EE90"> </td>
</tr>
<tr>
<td align="left">MediumPurple</a> </td>
<td align="left">#9370DB</a></td>
<td bgcolor="#9370DB"> </td>
</tr>
<tr>
<td align="left">DarkViolet</a> </td>
<td align="left">#9400D3</a></td>
<td bgcolor="#9400D3"> </td>
</tr>
<tr>
<td align="left">PaleGreen</a> </td>
<td align="left">#98FB98</a></td>
<td bgcolor="#98FB98"> </td>
</tr>
<tr>
<td align="left">DarkOrchid</a> </td>
<td align="left">#9932CC</a></td>
<td bgcolor="#9932CC"> </td>
</tr>
<tr>
<td align="left">YellowGreen</a> </td>
<td align="left">#9ACD32</a></td>
<td bgcolor="#9ACD32"> </td>
</tr>
<tr>
<td align="left">Sienna</a> </td>
<td align="left">#A0522D</a></td>
<td bgcolor="#A0522D"> </td>
</tr>
<tr>
<td align="left">Brown</a> </td>
<td align="left">#A52A2A</a></td>
<td bgcolor="#A52A2A"> </td>
</tr>
<tr>
<td align="left">DarkGray</a> </td>
<td align="left">#A9A9A9</a></td>
<td bgcolor="#A9A9A9"> </td>
</tr>
<tr>
<td align="left">LightBlue</a> </td>
<td align="left">#ADD8E6</a></td>
<td bgcolor="#ADD8E6"> </td>
</tr>
<tr>
<td align="left">GreenYellow</a> </td>
<td align="left">#ADFF2F</a></td>
<td bgcolor="#ADFF2F"> </td>
</tr>
<tr>
<td align="left">PaleTurquoise</a> </td>
<td align="left">#AFEEEE</a></td>
<td bgcolor="#AFEEEE"> </td>
</tr>
<tr>
<td align="left">LightSteelBlue</a> </td>
<td align="left">#B0C4DE</a></td>
<td bgcolor="#B0C4DE"> </td>
</tr>
<tr>
<td align="left">PowderBlue</a> </td>
<td align="left">#B0E0E6</a></td>
<td bgcolor="#B0E0E6"> </td>
</tr>
<tr>
<td align="left">FireBrick</a> </td>
<td align="left">#B22222</a></td>
<td bgcolor="#B22222"> </td>
</tr>
<tr>
<td align="left">DarkGoldenRod</a> </td>
<td align="left">#B8860B</a></td>
<td bgcolor="#B8860B"> </td>
</tr>
<tr>
<td align="left">MediumOrchid</a> </td>
<td align="left">#BA55D3</a></td>
<td bgcolor="#BA55D3"> </td>
</tr>
<tr>
<td align="left">RosyBrown</a> </td>
<td align="left">#BC8F8F</a></td>
<td bgcolor="#BC8F8F"> </td>
</tr>
<tr>
<td align="left">DarkKhaki</a> </td>
<td align="left">#BDB76B</a></td>
<td bgcolor="#BDB76B"> </td>
</tr>
<tr>
<td align="left">Silver</a> </td>
<td align="left">#C0C0C0</a></td>
<td bgcolor="#C0C0C0"> </td>
</tr>
<tr>
<td align="left">MediumVioletRed</a> </td>
<td align="left">#C71585</a></td>
<td bgcolor="#C71585"> </td>
</tr>
<tr>
<td align="left">IndianRed </a> </td>
<td align="left">#CD5C5C</a></td>
<td bgcolor="#CD5C5C"> </td>
</tr>
<tr>
<td align="left">Peru</a> </td>
<td align="left">#CD853F</a></td>
<td bgcolor="#CD853F"> </td>
</tr>
<tr>
<td align="left">Chocolate</a> </td>
<td align="left">#D2691E</a></td>
<td bgcolor="#D2691E"> </td>
</tr>
<tr>
<td align="left">Tan</a> </td>
<td align="left">#D2B48C</a></td>
<td bgcolor="#D2B48C"> </td>
</tr>
<tr>
<td align="left">LightGray</a> </td>
<td align="left">#D3D3D3</a></td>
<td bgcolor="#D3D3D3"> </td>
</tr>
<tr>
<td align="left">Thistle</a> </td>
<td align="left">#D8BFD8</a></td>
<td bgcolor="#D8BFD8"> </td>
</tr>
<tr>
<td align="left">Orchid</a> </td>
<td align="left">#DA70D6</a></td>
<td bgcolor="#DA70D6"> </td>
</tr>
<tr>
<td align="left">GoldenRod</a> </td>
<td align="left">#DAA520</a></td>
<td bgcolor="#DAA520"> </td>
</tr>
<tr>
<td align="left">PaleVioletRed</a> </td>
<td align="left">#DB7093</a></td>
<td bgcolor="#DB7093"> </td>
</tr>
<tr>
<td align="left">Crimson</a> </td>
<td align="left">#DC143C</a></td>
<td bgcolor="#DC143C"> </td>
</tr>
<tr>
<td align="left">Gainsboro</a> </td>
<td align="left">#DCDCDC</a></td>
<td bgcolor="#DCDCDC"> </td>
</tr>
<tr>
<td align="left">Plum</a> </td>
<td align="left">#DDA0DD</a></td>
<td bgcolor="#DDA0DD"> </td>
</tr>
<tr>
<td align="left">BurlyWood</a> </td>
<td align="left">#DEB887</a></td>
<td bgcolor="#DEB887"> </td>
</tr>
<tr>
<td align="left">LightCyan</a> </td>
<td align="left">#E0FFFF</a></td>
<td bgcolor="#E0FFFF"> </td>
</tr>
<tr>
<td align="left">Lavender</a> </td>
<td align="left">#E6E6FA</a></td>
<td bgcolor="#E6E6FA"> </td>
</tr>
<tr>
<td align="left">DarkSalmon</a> </td>
<td align="left">#E9967A</a></td>
<td bgcolor="#E9967A"> </td>
</tr>
<tr>
<td align="left">Violet</a> </td>
<td align="left">#EE82EE</a></td>
<td bgcolor="#EE82EE"> </td>
</tr>
<tr>
<td align="left">PaleGoldenRod</a> </td>
<td align="left">#EEE8AA</a></td>
<td bgcolor="#EEE8AA"> </td>
</tr>
<tr>
<td align="left">LightCoral</a> </td>
<td align="left">#F08080</a></td>
<td bgcolor="#F08080"> </td>
</tr>
<tr>
<td align="left">Khaki</a> </td>
<td align="left">#F0E68C</a></td>
<td bgcolor="#F0E68C"> </td>
</tr>
<tr>
<td align="left">AliceBlue</a> </td>
<td align="left">#F0F8FF</a></td>
<td bgcolor="#F0F8FF"> </td>
</tr>
<tr>
<td align="left">HoneyDew</a> </td>
<td align="left">#F0FFF0</a></td>
<td bgcolor="#F0FFF0"> </td>
</tr>
<tr>
<td align="left">Azure</a> </td>
<td align="left">#F0FFFF</a></td>
<td bgcolor="#F0FFFF"> </td>
</tr>
<tr>
<td align="left">SandyBrown</a> </td>
<td align="left">#F4A460</a></td>
<td bgcolor="#F4A460"> </td>
</tr>
<tr>
<td align="left">Wheat</a> </td>
<td align="left">#F5DEB3</a></td>
<td bgcolor="#F5DEB3"> </td>
</tr>
<tr>
<td align="left">Beige</a> </td>
<td align="left">#F5F5DC</a></td>
<td bgcolor="#F5F5DC"> </td>
</tr>
<tr>
<td align="left">WhiteSmoke</a> </td>
<td align="left">#F5F5F5</a></td>
<td bgcolor="#F5F5F5"> </td>
</tr>
<tr>
<td align="left">MintCream</a> </td>
<td align="left">#F5FFFA</a></td>
<td bgcolor="#F5FFFA"> </td>
</tr>
<tr>
<td align="left">GhostWhite</a> </td>
<td align="left">#F8F8FF</a></td>
<td bgcolor="#F8F8FF"> </td>
</tr>
<tr>
<td align="left">Salmon</a> </td>
<td align="left">#FA8072</a></td>
<td bgcolor="#FA8072"> </td>
</tr>
<tr>
<td align="left">AntiqueWhite</a> </td>
<td align="left">#FAEBD7</a></td>
<td bgcolor="#FAEBD7"> </td>
</tr>
<tr>
<td align="left">Linen</a> </td>
<td align="left">#FAF0E6</a></td>
<td bgcolor="#FAF0E6"> </td>
</tr>
<tr>
<td align="left">LightGoldenRodYellow</a> </td>
<td align="left">#FAFAD2</a></td>
<td bgcolor="#FAFAD2"> </td>
</tr>
<tr>
<td align="left">OldLace</a> </td>
<td align="left">#FDF5E6</a></td>
<td bgcolor="#FDF5E6"> </td>
</tr>
<tr>
<td align="left">Red</a> </td>
<td align="left">#FF0000</a></td>
<td bgcolor="#FF0000"> </td>
</tr>
<tr>
<td align="left">Fuchsia</a> </td>
<td align="left">#FF00FF</a></td>
<td bgcolor="#FF00FF"> </td>
</tr>
<tr>
<td align="left">Magenta</a> </td>
<td align="left">#FF00FF</a></td>
<td bgcolor="#FF00FF"> </td>
</tr>
<tr>
<td align="left">DeepPink</a> </td>
<td align="left">#FF1493</a></td>
<td bgcolor="#FF1493"> </td>
</tr>
<tr>
<td align="left">OrangeRed</a> </td>
<td align="left">#FF4500</a></td>
<td bgcolor="#FF4500"> </td>
</tr>
<tr>
<td align="left">Tomato</a> </td>
<td align="left">#FF6347</a></td>
<td bgcolor="#FF6347"> </td>
</tr>
<tr>
<td align="left">HotPink</a> </td>
<td align="left">#FF69B4</a></td>
<td bgcolor="#FF69B4"> </td>
</tr>
<tr>
<td align="left">Coral</a> </td>
<td align="left">#FF7F50</a></td>
<td bgcolor="#FF7F50"> </td>
</tr>
<tr>
<td align="left">DarkOrange</a> </td>
<td align="left">#FF8C00</a></td>
<td bgcolor="#FF8C00"> </td>
</tr>
<tr>
<td align="left">LightSalmon</a> </td>
<td align="left">#FFA07A</a></td>
<td bgcolor="#FFA07A"> </td>
</tr>
<tr>
<td align="left">Orange</a> </td>
<td align="left">#FFA500</a></td>
<td bgcolor="#FFA500"> </td>
</tr>
<tr>
<td align="left">LightPink</a> </td>
<td align="left">#FFB6C1</a></td>
<td bgcolor="#FFB6C1"> </td>
</tr>
<tr>
<td align="left">Pink</a> </td>
<td align="left">#FFC0CB</a></td>
<td bgcolor="#FFC0CB"> </td>
</tr>
<tr>
<td align="left">Gold</a> </td>
<td align="left">#FFD700</a></td>
<td bgcolor="#FFD700"> </td>
</tr>
<tr>
<td align="left">PeachPuff</a> </td>
<td align="left">#FFDAB9</a></td>
<td bgcolor="#FFDAB9"> </td>
</tr>
<tr>
<td align="left">NavajoWhite</a> </td>
<td align="left">#FFDEAD</a></td>
<td bgcolor="#FFDEAD"> </td>
</tr>
<tr>
<td align="left">Moccasin</a> </td>
<td align="left">#FFE4B5</a></td>
<td bgcolor="#FFE4B5"> </td>
</tr>
<tr>
<td align="left">Bisque</a> </td>
<td align="left">#FFE4C4</a></td>
<td bgcolor="#FFE4C4"> </td>
</tr>
<tr>
<td align="left">MistyRose</a> </td>
<td align="left">#FFE4E1</a></td>
<td bgcolor="#FFE4E1"> </td>
</tr>
<tr>
<td align="left">BlanchedAlmond</a> </td>
<td align="left">#FFEBCD</a></td>
<td bgcolor="#FFEBCD"> </td>
</tr>
<tr>
<td align="left">PapayaWhip</a> </td>
<td align="left">#FFEFD5</a></td>
<td bgcolor="#FFEFD5"> </td>
</tr>
<tr>
<td align="left">LavenderBlush</a> </td>
<td align="left">#FFF0F5</a></td>
<td bgcolor="#FFF0F5"> </td>
</tr>
<tr>
<td align="left">SeaShell</a> </td>
<td align="left">#FFF5EE</a></td>
<td bgcolor="#FFF5EE"> </td>
</tr>
<tr>
<td align="left">Cornsilk</a> </td>
<td align="left">#FFF8DC</a></td>
<td bgcolor="#FFF8DC"> </td>
</tr>
<tr>
<td align="left">LemonChiffon</a> </td>
<td align="left">#FFFACD</a></td>
<td bgcolor="#FFFACD"> </td>
</tr>
<tr>
<td align="left">FloralWhite</a> </td>
<td align="left">#FFFAF0</a></td>
<td bgcolor="#FFFAF0"> </td>
</tr>
<tr>
<td align="left">Snow</a> </td>
<td align="left">#FFFAFA</a></td>
<td bgcolor="#FFFAFA"> </td>
</tr>
<tr>
<td align="left">Yellow</a> </td>
<td align="left">#FFFF00</a></td>
<td bgcolor="#FFFF00"> </td>
</tr>
<tr>
<td align="left">LightYellow</a> </td>
<td align="left">#FFFFE0</a></td>
<td bgcolor="#FFFFE0"> </td>
</tr>
<tr>
<td align="left">Ivory</a> </td>
<td align="left">#FFFFF0</a></td>
<td bgcolor="#FFFFF0"> </td>
</tr>
<tr>
<td align="left">White</a> </td>
<td align="left">#FFFFFF</a></td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody></table>
</body>
</html>
</body>
</html>
文章目录
关闭
共有 0 条评论