颜色是视觉中重要因素，尤其是处理人机界面中，更是要处理颜色设置和搭配。在网页中，提供了设置颜色的一些方案，需要我们认真学习和掌握。
一、HTML 颜色
HTML 颜色由红色、绿色、蓝色混合而成。
颜色值：
HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
二、HTML中设置颜色值
- 使用常用的颜色名称：例如red（红色）、blue（蓝色）、green（绿色）等。
<p style="color: red;">红色文字</p>
- 使用RGB（红绿蓝）颜色值：通过指定红色、绿色和蓝色的亮度来定义颜色。每个颜色的亮度值范围是0-255。
<p style="color: rgb(255, 0, 0);">红色文字</p>
- 使用十六进制颜色值：通过指定红色、绿色和蓝色的十六进制值来定义颜色。每个颜色的十六进制值范围是00-FF。
<p style="color: #FF0000;">红色文字</p>
- 使用HSL（色调、饱和度、亮度）颜色值：通过指定颜色的色调、饱和度和亮度来定义颜色。色调的值范围是0-360，饱和度和亮度的值范围是0-100。
<p style="color: hsl(0, 100%, 50%);">红色文字</p>
注意：以上颜色值的设置方式可以在HTML的内联样式中使用，也可以在CSS样式表中使用。
三、颜色名称和颜色值
有关颜色名、颜色值等内容，网上有很全面的参考内容。自己找。另外编程工具也都提供了快捷输入的一些方式，也有助于对颜色的了解。把下面的代码执行一下，可以用来查看已经具名的颜色。
<!DOCTYPE html> <html> <head> <title>编程笔记 html5&css&js 018 HTML颜色</title> <meta charset="utf-8"> <style> body { background: color black; } </style> </head> <h1>HTML颜色</h1> <h2>目前所有浏览器都支持以下颜色名。</h2> <p>141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124)。下表列出了所有颜色的值，包括十六进制值。</p> <hr> <h2>按颜色名排序</h2> <table class="reference notranslate"> <tr> <th align="left" width="25%">颜色名</th> <th align="left" width="20%">HEX</th> <th align="left" width="50%">Color</th> </tr> <tr> <td align="left"> AliceBlue</a> </td> <td align="left"> #F0F8FF</a></td> <td bgcolor="#F0F8FF"> </td> </tr> <tr> <td align="left"> AntiqueWhite</a> </td> <td align="left"> #FAEBD7</a></td> <td bgcolor="#FAEBD7"> </td> </tr> <tr> <td align="left"> Aqua</a> </td> <td align="left"> #00FFFF</a></td> <td bgcolor="#00FFFF"> </td> </tr> <tr> <td align="left"> Aquamarine</a> </td> <td align="left"> #7FFFD4</a></td> <td bgcolor="#7FFFD4"> </td> </tr> <tr> <td align="left"> Azure</a> </td> <td align="left"> #F0FFFF</a></td> <td bgcolor="#F0FFFF"> </td> </tr> <tr> <td align="left"> Beige</a> </td> <td align="left"> #F5F5DC</a></td> <td bgcolor="#F5F5DC"> </td> </tr> <tr> <td align="left"> Bisque</a> </td> <td align="left"> #FFE4C4</a></td> <td bgcolor="#FFE4C4"> </td> </tr> <tr> <td align="left"> Black</a> </td> <td align="left"> #000000</a></td> <td bgcolor="#000000"> </td> </tr> <tr> <td align="left"> BlanchedAlmond</a> </td> <td align="left"> #FFEBCD</a></td> <td bgcolor="#FFEBCD"> </td> </tr> <tr> <td align="left"> Blue</a> </td> <td align="left"> #0000FF</a></td> <td bgcolor="#0000FF"> </td> </tr> <tr> <td align="left"> BlueViolet</a> </td> <td align="left"> #8A2BE2</a></td> <td bgcolor="#8A2BE2"> </td> </tr> <tr> <td align="left"> Brown</a> </td> <td align="left"> #A52A2A</a></td> <td bgcolor="#A52A2A"> </td> </tr> <tr> <td align="left"> BurlyWood</a> </td> <td align="left"> #DEB887</a></td> <td bgcolor="#DEB887"> </td> </tr> <tr> <td align="left"> CadetBlue</a> </td> <td align="left"> #5F9EA0</a></td> <td bgcolor="#5F9EA0"> </td> </tr> <tr> <td align="left"> Chartreuse</a> </td> <td align="left"> #7FFF00</a></td> <td bgcolor="#7FFF00"> </td> </tr> <tr> <td align="left"> Chocolate</a> </td> <td align="left"> #D2691E</a></td> <td bgcolor="#D2691E"> </td> </tr> <tr> <td align="left"> Coral</a> </td> <td align="left"> #FF7F50</a></td> <td bgcolor="#FF7F50"> </td> </tr> <tr> <td align="left"> CornflowerBlue</a> </td> <td align="left"> #6495ED</a></td> <td bgcolor="#6495ED"> </td> </tr> <tr> <td align="left"> Cornsilk</a> </td> <td align="left"> #FFF8DC</a></td> <td bgcolor="#FFF8DC"> </td> </tr> <tr> <td align="left"> Crimson</a> </td> <td align="left"> #DC143C</a></td> <td bgcolor="#DC143C"> </td> </tr> <tr> <td align="left"> Cyan</a> </td> <td align="left"> #00FFFF</a></td> <td bgcolor="#00FFFF"> </td> </tr> <tr> <td align="left"> DarkBlue</a> </td> <td align="left"> #00008B</a></td> <td bgcolor="#00008B"> </td> </tr> <tr> <td align="left"> DarkCyan</a> </td> <td align="left"> #008B8B</a></td> <td bgcolor="#008B8B"> </td> </tr> <tr> <td align="left"> DarkGoldenRod</a> </td> <td align="left"> #B8860B</a></td> <td bgcolor="#B8860B"> </td> </tr> <tr> <td align="left"> DarkGray</a> </td> <td align="left"> #A9A9A9</a></td> <td bgcolor="#A9A9A9"> </td> </tr> <tr> <td align="left"> DarkGreen</a> </td> <td align="left"> #006400</a></td> <td bgcolor="#006400"> </td> </tr> <tr> <td align="left"> DarkKhaki</a> </td> <td align="left"> #BDB76B</a></td> <td bgcolor="#BDB76B"> </td> </tr> <tr> <td align="left"> DarkMagenta</a> </td> <td align="left"> #8B008B</a></td> <td bgcolor="#8B008B"> </td> </tr> <tr> <td align="left"> DarkOliveGreen</a> </td> <td align="left"> #556B2F</a></td> <td bgcolor="#556B2F"> </td> </tr> <tr> <td align="left"> DarkOrange</a> </td> <td align="left"> #FF8C00</a></td> <td bgcolor="#FF8C00"> </td> </tr> <tr> <td align="left"> DarkOrchid</a> </td> <td align="left"> #9932CC</a></td> <td bgcolor="#9932CC"> </td> </tr> <tr> <td align="left"> DarkRed</a> </td> <td align="left"> #8B0000</a></td> <td bgcolor="#8B0000"> </td> </tr> <tr> <td align="left"> DarkSalmon</a> </td> <td align="left"> #E9967A</a></td> <td bgcolor="#E9967A"> </td> </tr> <tr> <td align="left"> DarkSeaGreen</a> </td> <td align="left"> #8FBC8F</a></td> <td bgcolor="#8FBC8F"> </td> </tr> <tr> <td align="left"> DarkSlateBlue</a> </td> <td align="left"> #483D8B</a></td> <td bgcolor="#483D8B"> </td> </tr> <tr> <td align="left"> DarkSlateGray</a> </td> <td align="left"> #2F4F4F</a></td> <td bgcolor="#2F4F4F"> </td> </tr> <tr> <td align="left"> DarkTurquoise</a> </td> <td align="left"> #00CED1</a></td> <td bgcolor="#00CED1"> </td> </tr> <tr> <td align="left"> DarkViolet</a> </td> <td align="left"> #9400D3</a></td> <td bgcolor="#9400D3"> </td> </tr> <tr> <td align="left"> DeepPink</a> </td> <td align="left"> #FF1493</a></td> <td bgcolor="#FF1493"> </td> </tr> <tr> <td align="left"> DeepSkyBlue</a> </td> <td align="left"> #00BFFF</a></td> <td bgcolor="#00BFFF"> </td> </tr> <tr> <td align="left"> DimGray</a> </td> <td align="left"> #696969</a></td> <td bgcolor="#696969"> </td> </tr> <tr> <td align="left"> DodgerBlue</a> </td> <td align="left"> #1E90FF</a></td> <td bgcolor="#1E90FF"> </td> </tr> <tr> <td align="left"> FireBrick</a> </td> <td align="left"> #B22222</a></td> <td bgcolor="#B22222"> </td> </tr> <tr> <td align="left"> FloralWhite</a> </td> <td align="left"> #FFFAF0</a></td> <td bgcolor="#FFFAF0"> </td> </tr> <tr> <td align="left"> ForestGreen</a> </td> <td align="left"> #228B22</a></td> <td bgcolor="#228B22"> </td> </tr> <tr> <td align="left"> Fuchsia</a> </td> <td align="left"> #FF00FF</a></td> <td bgcolor="#FF00FF"> </td> </tr> <tr> <td align="left"> Gainsboro</a> </td> <td align="left"> #DCDCDC</a></td> <td bgcolor="#DCDCDC"> </td> </tr> <tr> <td align="left"> GhostWhite</a> </td> <td align="left"> #F8F8FF</a></td> <td bgcolor="#F8F8FF"> </td> </tr> <tr> <td align="left"> Gold</a> </td> <td align="left"> #FFD700</a></td> <td bgcolor="#FFD700"> </td> </tr> <tr> <td align="left"> GoldenRod</a> </td> <td align="left"> #DAA520</a></td> <td bgcolor="#DAA520"> </td> </tr> <tr> <td align="left"> Gray</a> </td> <td align="left"> #808080</a></td> <td bgcolor="#808080"> </td> </tr> <tr> <td align="left"> Green</a> </td> <td align="left"> #008000</a></td> <td bgcolor="#008000"> </td> </tr> <tr> <td align="left"> GreenYellow</a> </td> <td align="left"> #ADFF2F</a></td> <td bgcolor="#ADFF2F"> </td> </tr> <tr> <td align="left"> HoneyDew</a> </td> <td align="left"> #F0FFF0</a></td> <td bgcolor="#F0FFF0"> </td> </tr> <tr> <td align="left"> HotPink</a> </td> <td align="left"> #FF69B4</a></td> <td bgcolor="#FF69B4"> </td> </tr> <tr> <td align="left"> IndianRed </a> </td> <td align="left"> #CD5C5C</a></td> <td bgcolor="#CD5C5C"> </td> </tr> <tr> <td align="left"> Indigo </a> </td> <td align="left"> #4B0082</a></td> <td bgcolor="#4B0082"> </td> </tr> <tr> <td align="left"> Ivory</a> </td> <td align="left"> #FFFFF0</a></td> <td bgcolor="#FFFFF0"> </td> </tr> <tr> <td align="left"> Khaki</a> </td> <td align="left"> #F0E68C</a></td> <td bgcolor="#F0E68C"> </td> </tr> <tr> <td align="left"> Lavender</a> </td> <td align="left"> #E6E6FA</a></td> <td bgcolor="#E6E6FA"> </td> </tr> <tr> <td align="left"> LavenderBlush</a> </td> <td align="left"> #FFF0F5</a></td> <td bgcolor="#FFF0F5"> </td> </tr> <tr> <td align="left"> LawnGreen</a> </td> <td align="left"> #7CFC00</a></td> <td bgcolor="#7CFC00"> </td> </tr> <tr> <td align="left"> LemonChiffon</a> </td> <td align="left"> #FFFACD</a></td> <td bgcolor="#FFFACD"> </td> </tr> <tr> <td align="left"> LightBlue</a> </td> <td align="left"> #ADD8E6</a></td> <td bgcolor="#ADD8E6"> </td> </tr> <tr> <td align="left"> LightCoral</a> </td> <td align="left"> #F08080</a></td> <td bgcolor="#F08080"> </td> </tr> <tr> <td align="left"> LightCyan</a> </td> <td align="left"> #E0FFFF</a></td> <td bgcolor="#E0FFFF"> </td> </tr> <tr> <td align="left"> LightGoldenRodYellow</a> </td> <td align="left"> #FAFAD2</a></td> <td bgcolor="#FAFAD2"> </td> </tr> <tr> <td align="left"> LightGray</a> </td> <td align="left"> #D3D3D3</a></td> <td bgcolor="#D3D3D3"> </td> </tr> <tr> <td align="left"> LightGreen</a> </td> <td align="left"> #90EE90</a></td> <td bgcolor="#90EE90"> </td> </tr> <tr> <td align="left"> LightPink</a> </td> <td align="left"> #FFB6C1</a></td> <td bgcolor="#FFB6C1"> </td> </tr> <tr> <td align="left"> LightSalmon</a> </td> <td align="left"> #FFA07A</a></td> <td bgcolor="#FFA07A"> </td> </tr> <tr> <td align="left"> LightSeaGreen</a> </td> <td align="left"> #20B2AA</a></td> <td bgcolor="#20B2AA"> </td> </tr> <tr> <td align="left"> LightSkyBlue</a> </td> <td align="left"> #87CEFA</a></td> <td bgcolor="#87CEFA"> </td> </tr> <tr> <td align="left"> LightSlateGray</a> </td> <td align="left"> #778899</a></td> <td bgcolor="#778899"> </td> </tr> <tr> <td align="left"> LightSteelBlue</a> </td> <td align="left"> #B0C4DE</a></td> <td bgcolor="#B0C4DE"> </td> </tr> <tr> <td align="left"> LightYellow</a> </td> <td align="left"> #FFFFE0</a></td> <td bgcolor="#FFFFE0"> </td> </tr> <tr> <td align="left"> Lime</a> </td> <td align="left"> #00FF00</a></td> <td bgcolor="#00FF00"> </td> </tr> <tr> <td align="left"> LimeGreen</a> </td> <td align="left"> #32CD32</a></td> <td bgcolor="#32CD32"> </td> </tr> <tr> <td align="left"> Linen</a> </td> <td align="left"> #FAF0E6</a></td> <td bgcolor="#FAF0E6"> </td> </tr> <tr> <td align="left"> Magenta</a> </td> <td align="left"> #FF00FF</a></td> <td bgcolor="#FF00FF"> </td> </tr> <tr> <td align="left"> Maroon</a> </td> <td align="left"> #800000</a></td> <td bgcolor="#800000"> </td> </tr> <tr> <td align="left"> MediumAquaMarine</a> </td> <td align="left"> #66CDAA</a></td> <td bgcolor="#66CDAA"> </td> </tr> <tr> <td align="left"> MediumBlue</a> </td> <td align="left"> #0000CD</a></td> <td bgcolor="#0000CD"> </td> </tr> <tr> <td align="left"> MediumOrchid</a> </td> <td align="left"> #BA55D3</a></td> <td bgcolor="#BA55D3"> </td> </tr> <tr> <td align="left"> MediumPurple</a> </td> <td align="left"> #9370DB</a></td> <td bgcolor="#9370DB"> </td> </tr> <tr> <td align="left"> MediumSeaGreen</a> </td> <td align="left"> #3CB371</a></td> <td bgcolor="#3CB371"> </td> </tr> <tr> <td align="left"> MediumSlateBlue</a> </td> <td align="left"> #7B68EE</a></td> <td bgcolor="#7B68EE"> </td> </tr> <tr> <td align="left"> MediumSpringGreen</a> </td> <td align="left"> #00FA9A</a></td> <td bgcolor="#00FA9A"> </td> </tr> <tr> <td align="left"> MediumTurquoise</a> </td> <td align="left"> #48D1CC</a></td> <td bgcolor="#48D1CC"> </td> </tr> <tr> <td align="left"> MediumVioletRed</a> </td> <td align="left"> #C71585</a></td> <td bgcolor="#C71585"> </td> </tr> <tr> <td align="left"> MidnightBlue</a> </td> <td align="left"> #191970</a></td> <td bgcolor="#191970"> </td> </tr> <tr> <td align="left"> MintCream</a> </td> <td align="left"> #F5FFFA</a></td> <td bgcolor="#F5FFFA"> </td> </tr> <tr> <td align="left"> MistyRose</a> </td> <td align="left"> #FFE4E1</a></td> <td bgcolor="#FFE4E1"> </td> </tr> <tr> <td align="left"> Moccasin</a> </td> <td align="left"> #FFE4B5</a></td> <td bgcolor="#FFE4B5"> </td> </tr> <tr> <td align="left"> NavajoWhite</a> </td> <td align="left"> #FFDEAD</a></td> <td bgcolor="#FFDEAD"> </td> </tr> <tr> <td align="left"> Navy</a> </td> <td align="left"> #000080</a></td> <td bgcolor="#000080"> </td> </tr> <tr> <td align="left"> OldLace</a> </td> <td align="left"> #FDF5E6</a></td> <td bgcolor="#FDF5E6"> </td> </tr> <tr> <td align="left"> Olive</a> </td> <td align="left"> #808000</a></td> <td bgcolor="#808000"> </td> </tr> <tr> <td align="left"> OliveDrab</a> </td> <td align="left"> #6B8E23</a></td> <td bgcolor="#6B8E23"> </td> </tr> <tr> <td align="left"> Orange</a> </td> <td align="left"> #FFA500</a></td> <td bgcolor="#FFA500"> </td> </tr> <tr> <td align="left"> OrangeRed</a> </td> <td align="left"> #FF4500</a></td> <td bgcolor="#FF4500"> </td> </tr> <tr> <td align="left"> Orchid</a> </td> <td align="left"> #DA70D6</a></td> <td bgcolor="#DA70D6"> </td> </tr> <tr> <td align="left"> PaleGoldenRod</a> </td> <td align="left"> #EEE8AA</a></td> <td bgcolor="#EEE8AA"> </td> </tr> <tr> <td align="left"> PaleGreen</a> </td> <td align="left"> #98FB98</a></td> <td bgcolor="#98FB98"> </td> </tr> <tr> <td align="left"> PaleTurquoise</a> </td> <td align="left"> #AFEEEE</a></td> <td bgcolor="#AFEEEE"> </td> </tr> <tr> <td align="left"> PaleVioletRed</a> </td> <td align="left"> #DB7093</a></td> <td bgcolor="#DB7093"> </td> </tr> <tr> <td align="left"> PapayaWhip</a> </td> <td align="left"> #FFEFD5</a></td> <td bgcolor="#FFEFD5"> </td> </tr> <tr> <td align="left"> PeachPuff</a> </td> <td align="left"> #FFDAB9</a></td> <td bgcolor="#FFDAB9"> </td> </tr> <tr> <td align="left"> Peru</a> </td> <td align="left"> #CD853F</a></td> <td bgcolor="#CD853F"> </td> </tr> <tr> <td align="left"> Pink</a> </td> <td align="left"> #FFC0CB</a></td> <td bgcolor="#FFC0CB"> </td> </tr> <tr> <td align="left"> Plum</a> </td> <td align="left"> #DDA0DD</a></td> <td bgcolor="#DDA0DD"> </td> </tr> <tr> <td align="left"> PowderBlue</a> </td> <td align="left"> #B0E0E6</a></td> <td bgcolor="#B0E0E6"> </td> </tr> <tr> <td align="left"> Purple</a> </td> <td align="left"> #800080</a></td> <td bgcolor="#800080"> </td> </tr> <tr> <td align="left"> Red</a> </td> <td align="left"> #FF0000</a></td> <td bgcolor="#FF0000"> </td> </tr> <tr> <td align="left"> RosyBrown</a> </td> <td align="left"> #BC8F8F</a></td> <td bgcolor="#BC8F8F"> </td> </tr> <tr> <td align="left"> RoyalBlue</a> </td> <td align="left"> #4169E1</a></td> <td bgcolor="#4169E1"> </td> </tr> <tr> <td align="left"> SaddleBrown</a> </td> <td align="left"> #8B4513</a></td> <td bgcolor="#8B4513"> </td> </tr> <tr> <td align="left"> Salmon</a> </td> <td align="left"> #FA8072</a></td> <td bgcolor="#FA8072"> </td> </tr> <tr> <td align="left"> SandyBrown</a> </td> <td align="left"> #F4A460</a></td> <td bgcolor="#F4A460"> </td> </tr> <tr> <td align="left"> SeaGreen</a> </td> <td align="left"> #2E8B57</a></td> <td bgcolor="#2E8B57"> </td> </tr> <tr> <td align="left"> SeaShell</a> </td> <td align="left"> #FFF5EE</a></td> <td bgcolor="#FFF5EE"> </td> </tr> <tr> <td align="left"> Sienna</a> </td> <td align="left"> #A0522D</a></td> <td bgcolor="#A0522D"> </td> </tr> <tr> <td align="left"> Silver</a> </td> <td align="left"> #C0C0C0</a></td> <td bgcolor="#C0C0C0"> </td> </tr> <tr> <td align="left"> SkyBlue</a> </td> <td align="left"> #87CEEB</a></td> <td bgcolor="#87CEEB"> </td> </tr> <tr> <td align="left"> SlateBlue</a> </td> <td align="left"> #6A5ACD</a></td> <td bgcolor="#6A5ACD"> </td> </tr> <tr> <td align="left"> SlateGray</a> </td> <td align="left"> #708090</a></td> <td bgcolor="#708090"> </td> </tr> <tr> <td align="left"> Snow</a> </td> <td align="left"> #FFFAFA</a></td> <td bgcolor="#FFFAFA"> </td> </tr> <tr> <td align="left"> SpringGreen</a> </td> <td align="left"> #00FF7F</a></td> <td bgcolor="#00FF7F"> </td> </tr> <tr> <td align="left"> SteelBlue</a> </td> <td align="left"> #4682B4</a></td> <td bgcolor="#4682B4"> </td> </tr> <tr> <td align="left"> Tan</a> </td> <td align="left"> #D2B48C</a></td> <td bgcolor="#D2B48C"> </td> </tr> <tr> <td align="left"> Teal</a> </td> <td align="left"> #008080</a></td> <td bgcolor="#008080"> </td> </tr> <tr> <td align="left"> Thistle</a> </td> <td align="left"> #D8BFD8</a></td> <td bgcolor="#D8BFD8"> </td> </tr> <tr> <td align="left"> Tomato</a> </td> <td align="left"> #FF6347</a></td> <td bgcolor="#FF6347"> </td> </tr> <tr> <td align="left"> Turquoise</a> </td> <td align="left"> #40E0D0</a></td> <td bgcolor="#40E0D0"> </td> </tr> <tr> <td align="left"> Violet</a> </td> <td align="left"> #EE82EE</a></td> <td bgcolor="#EE82EE"> </td> </tr> <tr> <td align="left"> Wheat</a> </td> <td align="left"> #F5DEB3</a></td> <td bgcolor="#F5DEB3"> </td> </tr> <tr> <td align="left"> White</a> </td> <td align="left"> #FFFFFF</a></td> <td bgcolor="#FFFFFF"> </td> </tr> <tr> <td align="left"> WhiteSmoke</a> </td> <td align="left"> #F5F5F5</a></td> <td bgcolor="#F5F5F5"> </td> </tr> <tr> <td align="left"> Yellow</a> </td> <td align="left"> #FFFF00</a></td> <td bgcolor="#FFFF00"> </td> </tr> <tr> <td align="left"> YellowGreen</a> </td> <td align="left"> #9ACD32</a></td> <td bgcolor="#9ACD32"> </td> </tr> </table> body> </body> </html>
