跳至主要內容

颜色

Sankgao约 4843 字大约 16 分钟FrontendHTML5

颜色由 红色绿色蓝色 混合而成。

颜色值

颜色由一个 十六进制符号 来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。

每种颜色的 RGB 最小值是 0(十六进制:#00),RGB 最大值是 255(十六进制:#FF)。

使用 HEX 值 时需要在前面添加 # 号。例如:#F0F8FF 使用 RGB 值 时需要将数值放在 rgb() 中。例如:rgb(240, 248, 255)

以下表格给出了由三种颜色混合而成的具体效果:

演示
<table id="customers">
  <tr>
    <th>颜色</th>
    <th>颜色名</th>
    <th>HEX 值</th>
    <th>RGB 值</th>
  </tr>
  <tr>
    <td style="background-color:#000000"></td>
    <td>Black(黑色)</td>
    <td>#000000</td>
    <td>rgb(0, 0, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#FF0000"></td>
    <td>Red(红色)</td>
    <td>#FF0000</td>
    <td>rgb(255, 0, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#FFFF00"></td>
    <td>Yellow(黄色)</td>
    <td>#FFFF00</td>
    <td>rgb(255, 255, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#FFFFFF"></td>
    <td>White(白色)</td>
    <td>#FFFFFF</td>
    <td>rgb(255, 255, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#00FF00"></td>
    <td>Lime(青柠色)</td>
    <td>#00FF00</td>
    <td>rgb(0, 255, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#00FFFF"></td>
    <td>Cyan / Aqua(青色或水绿色)</td>
    <td>#00FFFF</td>
    <td>rgb(0, 255, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#0000FF"></td>
    <td>Blue(蓝色)</td>
    <td>#0000FF</td>
    <td>rgb(0, 0, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#FF00FF"></td>
    <td>Magenta / Fuchsia(洋红色或紫红色)</td>
    <td>#FF00FF</td>
    <td>rgb(255, 0, 255)</td>
  </tr>
</table>
#customers {
  border-collapse: collapse;
  width: 100%;
}

#customers td, 
#customers th {
  border: 1px solid #ddd;
  text-align:center;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers tr:hover {
  background-color: #ddd;
}

颜色名

大多数的浏览器都支持颜色名集合。

提示

仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:

aqua(水绿色)、black(黑色)、blue(蓝色)、fuchsia(紫红色)、gray(灰色)、green(绿色)、lime(青柠色)、maroon(栗色)、navy(海军蓝)、olive(橄榄色)、purple(紫色)、red(红色)、silver(银色)、teal(蓝绿色)、white(白色)、yellow(黄色)。

如果需要使用其它的颜色,需要使用十六进制的颜色值。

演示
<table id="customers">
  <tr>
    <th>颜色</th>
    <th>颜色名</th>
    <th>HEX 值</th>
    <th>RGB 值</th>
  </tr>
  <tr>
    <td style="background-color:#00FFFF"></td>
    <td>aqua(水绿色)</td>
    <td>#00FFFF</td>
    <td>rgb(0, 255, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#000000"></td>
    <td>black(黑色)</td>
    <td>#000000</td>
    <td>rgb(0, 0, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#0000FF"></td>
    <td>blue(蓝色)</td>
    <td>#0000FF</td>
    <td>rgb(0, 0, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#FF00FF"></td>
    <td>fuchsia(紫红色)</td>
    <td>#FF00FF</td>
    <td>rgb(255, 0, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#808080"></td>
    <td>gray(灰色)</td>
    <td>#808080</td>
    <td>rgb(128, 128, 128)</td>
  </tr>
  <tr>
    <td style="background-color:#008000"></td>
    <td>green(绿色)</td>
    <td>#008000</td>
    <td>rgb(0, 128, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#00FF00"></td>
    <td>lime(青柠色)</td>
    <td>#00FF00</td>
    <td>rgb(0, 255, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#800000"></td>
    <td>maroon(栗色)</td>
    <td>#800000</td>
    <td>rgb(128, 0, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#000080"></td>
    <td>navy(海军蓝)</td>
    <td>#000080</td>
    <td>rgb(0, 0, 128)</td>
  </tr>
  <tr>
    <td style="background-color:#808000"></td>
    <td>olive(橄榄色)</td>
    <td>#808000</td>
    <td>rgb(128, 128, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#800080"></td>
    <td>purple(紫色)</td>
    <td>#800080</td>
    <td>rgb(128, 0, 128)</td>
  </tr>
  <tr>
    <td style="background-color:#FF0000"></td>
    <td>red(红色)</td>
    <td>#FF0000</td>
    <td>rgb(255, 0, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#C0C0C0"></td>
    <td>silver(银色)</td>
    <td>#C0C0C0</td>
    <td>rgb(192, 192, 192)</td>
  </tr>
  <tr>
    <td style="background-color:#008080"></td>
    <td>teal(蓝绿色)</td>
    <td>#008080</td>
    <td>rgb(0, 128, 128)</td>
  </tr>
  <tr>
    <td style="background-color:#FFFFFF"></td>
    <td>white(白色)</td>
    <td>#FFFFFF</td>
    <td>rgb(255, 255, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#FFFF00"></td>
    <td>yellow(黄色)</td>
    <td>#FFFF00</td>
    <td>rgb(255, 255, 0)</td>
  </tr>
</table>
#customers {
  border-collapse: collapse;
  width: 100%;
}

#customers td, 
#customers th {
  border: 1px solid #ddd;
  text-align:center;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers tr:hover {
  background-color: #ddd;
}

Web 安全色

Web 安全颜色由 红色绿色蓝色(RGB)十六进制值 0, 33H, 66H, 99H, CCH, FFH 的组合形成。结果是 6*6*6=216 种颜色。

以前,当大多数计算机 仅支持 256 种颜色的时候,Web 安全色 作为 Web 标准被建议使用。其中的原因是,微软Mac 操作系统使用了 40 种不同的保留的固定系统颜色(双方大约各使用 20 种)。

如今越来越多的计算机有能力处理数百万种颜色,不必只使用这些颜色。

最初 web 安全色 被用来确保,当计算机使用 256 色调色板时,所有的计算机能够正确地显示所有的颜色。

演示
<table id="customers">
  <tr>
    <th>颜色</th>
    <th>HEX 值</th>
    <th>RGB 值</th>
  </tr>
  <tr>
    <td style="background-color:#000000"></td>
    <td>#000000</td>
    <td>rgb(0, 0, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#000033"></td>
    <td>#000033</td>
    <td>rgb(0, 0, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#000066"></td>
    <td>#000066</td>
    <td>rgb(0, 0, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#000099"></td>
    <td>#000099</td>
    <td>rgb(0, 0, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#0000CC"></td>
    <td>#0000CC</td>
    <td>rgb(0, 0, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#0000FF"></td>
    <td>#0000FF</td>
    <td>rgb(0, 0, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#003300"></td>
    <td>#003300</td>
    <td>rgb(0, 51, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#003333"></td>
    <td>#003333</td>
    <td>rgb(0, 51, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#003366"></td>
    <td>#003366</td>
    <td>rgb(0, 51, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#003399"></td>
    <td>#003399</td>
    <td>rgb(0, 51, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#0033CC"></td>
    <td>#0033CC</td>
    <td>rgb(0, 51, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#0033FF"></td>
    <td>#0033FF</td>
    <td>rgb(0, 51, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#006600"></td>
    <td>#006600</td>
    <td>rgb(0, 102, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#006633"></td>
    <td>#006633</td>
    <td>rgb(0, 102, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#006666"></td>
    <td>#006666</td>
    <td>rgb(0, 102, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#006699"></td>
    <td>#006699</td>
    <td>rgb(0, 102, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#0066CC"></td>
    <td>#0066CC</td>
    <td>rgb(0, 102, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#0066FF"></td>
    <td>#0066FF</td>
    <td>rgb(0, 102, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#009900"></td>
    <td>#009900</td>
    <td>rgb(0, 153, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#009933"></td>
    <td>#009933</td>
    <td>rgb(0, 153, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#009966"></td>
    <td>#009966</td>
    <td>rgb(0, 153, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#009999"></td>
    <td>#009999</td>
    <td>rgb(0, 153, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#0099CC"></td>
    <td>#0099CC</td>
    <td>rgb(0, 153, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#0099FF"></td>
    <td>#0099FF</td>
    <td>rgb(0, 153, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#00CC00"></td>
    <td>#00CC00</td>
    <td>rgb(0, 204, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#00CC33"></td>
    <td>#00CC33</td>
    <td>rgb(0, 204, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#00CC66"></td>
    <td>#00CC66</td>
    <td>rgb(0, 204, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#00CC99"></td>
    <td>#00CC99</td>
    <td>rgb(0, 204, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#00CCCC"></td>
    <td>#00CCCC</td>
    <td>rgb(0, 204, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#00CCFF"></td>
    <td>#00CCFF</td>
    <td>rgb(0, 204, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#00FF00"></td>
    <td>#00FF00</td>
    <td>rgb(0, 255, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#00FF33"></td>
    <td>#00FF33</td>
    <td>rgb(0, 255, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#00FF66"></td>
    <td>#00FF66</td>
    <td>rgb(0, 255, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#00FF99"></td>
    <td>#00FF99</td>
    <td>rgb(0, 255, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#00FFCC"></td>
    <td>#00FFCC</td>
    <td>rgb(0, 255, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#00FFFF"></td>
    <td>#00FFFF</td>
    <td>rgb(0, 255, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#330000"></td>
    <td>#330000</td>
    <td>rgb(51, 0, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#330033"></td>
    <td>#330033</td>
    <td>rgb(51, 0, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#330066"></td>
    <td>#330066</td>
    <td>rgb(51, 0, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#330099"></td>
    <td>#330099</td>
    <td>rgb(51, 0, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#3300CC"></td>
    <td>#3300CC</td>
    <td>rgb(51, 0, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#3300FF"></td>
    <td>#3300FF</td>
    <td>rgb(51, 0, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#333300"></td>
    <td>#333300</td>
    <td>rgb(51, 51, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#333333"></td>
    <td>#333333</td>
    <td>rgb(51, 51, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#333366"></td>
    <td>#333366</td>
    <td>rgb(51, 51, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#333399"></td>
    <td>#333399</td>
    <td>rgb(51, 51, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#3333CC"></td>
    <td>#3333CC</td>
    <td>rgb(51, 51, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#3333FF"></td>
    <td>#3333FF</td>
    <td>rgb(51, 51, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#336600"></td>
    <td>#336600</td>
    <td>rgb(51, 102, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#336633"></td>
    <td>#336633</td>
    <td>rgb(51, 102, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#336666"></td>
    <td>#336666</td>
    <td>rgb(51, 102, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#336699"></td>
    <td>#336699</td>
    <td>rgb(51, 102, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#3366CC"></td>
    <td>#3366CC</td>
    <td>rgb(51, 102, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#3366FF"></td>
    <td>#3366FF</td>
    <td>rgb(51, 102, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#339900"></td>
    <td>#339900</td>
    <td>rgb(51, 153, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#339933"></td>
    <td>#339933</td>
    <td>rgb(51, 153, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#339966"></td>
    <td>#339966</td>
    <td>rgb(51, 153, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#339999"></td>
    <td>#339999</td>
    <td>rgb(51, 153, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#3399CC"></td>
    <td>#3399CC</td>
    <td>rgb(51, 153, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#3399FF"></td>
    <td>#3399FF</td>
    <td>rgb(51, 153, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#33CC00"></td>
    <td>#33CC00</td>
    <td>rgb(51, 204, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#33CC33"></td>
    <td>#33CC33</td>
    <td>rgb(51, 204, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#33CC66"></td>
    <td>#33CC66</td>
    <td>rgb(51, 204, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#33CC99"></td>
    <td>#33CC99</td>
    <td>rgb(51, 204, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#33CCCC"></td>
    <td>#33CCCC</td>
    <td>rgb(51, 204, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#33CCFF"></td>
    <td>#33CCFF</td>
    <td>rgb(51, 204, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#33FF00"></td>
    <td>#33FF00</td>
    <td>rgb(51, 255, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#33FF33"></td>
    <td>#33FF33</td>
    <td>rgb(51, 255, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#33FF66"></td>
    <td>#33FF66</td>
    <td>rgb(51, 255, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#33FF99"></td>
    <td>#33FF99</td>
    <td>rgb(51, 255, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#33FFCC"></td>
    <td>#33FFCC</td>
    <td>rgb(51, 255, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#33FFFF"></td>
    <td>#33FFFF</td>
    <td>rgb(51, 255, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#660000"></td>
    <td>#660000</td>
    <td>rgb(102, 0, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#660033"></td>
    <td>#660033</td>
    <td>rgb(102, 0, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#660066"></td>
    <td>#660066</td>
    <td>rgb(102, 0, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#660099"></td>
    <td>#660099</td>
    <td>rgb(102, 0, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#6600CC"></td>
    <td>#6600CC</td>
    <td>rgb(102, 0, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#6600FF"></td>
    <td>#6600FF</td>
    <td>rgb(102, 0, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#663300"></td>
    <td>#663300</td>
    <td>rgb(102, 51, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#663333"></td>
    <td>#663333</td>
    <td>rgb(102, 51, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#663366"></td>
    <td>#663366</td>
    <td>rgb(102, 51, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#663399"></td>
    <td>#663399</td>
    <td>rgb(102, 51, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#6633CC"></td>
    <td>#6633CC</td>
    <td>rgb(102, 51, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#6633FF"></td>
    <td>#6633FF</td>
    <td>rgb(102, 51, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#666600"></td>
    <td>#666600</td>
    <td>rgb(102, 102, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#666633"></td>
    <td>#666633</td>
    <td>rgb(102, 102, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#666666"></td>
    <td>#666666</td>
    <td>rgb(102, 102, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#666699"></td>
    <td>#666699</td>
    <td>rgb(102, 102, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#6666CC"></td>
    <td>#6666CC</td>
    <td>rgb(102, 102, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#6666FF"></td>
    <td>#6666FF</td>
    <td>rgb(102, 102, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#669900"></td>
    <td>#669900</td>
    <td>rgb(102, 153, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#669933"></td>
    <td>#669933</td>
    <td>rgb(102, 153, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#669966"></td>
    <td>#669966</td>
    <td>rgb(102, 153, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#669999"></td>
    <td>#669999</td>
    <td>rgb(102, 153, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#6699CC"></td>
    <td>#6699CC</td>
    <td>rgb(102, 153, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#6699FF"></td>
    <td>#6699FF</td>
    <td>rgb(102, 153, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#66CC00"></td>
    <td>#66CC00</td>
    <td>rgb(102, 204, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#66CC33"></td>
    <td>#66CC33</td>
    <td>rgb(102, 204, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#66CC66"></td>
    <td>#66CC66</td>
    <td>rgb(102, 204, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#66CC99"></td>
    <td>#66CC99</td>
    <td>rgb(102, 204, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#66CCCC"></td>
    <td>#66CCCC</td>
    <td>rgb(102, 204, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#66CCFF"></td>
    <td>#66CCFF</td>
    <td>rgb(102, 255, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#66FF00"></td>
    <td>#66FF00</td>
    <td>rgb(102, 255, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#66FF33"></td>
    <td>#66FF33</td>
    <td>rgb(102, 255, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#66FF66"></td>
    <td>#66FF66</td>
    <td>rgb(102, 255, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#66FF99"></td>
    <td>#66FF99</td>
    <td>rgb(102, 255, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#66FFCC"></td>
    <td>#66FFCC</td>
    <td>rgb(102, 255, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#66FFFF"></td>
    <td>#66FFFF</td>
    <td>rgb(102, 255, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#990000"></td>
    <td>#990000</td>
    <td>rgb(153, 0, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#990033"></td>
    <td>#990033</td>
    <td>rgb(153, 0, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#990066"></td>
    <td>#990066</td>
    <td>rgb(153, 0, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#990099"></td>
    <td>#990099</td>
    <td>rgb(153, 0, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#9900CC"></td>
    <td>#9900CC</td>
    <td>rgb(153, 0, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#9900FF"></td>
    <td>#9900FF</td>
    <td>rgb(153, 0, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#993300"></td>
    <td>#993300</td>
    <td>rgb(153, 51, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#993333"></td>
    <td>#993333</td>
    <td>rgb(153, 51, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#993366"></td>
    <td>#993366</td>
    <td>rgb(153, 51, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#993399"></td>
    <td>#993399</td>
    <td>rgb(153, 51, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#9933CC"></td>
    <td>#9933CC</td>
    <td>rgb(153, 51, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#9933FF"></td>
    <td>#9933FF</td>
    <td>rgb(153, 51, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#996600"></td>
    <td>#996600</td>
    <td>rgb(153, 102, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#996633"></td>
    <td>#996633</td>
    <td>rgb(153, 102, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#996666"></td>
    <td>#996666</td>
    <td>rgb(153, 102, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#996699"></td>
    <td>#996699</td>
    <td>rgb(153, 102, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#9966CC"></td>
    <td>#9966CC</td>
    <td>rgb(153, 102, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#9966FF"></td>
    <td>#9966FF</td>
    <td>rgb(153, 102, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#999900"></td>
    <td>#999900</td>
    <td>rgb(153, 153, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#999933"></td>
    <td>#999933</td>
    <td>rgb(153, 153, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#999966"></td>
    <td>#999966</td>
    <td>rgb(153, 153, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#999999"></td>
    <td>#999999</td>
    <td>rgb(153, 153, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#9999CC"></td>
    <td>#9999CC</td>
    <td>rgb(153, 153, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#9999FF"></td>
    <td>#9999FF</td>
    <td>rgb(153, 153, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#99CC00"></td>
    <td>#99CC00</td>
    <td>rgb(153, 204, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#99CC33"></td>
    <td>#99CC33</td>
    <td>rgb(153, 204, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#99CC66"></td>
    <td>#99CC66</td>
    <td>rgb(153, 204, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#99CC99"></td>
    <td>#99CC99</td>
    <td>rgb(153, 204, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#99CCCC"></td>
    <td>#99CCCC</td>
    <td>rgb(153, 204, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#99CCFF"></td>
    <td>#99CCFF</td>
    <td>rgb(153, 204, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#99FF00"></td>
    <td>#99FF00</td>
    <td>rgb(153, 255, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#99FF33"></td>
    <td>#99FF33</td>
    <td>rgb(153, 255, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#99FF66"></td>
    <td>#99FF66</td>
    <td>rgb(153, 255, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#99FF99"></td>
    <td>#99FF99</td>
    <td>rgb(153, 255, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#99FFCC"></td>
    <td>#99FFCC</td>
    <td>rgb(153, 255, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#99FFFF"></td>
    <td>#99FFFF</td>
    <td>rgb(153, 255, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#CC0000"></td>
    <td>#CC0000</td>
    <td>rgb(204, 0, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#CC0033"></td>
    <td>#CC0033</td>
    <td>rgb(204, 0, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#CC0066"></td>
    <td>#CC0066</td>
    <td>rgb(204, 0, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#CC0099"></td>
    <td>#CC0099</td>
    <td>rgb(204, 0, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#CC00CC"></td>
    <td>#CC00CC</td>
    <td>rgb(204, 0, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#CC00FF"></td>
    <td>#CC00FF</td>
    <td>rgb(204, 0, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#CC3300"></td>
    <td>#CC3300</td>
    <td>rgb(204, 51, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#CC3333"></td>
    <td>#CC3333</td>
    <td>rgb(204, 51, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#CC3366"></td>
    <td>#CC3366</td>
    <td>rgb(204, 51, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#CC3399"></td>
    <td>#CC3399</td>
    <td>rgb(204, 51, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#CC33CC"></td>
    <td>#CC33CC</td>
    <td>rgb(204, 51, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#CC33FF"></td>
    <td>#CC33FF</td>
    <td>rgb(204, 51, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#CC6600"></td>
    <td>#CC6600</td>
    <td>rgb(204, 102, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#CC6633"></td>
    <td>#CC6633</td>
    <td>rgb(204, 102, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#CC6666"></td>
    <td>#CC6666</td>
    <td>rgb(204, 102, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#CC6699"></td>
    <td>#CC6699</td>
    <td>rgb(204, 102, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#CC66CC"></td>
    <td>#CC66CC</td>
    <td>rgb(204, 102, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#CC66FF"></td>
    <td>#CC66FF</td>
    <td>rgb(204, 102, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#CC9900"></td>
    <td>#CC9900</td>
    <td>rgb(204, 153, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#CC9933"></td>
    <td>#CC9933</td>
    <td>rgb(204, 153, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#CC9966"></td>
    <td>#CC9966</td>
    <td>rgb(204, 153, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#CC9999"></td>
    <td>#CC9999</td>
    <td>rgb(204, 153, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#CC99CC"></td>
    <td>#CC99CC</td>
    <td>rgb(204, 153, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#CC99FF"></td>
    <td>#CC99FF</td>
    <td>rgb(204, 153, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#CCCC00"></td>
    <td>#CCCC00</td>
    <td>rgb(204, 204, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#CCCC33"></td>
    <td>#CCCC33</td>
    <td>rgb(204, 204, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#CCCC66"></td>
    <td>#CCCC66</td>
    <td>rgb(204, 204, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#CCCC99"></td>
    <td>#CCCC99</td>
    <td>rgb(204, 204, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#CCCCCC"></td>
    <td>#CCCCCC</td>
    <td>rgb(204, 204, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#CCCCFF"></td>
    <td>#CCCCFF</td>
    <td>rgb(204, 204, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#CCFF00"></td>
    <td>#CCFF00</td>
    <td>rgb(204, 255, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#CCFF33"></td>
    <td>#CCFF33</td>
    <td>rgb(204, 255, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#CCFF66"></td>
    <td>#CCFF66</td>
    <td>rgb(204, 255, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#CCFF99"></td>
    <td>#CCFF99</td>
    <td>rgb(204, 255, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#CCFFCC"></td>
    <td>#CCFFCC</td>
    <td>rgb(204, 255, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#CCFFFF"></td>
    <td>#CCFFFF</td>
    <td>rgb(204, 255, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#FF0000"></td>
    <td>#FF0000</td>
    <td>rgb(255, 0, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#FF0033"></td>
    <td>#FF0033</td>
    <td>rgb(255, 0, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#FF0066"></td>
    <td>#FF0066</td>
    <td>rgb(255, 0, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#FF0099"></td>
    <td>#FF0099</td>
    <td>rgb(255, 0, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#FF00CC"></td>
    <td>#FF00CC</td>
    <td>rgb(255, 0, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#FF00FF"></td>
    <td>#FF00FF</td>
    <td>rgb(255, 0, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#FF3300"></td>
    <td>#FF3300</td>
    <td>rgb(255, 51, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#FF3333"></td>
    <td>#FF3333</td>
    <td>rgb(255, 51, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#FF3366"></td>
    <td>#FF3366</td>
    <td>rgb(255, 51, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#FF3399"></td>
    <td>#FF3399</td>
    <td>rgb(255, 51, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#FF33CC"></td>
    <td>#FF33CC</td>
    <td>rgb(255, 51, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#FF33FF"></td>
    <td>#FF33FF</td>
    <td>rgb(255, 51, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#FF6600"></td>
    <td>#FF6600</td>
    <td>rgb(255, 102, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#FF6633"></td>
    <td>#FF6633</td>
    <td>rgb(255, 102, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#FF6666"></td>
    <td>#FF6666</td>
    <td>rgb(255, 102, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#FF6699"></td>
    <td>#FF6699</td>
    <td>rgb(255, 102, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#FF66CC"></td>
    <td>#FF66CC</td>
    <td>rgb(255, 102, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#FF66FF"></td>
    <td>#FF66FF</td>
    <td>rgb(255, 102, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#FF9900"></td>
    <td>#FF9900</td>
    <td>rgb(255, 153, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#FF9933"></td>
    <td>#FF9933</td>
    <td>rgb(255, 153, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#FF9966"></td>
    <td>#FF9966</td>
    <td>rgb(255, 153, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#FF9999"></td>
    <td>#FF9999</td>
    <td>rgb(255, 153, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#FF99CC"></td>
    <td>#FF99CC</td>
    <td>rgb(255, 153, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#FF99FF"></td>
    <td>#FF99FF</td>
    <td>rgb(255, 153, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#FFCC00"></td>
    <td>#FFCC00</td>
    <td>rgb(255, 204, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#FFCC33"></td>
    <td>#FFCC33</td>
    <td>rgb(255, 204, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#FFCC66"></td>
    <td>#FFCC66</td>
    <td>rgb(255, 204, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#FFCC99"></td>
    <td>#FFCC99</td>
    <td>rgb(255, 204, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#FFCCCC"></td>
    <td>#FFCCCC</td>
    <td>rgb(255, 204, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#FFCCFF"></td>
    <td>#FFCCFF</td>
    <td>rgb(255, 204, 255)</td>
  </tr>
  <tr>
    <td style="background-color:#FFFF00"></td>
    <td>#FFFF00</td>
    <td>rgb(255, 255, 0)</td>
  </tr>
  <tr>
    <td style="background-color:#FFFF33"></td>
    <td>#FFFF33</td>
    <td>rgb(255, 255, 51)</td>
  </tr>
  <tr>
    <td style="background-color:#FFFF66"></td>
    <td>#FFFF66</td>
    <td>rgb(255, 255, 102)</td>
  </tr>
  <tr>
    <td style="background-color:#FFFF99"></td>
    <td>#FFFF99</td>
    <td>rgb(255, 255, 153)</td>
  </tr>
  <tr>
    <td style="background-color:#FFFFCC"></td>
    <td>#FFFFCC</td>
    <td>rgb(255, 255, 204)</td>
  </tr>
  <tr>
    <td style="background-color:#FFFFFF"></td>
    <td>#FFFFFF</td>
    <td>rgb(255, 255, 255)</td>
  </tr>
</table>
#customers {
  border-collapse: collapse;
  width: 100%;
}

#customers td, 
#customers th {
  border: 1px solid #ddd;
  text-align:center;
}

#customers tr:nth-child(even) {
  background-color: #f2f2f2;
}

#customers tr:hover {
  background-color: #ddd;
}