html5&css&js代码 018颜色表
- 一、代码
- 二、效果
- 三、解释
这段代码展示了一个基本的颜色表，方便参考使用，同时也应用了各种样式应用方式。
一、代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>编程笔记 html5&css&js 颜色表</title>
<meta charset="utf-8">
<style>
body {
background-color: #2c3e50;
color: #dddddd;
text-align: center;
}
table {
text-align: left;
border: 1px solid #000;
border-collapse: collapse;
/*整体居中*/
margin: 10px auto;
}
td {
border: 1px solid #000;
padding: 5px;
}
th {
font-size: 1.5em;
border: 2px solid #000;
padding: 15px;
}
th:first-child,
td:first-child {
width: 16%; /* 设置第一列宽度 */
}
th:nth-child(2),
td:nth-child(2) {
width: 16%; /* 设置第二列宽度为父容器宽度的20% */
}
th:nth-child(3),
td:nth-child(3) {
width: 16%; /* 设置第二列宽度为父容器宽度的20% */
}
th:nth-child(4),
td:nth-child(4) {
width: 52%; /* 设置第二列宽度为父容器宽度的20% */
}
hr {
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<!--在这个示例中，我将每行第一个<td>元素的英文颜色名称翻译成中文，并添加了一个新的<td>元素紧随其后，放置翻译后的中文内容。-->
<h1>HTML颜色</h1>
<h2>目前所有浏览器都支持以下颜色名。</h2>
<p>141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124)。下表列出了所有颜色的值，包括十六进制值。</p>
<p>本页面可能受到浏览器的限制，所以可能无法显示所有颜色。</p>
<p>请关闭Dark Reader等改变颜色的插件，以免影响颜色的真实性。</p>
<hr>
<h2>按颜色名排序</h2>
<table>
<tr>
<th>英文颜色名</th>
<th>中文颜色名</th>
<th>HEX</th>
<th>Color</th>
</tr>
<tr>
<td>AliceBlue</td>
<td>爱丽丝蓝</td>
<td>#F0F8FF</td>
<td style="background-color: #F0F8FF"> </td>
</tr>
<tr>
<td>AntiqueWhite</td>
<td>古董白</td>
<td>#FAEBD7</td>
<td style="background-color: #FAEBD7"> </td>
</tr>
<tr>
<td>Aqua</td>
<td>水色</td>
<td>#00FFFF</td>
<td style="background-color: #00FFFF"> </td>
</tr>
<tr>
<td>Aquamarine</td>
<td>海绿色</td>
<td>#7FFFD4</td>
<td style="background-color: #7FFFD4"> </td>
</tr>
<tr>
<td>Azure</td>
<td>天蓝色</td>
<td>#F0FFFF</td>
<td style="background-color: #F0FFFF"> </td>
</tr>
<tr>
<td>Beige</td>
<td>米色</td>
<td>#F5F5DC</td>
<td style="background-color: #F5F5DC"> </td>
</tr>
<tr>
<td>Bisque</td>
<td>深陶瓦色</td>
<td>#FFE4C4</td>
<td style="background-color: #FFE4C4"> </td>
</tr>
<tr>
<td>Black</td>
<td>黑色</td>
<td>#000000</td>
<td style="background-color: #000000"> </td>
</tr>
<tr>
<td>BlanchedAlmond</td>
<td>熟杏仁色</td>
<td>#FFEBCD</td>
<td style="background-color: #FFEBCD"> </td>
</tr>
<tr>
<td>Blue</td>
<td>蓝色</td>
<td>#0000FF</td>
<td style="background-color: #0000FF"> </td>
</tr>
<tr>
<td>BlueViolet</td>
<td>蓝紫色</td>
<td>#8A2BE2</td>
<td style="background-color: #8A2BE2"> </td>
</tr>
<tr>
<td>Cornsilk</td>
<td>米黄石色</td>
<td>#FFF8DC</td>
<td style="background-color: #FFF8DC"> </td>
</tr>
<tr>
<td>Crimson</td>
<td>深红色</td>
<td>#DC143C</td>
<td style="background-color: #DC143C"> </td>
</tr>
<tr>
<td>Cyan</td>
<td>青色</td>
<td>#00FFFF</td>
<td style="background-color: #00FFFF"> </td>
</tr>
<tr>
<td>DarkBlue</td>
<td>深蓝色</td>
<td>#00008B</td>
<td style="background-color: #00008B"> </td>
</tr>
<tr>
<td>DarkCyan</td>
<td>深青色</td>
<td>#008B8B</td>
<td style="background-color: #008B8B"> </td>
</tr>
<tr>
<td>DarkGoldenRod</td>
<td>深金棕色</td>
<td>#B8860B</td>
<td style="background-color: #B8860B"> </td>
</tr>
<tr>
<td>DarkGray</td>
<td>深灰色</td>
<td>#A9A9A9</td>
<td style="background-color: #A9A9A9"> </td>
</tr>
<tr>
<td>DarkGreen</td>
<td>深绿色</td>
<td>#006400</td>
<td style="background-color: #006400"> </td>
</tr>
<tr>
<td>DarkKhaki</td>
<td>深卡其布色</td>
<td>#BDB76B</td>
<td style="background-color: #BDB76B"> </td>
</tr>
<tr>
<td>DarkMagenta</td>
<td>深洋红色</td>
<td>#8B008B</td>
<td style="background-color: #8B008B"> </td>
</tr>
<tr>
<td>DarkOliveGreen</td>
<td>深橄榄绿色</td>
<td>#556B2F</td>
<td style="background-color: #556B2F"> </td>
</tr>
<tr>
<td>DarkOrange</td>
<td>深橙色</td>
<td>#FF8C00</td>
<td style="background-color: #FF8C00"> </td>
</tr>
<tr>
<td>DarkOrchid</td>
<td>深兰花紫</td>
<td>#9932CC</td>
<td style="background-color: #9932CC"> </td>
</tr>
<tr>
<td>DarkRed</td>
<td>深红色</td>
<td>#8B0000</td>
<td style="background-color: #8B0000"> </td>
</tr>
<tr>
<td>DarkSalmon</td>
<td>深鲑鱼色</td>
<td>#E9967A</td>
<td style="background-color: #E9967A"> </td>
</tr>
<tr>
<td>DarkSeaGreen</td>
<td>深海绿色</td>
<td>#8FBC8F</td>
<td style="background-color: #8FBC8F"> </td>
</tr>
<tr>
<td>DarkSlateBlue</td>
<td>深岩蓝色</td>
<td>#483D8B</td>
<td style="background-color: #483D8B"> </td>
</tr>
<tr>
<td>DarkSlateGray</td>
<td>深石板灰</td>
<td>#2F4F4F</td>
<td style="background-color: #2F4F4F"> </td>
</tr>
<tr>
<td>DarkTurquoise</td>
<td>深绿松石色</td>
<td>#00CED1</td>
<td style="background-color: #00CED1"> </td>
</tr>
<tr>
<td>DarkViolet</td>
<td>深紫罗兰色</td>
<td>#9400D3</td>
<td style="background-color: #9400D3"> </td>
</tr>
<tr>
<td>DeepPink</td>
<td>深粉红色</td>
<td>#FF1493</td>
<td style="background-color: #FF1493"> </td>
</tr>
<tr>
<td>DeepSkyBlue</td>
<td>深天蓝色</td>
<td>#00BFFF</td>
<td style="background-color: #00BFFF"> </td>
</tr>
<tr>
<td>DimGray</td>
<td>暗灰色</td>
<td>#696969</td>
<td style="background-color: #696969"> </td>
</tr>
<tr>
<td>DodgerBlue</td>
<td>道奇蓝</td>
<td>#1E90FF</td>
<td style="background-color: #1E90FF"> </td>
</tr>
<tr>
<td>FireBrick</td>
<td>砖红色</td>
<td>#B22222</td>
<td style="background-color: #B22222"> </td>
</tr>
<tr>
<td>FloralWhite</td>
<td>花白色</td>
<td>#FFFAF0</td>
<td style="background-color: #FFFAF0"> </td>
</tr>
<tr>
<td>ForestGreen</td>
<td>森林绿</td>
<td>#228B22</td>
<td style="background-color: #228B22"> </td>
</tr>
<tr>
<td>Fuchsia</td>
<td>紫红色</td>
<td>#FF00FF</td>
<td style="background-color: #FF00FF"> </td>
</tr>
<tr>
<td>Gainsboro</td>
<td>苍白灰</td>
<td>#DCDCDC</td>
<td style="background-color: #DCDCDC"> </td>
</tr>
<tr>
<td>GhostWhite</td>
<td>幽灵白</td>
<td>#F8F8FF</td>
<td style="background-color: #F8F8FF"> </td>
</tr>
<tr>
<td>Gold</td>
<td>金色</td>
<td>#FFD700</td>
<td style="background-color: #FFD700"> </td>
</tr>
<tr>
<td>GoldenRod</td>
<td>金菊色</td>
<td>#DAA520</td>
<td style="background-color: #DAA520"> </td>
</tr>
<tr>
<td>Gray</td>
<td>灰色</td>
<td>#808080</td>
<td style="background-color: #808080"> </td>
</tr>
<tr>
<td>Green</td>
<td>绿色</td>
<td>#008000</td>
<td style="background-color: #008000"> </td>
</tr>
<tr>
<td>GreenYellow</td>
<td>黄绿色</td>
<td>#ADFF2F</td>
<td style="background-color: #ADFF2F"> </td>
</tr>
<tr>
<td>HoneyDew</td>
<td>蜂蜜露</td>
<td>#F0FFF0</td>
<td style="background-color: #F0FFF0"> </td>
</tr>
<tr>
<td>HotPink</td>
<td>热粉色</td>
<td>#FF69B4</td>
<td style="background-color: #FF69B4"> </td>
</tr>
<tr>
<td>IndianRed</td>
<td>印度红</td>
<td>#CD5C5C</td>
<td style="background-color: #CD5C5C"> </td>
</tr>
<tr>
<td>Indigo</td>
<td>靛蓝色</td>
<td>#4B0082</td>
<td style="background-color: #4B0082"> </td>
</tr>
<tr>
<td>Ivory</td>
<td>象牙白</td>
<td>#FFFFF0</td>
<td style="background-color: #FFFFF0"> </td>
</tr>
<tr>
<td>Khaki</td>
<td>卡其色</td>
<td>#F0E68C</td>
<td style="background-color: #F0E68C"> </td>
</tr>
<tr>
<td>Lavender</td>
<td>薰衣草紫</td>
<td>#E6E6FA</td>
<td style="background-color: #E6E6FA"> </td>
</tr>
<tr>
<td>LavenderBlush</td>
<td>薰衣草红晕</td>
<td>#FFF0F5</td>
<td style="background-color: #FFF0F5"> </td>
</tr>
<tr>
<td>LawnGreen</td>
<td>草地绿</td>
<td>#7CFC00</td>
<td style="background-color: #7CFC00"> </td>
</tr>
<tr>
<td>LemonChiffon</td>
<td>柠檬绸色</td>
<td>#FFFACD</td>
<td style="background-color: #FFFACD"> </td>
</tr>
<tr>
<td>LightBlue</td>
<td>浅蓝色</td>
<td>#ADD8E6</td>
<td style="background-color: #ADD8E6"> </td>
</tr>
<tr>
<td>LightCoral</td>
<td>浅珊瑚色</td>
<td>#F08080</td>
<td style="background-color: #F08080"> </td>
</tr>
<tr>
<td>LightCyan</td>
<td>浅青色</td>
<td>#E0FFFF</td>
<td style="background-color: #E0FFFF"> </td>
</tr>
<tr>
<td>LightGoldenRodYellow</td>
<td>浅金菊黄色</td>
<td>#FAFAD2</td>
<td style="background-color: #FAFAD2"> </td>
</tr>
<tr>
<td>LightGray</td>
<td>浅灰色</td>
<td>#D3D3D3</td>
<td style="background-color: #D3D3D3"> </td>
</tr>
<tr>
<td>LightGreen</td>
<td>浅绿色</td>
<td>#90EE90</td>
<td style="background-color: #90EE90"> </td>
</tr>
<tr>
<td>LightPink</td>
<td>浅粉色</td>
<td>#FFB6C1</td>
<td style="background-color: #FFB6C1"> </td>
</tr>
<tr>
<td>LightSalmon</td>
<td>浅鲑鱼色</td>
<td>#FFA07A</td>
<td style="background-color: #FFA07A"> </td>
</tr>
<tr>
<td>LightSeaGreen</td>
<td>浅海绿色</td>
<td>#20B2AA</td>
<td style="background-color: #20B2AA"> </td>
</tr>
<tr>
<td>LightSkyBlue</td>
<td>浅天蓝色</td>
<td>#87CEFA</td>
<td style="background-color: #87CEFA"> </td>
</tr>
<tr>
<td>LightSlateGray</td>
<td>浅石板灰</td>
<td>#778899</td>
<td style="background-color: #778899"> </td>
</tr>
<tr>
<td>LightSteelBlue</td>
<td>浅钢青色</td>
<td>#B0C4DE</td>
<td style="background-color: #B0C4DE"> </td>
</tr>
<tr>
<td>LightYellow</td>
<td>浅黄色</td>
<td>#FFFFE0</td>
<td style="background-color: #FFFFE0"> </td>
</tr>
<tr>
<td>Lime</td>
<td>酸橙绿</td>
<td>#00FF00</td>
<td style="background-color: #00FF00"> </td>
</tr>
<tr>
<td>LimeGreen</td>
<td>柠檬绿</td>
<td>#32CD32</td>
<td style="background-color: #32CD32"> </td>
</tr>
<tr>
<td>Linen</td>
<td>亚麻色</td>
<td>#FAF0E6</td>
<td style="background-color: #FAF0E6"> </td>
</tr>
<tr>
<td>Magenta</td>
<td>品红色</td>
<td>#FF00FF</td>
<td style="background-color: #FF00FF"> </td>
</tr>
<tr>
<td>Maroon</td>
<td>栗色</td>
<td>#800000</td>
<td style="background-color: #800000"> </td>
</tr>
<tr>
<td>MediumAquaMarine</td>
<td>中度海蓝宝石色</td>
<td>#66CDAA</td>
<td style="background-color: #66CDAA"> </td>
</tr>
<tr>
<td>MediumBlue</td>
<td>中度蓝色</td>
<td>#0000CD</td>
<td style="background-color: #0000CD"> </td>
</tr>
<tr>
<td>MediumOrchid</td>
<td>中度兰花紫</td>
<td>#BA55D3</td>
<td style="background-color: #BA55D3"> </td>
</tr>
<tr>
<td>MediumPurple</td>
<td>中度紫色</td>
<td>#9370DB</td>
<td style="background-color: #9370DB"> </td>
</tr>
<tr>
<td>MediumSeaGreen</td>
<td>中度海洋绿</td>
<td>#3CB371</td>
<td style="background-color: #3CB371"> </td>
</tr>
<tr>
<td>MediumSlateBlue</td>
<td>中度板岩蓝</td>
<td>#7B68EE</td>
<td style="background-color: #7B68EE"> </td>
</tr>
<tr>
<td>MediumSpringGreen</td>
<td>中度春绿色</td>
<td>#00FA9A</td>
<td style="background-color: #00FA9A"> </td>
</tr>
<tr>
<td>MediumTurquoise</td>
<td>中度绿松石色</td>
<td>#48D1CC</td>
<td style="background-color: #48D1CC"> </td>
</tr>
<tr>
<td>MediumVioletRed</td>
<td>中度紫罗兰红色</td>
<td>#C71585</td>
<td style="background-color: #C71585"> </td>
</tr>
<tr>
<td>MidnightBlue</td>
<td>子夜蓝</td>
<td>#191970</td>
<td style="background-color: #191970"> </td>
</tr>
<tr>
<td>MintCream</td>
<td>薄荷奶油色</td>
<td>#F5FFFA</td>
<td style="background-color: #F5FFFA"> </td>
</tr>
<tr>
<td>MistyRose</td>
<td>雾玫瑰色</td>
<td>#FFE4E1</td>
<td style="background-color: #FFE4E1"> </td>
</tr>
<tr>
<td>Moccasin</td>
<td>鹿皮鞋色</td>
<td>#FFE4B5</td>
<td style="background-color: #FFE4B5"> </td>
</tr>
<tr>
<td>NavajoWhite</td>
<td>纳瓦霍白</td>
<td>#FFDEAD</td>
<td style="background-color: #FFDEAD"> </td>
</tr>
<tr>
<td>Navy</td>
<td>海军蓝</td>
<td>#000080</td>
<td style="background-color: #000080"> </td>
</tr>
<tr>
<td>OldLace</td>
<td>老式花边白</td>
<td>#FDF5E6</td>
<td style="background-color: #FDF5E6"> </td>
</tr>
<tr>
<td>Olive</td>
<td>橄榄色</td>
<td>#808000</td>
<td style="background-color: #808000"> </td>
</tr>
<tr>
<td>OliveDrab</td>
<td>橄榄褐</td>
<td>#6B8E23</td>
<td style="background-color: #6B8E23"> </td>
</tr>
<tr>
<td>Orange</td>
<td>橙色</td>
<td>#FFA500</td>
<td style="background-color: #FFA500"> </td>
</tr>
<tr>
<td>OrangeRed</td>
<td>橙红色</td>
<td>#FF4500</td>
<td style="background-color: #FF4500"> </td>
</tr>
<tr>
<td>Orchid</td>
<td>兰花紫</td>
<td>#DA70D6</td>
<td style="background-color: #DA70D6"> </td>
</tr>
<tr>
<td>PaleGoldenRod</td>
<td>苍白金菊色</td>
<td>#EEE8AA</td>
<td style="background-color: #EEE8AA"> </td>
</tr>
<tr>
<td>PaleGreen</td>
<td>苍白绿色</td>
<td>#98FB98</td>
<td style="background-color: #98FB98"> </td>
</tr>
<tr>
<td>PaleTurquoise</td>
<td>苍白绿松石色</td>
<td>#AFEEEE</td>
<td style="background-color: #AFEEEE"> </td>
</tr>
<tr>
<td>PaleVioletRed</td>
<td>苍白紫罗兰红色</td>
<td>#DB7093</td>
<td style="background-color: #DB7093"> </td>
</tr>
<tr>
<td>PapayaWhip</td>
<td>木瓜奶油色</td>
<td>#FFEFD5</td>
<td style="background-color: #FFEFD5"> </td>
</tr>
<tr>
<td>PeachPuff</td>
<td>桃皮色</td>
<td>#FFDAB9</td>
<td style="background-color: #FFDAB9"> </td>
</tr>
<tr>
<td>Peru</td>
<td>秘鲁色</td>
<td>#CD853F</td>
<td style="background-color: #CD853F"> </td>
</tr>
<tr>
<td>Pink</td>
<td>粉红色</td>
<td>#FFC0CB</td>
<td style="background-color: #FFC0CB"> </td>
</tr>
<tr>
<td>Plum</td>
<td>李紫色</td>
<td>#DDA0DD</td>
<td style="background-color: #DDA0DD"> </td>
</tr>
<tr>
<td>PowderBlue</td>
<td>雪青蓝</td>
<td>#B0E0E6</td>
<td style="background-color: #B0E0E6"> </td>
</tr>
<tr>
<td>Purple</td>
<td>紫色</td>
<td>#800080</td>
<td style="background-color: #800080"> </td>
</tr>
<tr>
<td>Red</td>
<td>红色</td>
<td>#FF0000</td>
<td style="background-color: #FF0000"> </td>
</tr>
<tr>
<td>RosyBrown</td>
<td>玫瑰棕色</td>
<td>#BC8F8F</td>
<td style="background-color: #BC8F8F"> </td>
</tr>
<tr>
<td>RoyalBlue</td>
<td>宝蓝色</td>
<td>#4169E1</td>
<td style="background-color: #4169E1"> </td>
</tr>
<tr>
<td>SaddleBrown</td>
<td>马鞍棕色</td>
<td>#8B4513</td>
<td style="background-color: #8B4513"> </td>
</tr>
<tr>
<td>Salmon</td>
<td>鲑鱼色</td>
<td>#FA8072</td>
<td style="background-color: #FA8072"> </td>
</tr>
<tr>
<td>SandyBrown</td>
<td>沙褐色</td>
<td>#F4A460</td>
<td style="background-color: #F4A460"> </td>
</tr>
<tr>
<td>SeaGreen</td>
<td>海洋绿色</td>
<td>#2E8B57</td>
<td style="background-color: #2E8B57"> </td>
</tr>
<tr>
<td>SeaShell</td>
<td>海贝壳色</td>
<td>#FFF5EE</td>
<td style="background-color: #FFF5EE"> </td>
</tr>
<tr>
<td>Sienna</td>
<td>赭石色</td>
<td>#A0522D</td>
<td style="background-color: #A0522D"> </td>
</tr>
<tr>
<td>Silver</td>
<td>银白色</td>
<td>#C0C0C0</td>
<td style="background-color: #C0C0C0"> </td>
</tr>
<tr>
<td>SkyBlue</td>
<td>天蓝色</td>
<td>#87CEEB</td>
<td style="background-color: #87CEEB"> </td>
</tr>
<tr>
<td>SlateBlue</td>
<td>石板蓝</td>
<td>#6A5ACD</td>
<td style="background-color: #6A5ACD"> </td>
</tr>
<tr>
<td>SlateGray</td>
<td>石板灰色</td>
<td>#708090</td>
<td style="background-color: #708090"> </td>
</tr>
<tr>
<td>Snow</td>
<td>雪白色</td>
<td>#FFFAFA</td>
<td style="background-color: #FFFAFA"> </td>
</tr>
<tr>
<td>SpringGreen</td>
<td>春绿色</td>
<td>#00FF7F</td>
<td style="background-color: #00FF7F"> </td>
</tr>
<tr>
<td>SteelBlue</td>
<td>钢青色</td>
<td>#4682B4</td>
<td style="background-color: #4682B4"> </td>
</tr>
<tr>
<td>Tan</td>
<td>茶色</td>
<td>#D2B48C</td>
<td style="background-color: #D2B48C"> </td>
</tr>
<tr>
<td>Teal</td>
<td>鸭绿色</td>
<td>#008080</td>
<td style="background-color: #008080"> </td>
</tr>
<tr>
<td>Thistle</td>
<td>蓟色</td>
<td>#D8BFD8</td>
<td style="background-color: #D8BFD8"> </td>
</tr>
<tr>
<td>Tomato</td>
<td>番茄红</td>
<td>#FF6347</td>
<td style="background-color: #FF6347"> </td>
</tr>
<tr>
<td>Turquoise</td>
<td>绿松石色</td>
<td>#40E0D0</td>
<td style="background-color: #40E0D0"> </td>
</tr>
<tr>
<td>Violet</td>
<td>紫罗兰色</td>
<td>#EE82EE</td>
<td style="background-color: #EE82EE"> </td>
</tr>
<tr>
<td>Wheat</td>
<td>小麦色</td>
<td>#F5DEB3</td>
<td style="background-color: #F5DEB3"> </td>
</tr>
<tr>
<td>White</td>
<td>白色</td>
<td>#FFFFFF</td>
<td style="background-color: #FFFFFF"> </td>
</tr>
<tr>
<td>WhiteSmoke</td>
<td>白烟色</td>
<td>#F5F5F5</td>
<td style="background-color: #F5F5F5"> </td>
</tr>
<tr>
<td>Yellow</td>
<td>黄色</td>
<td>#FFFF00</td>
<td style="background-color: #FFFF00"> </td>
</tr>
<tr>
<td>YellowGreen</td>
<td>黄绿色</td>
<td>#9ACD32</td>
<td style="background-color: #9ACD32"> </td>
</tr>
<!--background-color: #777799-->
</table>
</body>
<footer style="
text-align: center;
margin: 30px;
font-size: 1.5rem;
font-weight: bold;
color: #ffcc00;
">
HTML+CSS+JavaScript编程配套代码 作者：明月看潮生
</footer>
</html>
二、效果
三、解释
这段代码展示了一个基本的颜色表，方便参考使用。
