.

sexta-feira

Crie Uma Página Com Uma Tabela de Cores em HTML Com Puro CSS

ACESSOS:
Deixe seu comentário

Nesta postagem compartilho com vocês este tutorial mostrando como criar esta página com cores em HTML com Puro CSS.


Veja uma demonstração:







Para criar a sua é muito simples....

Entre no "Painel" - "Nova Página" - Mude para de modo "Escrever" para modo "HTML" e cole o seguinte código:
<div class="post-body">
<div style="text-align: center;">
<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="480" id="col" width="480"> <param value="sameDomain" name="allowScriptAccess"><param value="http://www.2createawebsite.com/build/col.swf" name="movie"><param value="high" name="quality"><param value="#ffffff" name="bgcolor"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#e9fbe9" name="col" width="560" align="middle" height="480"> </object>   </div>
<table style="width: 100%px;"><tbody>
<tr style="background: lightgrey; color: black;"> <th width="50%">Nama Warna</th> <th width="50%">Kode Warna</th> </tr>
<tr style="background: AliceBlue; color: black;">  <td align="left">AliceBlue</td>  <td align="left">#F0F8FF</td>   </tr>
<tr style="background: AntiqueWhite; color: black;">  <td align="left">AntiqueWhite</td>  <td align="left">#FAEBD7</td>   </tr>
<tr style="background: Aqua; color: black;">  <td align="left">Aqua</td>  <td align="left">#00FFFF</td>   </tr>
<tr style="background: Aquamarine; color: black;">  <td align="left">Aquamarine</td>  <td align="left">#7FFFD4</td>   </tr>
<tr style="background: Azure; color: black;">  <td align="left">Azure</td>  <td align="left">#F0FFFF</td>   </tr>
<tr style="background: Beige; color: black;">  <td align="left">Beige</td>  <td align="left">#F5F5DC</td>   </tr>
<tr style="background: Bisque; color: black;">  <td align="left">Bisque</td>  <td align="left">#FFE4C4</td>   </tr>
<tr style="background: BlanchedAlmond; color: black;">  <td align="left">BlanchedAlmond</td>  <td align="left">#FFEBCD</td>   </tr>
<tr style="background: Blue; color: white;">  <td align="left">Blue</td>  <td align="left">#0000FF</td>   </tr>
<tr style="background: BlueViolet; color: white;">  <td align="left">BlueViolet</td>  <td align="left">#8A2BE2</td>   </tr>
<tr style="background: Brown; color: white;">  <td align="left">Brown</td>  <td align="left">#A52A2A</td>   </tr>
<tr style="background: BurlyWood; color: black;">  <td align="left">BurlyWood</td>  <td align="left">#DEB887</td>   </tr>
<tr style="background: CadetBlue; color: black;">  <td align="left">CadetBlue</td>  <td align="left">#5F9EA0</td>   </tr>
<tr style="background: Chartreuse; color: black;">  <td align="left">Chartreuse</td>  <td align="left">#7FFF00</td>   </tr>
<tr style="background: Chocolate; color: black;">  <td align="left">Chocolate</td>  <td align="left">#D2691E</td>   </tr>
<tr style="background: Coral; color: black;">  <td align="left">Coral</td>  <td align="left">#FF7F50</td>   </tr>
<tr style="background: CornflowerBlue; color: black;">  <td align="left">CornflowerBlue</td>  <td align="left">#6495ED</td>   </tr>
<tr style="background: Cornsilk; color: black;">  <td align="left">Cornsilk</td>  <td align="left">#FFF8DC</td>   </tr>
<tr style="background: Crimson; color: black;">  <td align="left">Crimson</td>  <td align="left">#DC143C</td>   </tr>
<tr style="background: Cyan; color: black;">  <td align="left">Cyan</td>  <td align="left">#00FFFF</td>   </tr>
<tr style="background: DarkBlue; color: white;">  <td align="left">DarkBlue</td>  <td align="left">#00008B</td>   </tr>
<tr style="background: DarkCyan; color: black;">  <td align="left">DarkCyan</td>  <td align="left">#008B8B</td>   </tr>
<tr style="background: DarkGoldenRod; color: black;">  <td align="left">DarkGoldenRod</td>  <td align="left">#B8860B</td>   </tr>
<tr style="background: DarkGray; color: black;">  <td align="left">DarkGray</td>  <td align="left">#A9A9A9</td>   </tr>
<tr style="background: DarkGreen; color: white;">  <td align="left">DarkGreen</td>  <td align="left">#006400</td>   </tr>
<tr style="background: DarkKhaki; color: black;">  <td align="left">DarkKhaki</td>  <td align="left">#BDB76B</td>   </tr>
<tr style="background: DarkMagenta; color: white;">  <td align="left">DarkMagenta</td>  <td align="left">#8B008B</td>   </tr>
<tr style="background: DarkOliveGreen; color: white;">  <td align="left">DarkOliveGreen</td>  <td align="left">#556B2F</td>   </tr>
<tr style="background: Darkorange; color: black;">  <td align="left">Darkorange</td>  <td align="left">#FF8C00</td>   </tr>
<tr style="background: DarkOrchid; color: black;">  <td align="left">DarkOrchid</td>  <td align="left">#9932CC</td>   </tr>
<tr style="background: DarkRed; color: white;">  <td align="left">DarkRed</td>  <td align="left">#8B0000</td>   </tr>
<tr style="background: DarkSalmon; color: black;">  <td align="left">DarkSalmon</td>  <td align="left">#E9967A</td>   </tr>
<tr style="background: DarkSeaGreen; color: black;">  <td align="left">DarkSeaGreen</td>  <td align="left">#8FBC8F</td>   </tr>
<tr style="background: DarkSlateBlue; color: white;">  <td align="left">DarkSlateBlue</td>  <td align="left">#483D8B</td>   </tr>
<tr style="background: DarkSlateGrey; color: white;">  <td align="left">DarkSlateGrey</td>  <td align="left">#2F4F4F</td>   </tr>
<tr style="background: DarkTurquoise; color: black;">  <td align="left">DarkTurquoise</td>  <td align="left">#00CED1</td>   </tr>
<tr style="background: DarkViolet; color: black;">  <td align="left">DarkViolet</td>  <td align="left">#9400D3</td>   </tr>
<tr style="background: DeepPink; color: black;">  <td align="left">DeepPink</td>  <td align="left">#FF1493</td>   </tr>
<tr style="background: DeepSkyBlue; color: black;">  <td align="left">DeepSkyBlue</td>  <td align="left">#00BFFF</td>   </tr>
<tr style="background: DimGray; color: black;">  <td align="left">DimGray</td>  <td align="left">#696969</td>   </tr>
<tr style="background: DodgerBlue; color: black;">  <td align="left">DodgerBlue</td>  <td align="left">#1E90FF</td>   </tr>
<tr style="background: FireBrick; color: black;">  <td align="left">FireBrick</td>  <td align="left">#B22222</td>   </tr>
<tr style="background: FloralWhite; color: black;">  <td align="left">FloralWhite</td>  <td align="left">#FFFAF0</td>   </tr>
<tr style="background: ForestGreen; color: black;">  <td align="left">ForestGreen</td>  <td align="left">#228B22</td>   </tr>
<tr style="background: Fuchsia; color: black;">  <td align="left">Fuchsia</td>  <td align="left">#FF00FF</td>   </tr>
<tr style="background: Gainsboro; color: black;">  <td align="left">Gainsboro</td>  <td align="left">#DCDCDC</td>   </tr>
<tr style="background: GhostWhite; color: black;">  <td align="left">GhostWhite</td>  <td align="left">#F8F8FF</td>   </tr>
<tr style="background: Gold; color: black;">  <td align="left">Gold</td>  <td align="left">#FFD700</td>   </tr>
<tr style="background: GoldenRod; color: black;">  <td align="left">GoldenRod</td>  <td align="left">#DAA520</td>   </tr>
<tr style="background: Gray; color: black;">  <td align="left">Gray</td>  <td align="left">#808080</td>   </tr>
<tr style="background: Green; color: black;">  <td align="left">Green</td>  <td align="left">#008000</td>   </tr>
<tr style="background: GreenYellow; color: black;">  <td align="left">GreenYellow</td>  <td align="left">#ADFF2F</td>   </tr>
<tr style="background: HoneyDew; color: black;">  <td align="left">HoneyDew</td>  <td align="left">#F0FFF0</td>   </tr>
<tr style="background: HotPink; color: black;">  <td align="left">HotPink</td>  <td align="left">#FF69B4</td>   </tr>
<tr style="background: IndianRed; color: black;">  <td align="left">IndianRed </td>  <td align="left">#CD5C5C</td>   </tr>
<tr style="background: Indigo; color: white;">  <td align="left">Indigo </td>  <td align="left">#4B0082</td>   </tr>
<tr style="background: Ivory; color: black;">  <td align="left">Ivory</td>  <td align="left">#FFFFF0</td>   </tr>
<tr style="background: Khaki; color: black;">  <td align="left">Khaki</td>  <td align="left">#F0E68C</td>   </tr>
<tr style="background: Lavender; color: black;">  <td align="left">Lavender</td>  <td align="left">#E6E6FA</td>   </tr>
<tr style="background: LavenderBlush; color: black;">  <td align="left">LavenderBlush</td>  <td align="left">#FFF0F5</td>   </tr>
<tr style="background: LawnGreen; color: black;">  <td align="left">LawnGreen</td>  <td align="left">#7CFC00</td>   </tr>
<tr style="background: LemonChiffon; color: black;">  <td align="left">LemonChiffon</td>  <td align="left">#FFFACD</td>   </tr>
<tr style="background: LightBlue; color: black;">  <td align="left">LightBlue</td>  <td align="left">#ADD8E6</td>   </tr>
<tr style="background: LightCoral; color: black;">  <td align="left">LightCoral</td>  <td align="left">#F08080</td>   </tr>
<tr style="background: LightCyan; color: black;">  <td align="left">LightCyan</td>  <td align="left">#E0FFFF</td>   </tr>
<tr style="background: LightGoldenRodYellow; color: black;">  <td align="left">LightGoldenRodYellow</td>  <td align="left">#FAFAD2</td>   </tr>
<tr style="background: LightGray; color: black;">  <td align="left">LightGray</td>  <td align="left">#D3D3D3</td>   </tr>
<tr style="background: LightGreen; color: black;">  <td align="left">LightGreen</td>  <td align="left">#90EE90</td>   </tr>
<tr style="background: LightPink; color: black;">  <td align="left">LightPink</td>  <td align="left">#FFB6C1</td>   </tr>
<tr style="background: LightSalmon; color: black;">  <td align="left">LightSalmon</td>  <td align="left">#FFA07A</td>   </tr>
<tr style="background: LightSeaGreen; color: black;">  <td align="left">LightSeaGreen</td>  <td align="left">#20B2AA</td>   </tr>
<tr style="background: LightSkyBlue; color: black;">  <td align="left">LightSkyBlue</td>  <td align="left">#87CEFA</td>   </tr>
<tr style="background: LightSlateGrey; color: black;">  <td align="left">LightSlateGrey</td>  <td align="left">#778899</td>   </tr>
<tr style="background: LightSteelBlue; color: black;">  <td align="left">LightSteelBlue</td>  <td align="left">#B0C4DE</td>   </tr>
<tr style="background: LightYellow; color: black;">  <td align="left">LightYellow</td>  <td align="left">#FFFFE0</td>   </tr>
<tr style="background: Lime; color: black;">  <td align="left">Lime</td>  <td align="left">#00FF00</td>   </tr>
<tr style="background: LimeGreen; color: black;">  <td align="left">LimeGreen</td>  <td align="left">#32CD32</td>   </tr>
<tr style="background: Linen; color: black;">  <td align="left">Linen</td>  <td align="left">#FAF0E6</td>   </tr>
<tr style="background: Magenta; color: black;">  <td align="left">Magenta</td>   <td align="left">#FF00FF</td>   </tr>
<tr style="background: Maroon; color: white;">  <td align="left">Maroon</td>  <td align="left">#800000</td>   </tr>
<tr style="background: MediumAquaMarine; color: black;">  <td align="left">MediumAquaMarine</td>  <td align="left">#66CDAA</td>   </tr>
<tr style="background: MediumBlue; color: white;">  <td align="left">MediumBlue</td>  <td align="left">#0000CD</td>   </tr>
<tr style="background: MediumOrchid; color: black;">  <td align="left">MediumOrchid</td>  <td align="left">#BA55D3</td>   </tr>
<tr style="background: MediumPurple; color: black;">  <td align="left">MediumPurple</td>  <td align="left">#9370D8</td>   </tr>
<tr style="background: MediumSeaGreen; color: black;">  <td align="left">MediumSeaGreen</td>  <td align="left">#3CB371</td>   </tr>
<tr style="background: MediumSlateBlue; color: black;">  <td align="left">MediumSlateBlue</td>  <td align="left">#7B68EE</td>   </tr>
<tr style="background: MediumSpringGreen; color: black;">  <td align="left">MediumSpringGreen</td>  <td align="left">#00FA9A</td>   </tr>
<tr style="background: MediumTurquoise; color: black;">  <td align="left">MediumTurquoise</td>  <td align="left">#48D1CC</td>   </tr>
<tr style="background: MediumVioletRed; color: black;">  <td align="left">MediumVioletRed</td>  <td align="left">#C71585</td>   </tr>
<tr style="background: MidnightBlue; color: white;">  <td align="left">MidnightBlue</td>  <td align="left">#191970</td>   </tr>
<tr style="background: MintCream; color: black;">  <td align="left">MintCream</td>  <td align="left">#F5FFFA</td>   </tr>
<tr style="background: MistyRose; color: black;">  <td align="left">MistyRose</td>  <td align="left">#FFE4E1</td>   </tr>
<tr style="background: Moccasin; color: black;">  <td align="left">Moccasin</td>  <td align="left">#FFE4B5</td>   </tr>
<tr style="background: NavajoWhite; color: black;">  <td align="left">NavajoWhite</td>  <td align="left">#FFDEAD</td>   </tr>
<tr style="background: Navy; color: white;">  <td align="left">Navy</td>  <td align="left">#000080</td>   </tr>
<tr style="background: OldLace; color: black;">  <td align="left">OldLace</td>  <td align="left">#FDF5E6</td>   </tr>
<tr style="background: Olive; color: black;">  <td align="left">Olive</td>  <td align="left">#808000</td>   </tr>
<tr style="background: OliveDrab; color: black;">  <td align="left">OliveDrab</td>  <td align="left">#6B8E23</td>   </tr>
<tr style="background: Orange; color: black;">  <td align="left">Orange</td>  <td align="left">#FFA500</td>   </tr>
<tr style="background: OrangeRed; color: black;">  <td align="left">OrangeRed</td>  <td align="left">#FF4500</td>   </tr>
<tr style="background: Orchid; color: black;">  <td align="left">Orchid</td>  <td align="left">#DA70D6</td>   </tr>
<tr style="background: PaleGoldenRod; color: black;">  <td align="left">PaleGoldenRod</td>  <td align="left">#EEE8AA</td>   </tr>
<tr style="background: PaleGreen; color: black;">  <td align="left">PaleGreen</td>  <td align="left">#98FB98</td>   </tr>
<tr style="background: PaleTurquoise; color: black;">  <td align="left">PaleTurquoise</td>  <td align="left">#AFEEEE</td>   </tr>
<tr style="background: PaleVioletRed; color: black;">  <td align="left">PaleVioletRed</td>  <td align="left">#D87093</td>   </tr>
<tr style="background: PapayaWhip; color: black;">  <td align="left">PapayaWhip</td>  <td align="left">#FFEFD5</td>   </tr>
<tr style="background: PeachPuff; color: black;">  <td align="left">PeachPuff</td>  <td align="left">#FFDAB9</td>   </tr>
<tr style="background: Peru; color: black;">  <td align="left">Peru</td>  <td align="left">#CD853F</td>   </tr>
<tr style="background: Pink; color: black;">  <td align="left">Pink</td>  <td align="left">#FFC0CB</td>   </tr>
<tr style="background: Plum; color: black;">  <td align="left">Plum</td>  <td align="left">#DDA0DD</td>   </tr>
<tr style="background: PowderBlue; color: black;">  <td align="left">PowderBlue</td>  <td align="left">#B0E0E6</td>   </tr>
<tr style="background: Purple; color: white;">  <td align="left">Purple</td>  <td align="left">#800080</td>   </tr>
<tr style="background: Red; color: black;">  <td align="left">Red</td>  <td align="left">#FF0000</td>   </tr>
<tr style="background: RosyBrown; color: black;">  <td align="left">RosyBrown</td>  <td align="left">#BC8F8F</td>   </tr>
<tr style="background: RoyalBlue; color: white;">  <td align="left">RoyalBlue</td>  <td align="left">#4169E1</td>   </tr>
<tr style="background: SaddleBrown; color: white;">  <td align="left">SaddleBrown</td>  <td align="left">#8B4513</td>   </tr>
<tr style="background: Salmon; color: black;">  <td align="left">Salmon</td>  <td align="left">#FA8072</td>   </tr>
<tr style="background: SandyBrown; color: black;">  <td align="left">SandyBrown</td>  <td align="left">#F4A460</td>   </tr>
<tr style="background: SeaGreen; color: black;">  <td align="left">SeaGreen</td>  <td align="left">#2E8B57</td>   </tr>
<tr style="background: SeaShell; color: black;">  <td align="left">SeaShell</td>  <td align="left">#FFF5EE</td>   </tr>
<tr style="background: Sienna; color: black;">  <td align="left">Sienna</td>  <td align="left">#A0522D</td>   </tr>
<tr style="background: Silver; color: black;">  <td align="left">Silver</td>  <td align="left">#C0C0C0</td>   </tr>
<tr style="background: SkyBlue; color: black;">  <td align="left">SkyBlue</td>  <td align="left">#87CEEB</td>   </tr>
<tr style="background: SlateBlue; color: black;">  <td align="left">SlateBlue</td>  <td align="left">#6A5ACD</td>   </tr>
<tr style="background: SlateGray; color: black;">  <td align="left">SlateGray</td>  <td align="left">#708090</td>   </tr>
<tr style="background: Snow; color: black;">  <td align="left">Snow</td>  <td align="left">#FFFAFA</td>   </tr>
<tr style="background: SpringGreen; color: black;">  <td align="left">SpringGreen</td>  <td align="left">#00FF7F</td>   </tr>
<tr style="background: SteelBlue; color: black;">  <td align="left">SteelBlue</td>  <td align="left">#4682B4</td>   </tr>
<tr style="background: Tan; color: black;">  <td align="left">Tan</td>  <td align="left">#D2B48C</td>   </tr>
<tr style="background: Teal; color: black;">  <td align="left">Teal</td>  <td align="left">#008080</td>   </tr>
<tr style="background: Thistle; color: black;">  <td align="left">Thistle</td>  <td align="left">#D8BFD8</td>   </tr>
<tr style="background: Tomato; color: black;">  <td align="left">Tomato</td>  <td align="left">#FF6347</td>   </tr>
<tr style="background: Turquoise; color: black;">  <td align="left">Turquoise</td>  <td align="left">#40E0D0</td>   </tr>
<tr style="background: Violet; color: black;">  <td align="left">Violet</td>  <td align="left">#EE82EE</td>   </tr>
<tr style="background: Wheat; color: black;">  <td align="left">Wheat</td>  <td align="left">#F5DEB3</td>   </tr>
<tr style="background: white; color: black;">  <td align="left">White</td>  <td align="left">#FFFFFF</td>   </tr>
<tr style="background: WhiteSmoke; color: black;">  <td align="left">WhiteSmoke</td>  <td align="left">#F5F5F5</td>   </tr>
<tr style="background: Yellow; color: black;">  <td align="left">Yellow</td>  <td align="left">#FFFF00</td>   </tr>
<tr style="background: YellowGreen; color: black;">  <td align="left">YellowGreen</td>  <td align="left">#9ACD32</td>   </tr>
<tr style="background: Black; color: white;">  <td align="left">Black</td>  <td align="left">#000000</td>   </tr>
</tbody></table>
<table style="width: 100%px;"><tbody>
<tr> <th style="background: lightgrey; color: black;">Nama Warna</th> <th style="background: lightgrey; color: black;">Kode Hex RGB</th> <th style="background: lightgrey; color: black;">Kode Desimal RGB</th> </tr>
<tr> <td colspan="3;" style="background: whitesmoke; color: slategrey; text-align: center;"><big><b>Warna dasar Merah</b></big></td> </tr>
<tr style="background: indianred; color: white;"> <td>Indianred</td> <td>#CD5C5C</td> <td>205 92 92</td> </tr>
<tr style="background: lightcoral; color: black;"> <td>Lightcoral</td> <td>#F08080</td> <td>240 128 128</td> </tr>
<tr style="background: salmon; color: black;"> <td>Salmon</td> <td>#FA8072</td> <td>250 128 114</td> </tr>
<tr style="background: darksalmon; color: black;"> <td>Darksalmon</td> <td>#E9967A</td> <td>233 150 122</td> </tr>
<tr style="background: lightsalmon; color: black;"> <td>Lightsalmon</td> <td>#FFA07A</td> <td>255 160 122</td> </tr>
<tr style="background: crimson; color: white; color: white;"> <td>Crimson</td> <td>#DC143C</td> <td>220 20 60</td> </tr>
<tr style="background: red; color: white;"> <td>Red</td> <td>#FF0000</td> <td>255 0 0</td> </tr>
<tr style="background: firebrick; color: white;"> <td>Firebrick</td> <td>#B22222</td> <td>178 34 34</td> </tr>
<tr style="background: darkred; color: white;"> <td>Darkred</td> <td>#8B0000</td> <td>139 0 0</td> </tr>
<tr> <td colspan="3;" style="background: whitesmoke; color: slategrey; text-align: center;"><big><b>Warna dasar Merah Jambu</b></big></td> </tr>
<tr style="background: pink; color: black;"> <td>Pink</td> <td>#FFC0CB</td> <td>255 192 203</td> </tr>
<tr style="background: lightpink; color: black;"> <td>Lightpink</td> <td>#FFB6C1</td> <td>255 182 193</td> </tr>
<tr style="background: hotpink; color: white;"> <td>Hotpink</td> <td>#FF69B4</td> <td>255 105 180</td> </tr>
<tr style="background: deeppink; color: white;"> <td>Deeppink</td> <td>#FF1493</td> <td>255 20 147</td> </tr>
<tr style="background: mediumvioletred; color: white;"> <td>MediumVioletRed</td> <td>#C71585</td> <td>199 21 133</td> </tr>
<tr style="background: palevioletred; color: white;"> <td>PaleVioletRed</td> <td>#DB7093</td> <td>219 112 147</td> </tr>
<tr style="background: white; color: black;"> <td colspan="3;" style="background: whitesmoke; color: slategrey; text-align: center;"><big><b>Warna dasar Oranye</b></big></td> </tr>
<tr style="background: lightsalmon; color: black;"> <td>Lightsalmon</td> <td>#FFA07A</td> <td>255 160 122</td> </tr>
<tr style="background: coral; color: white;"> <td>Coral</td> <td>#FF7F50</td> <td>255 127 80</td> </tr>
<tr style="background: tomato; color: white;"> <td>Tomato</td> <td>#FF6347</td> <td>255 99 71</td> </tr>
<tr style="background: orangered; color: white;"> <td>Orangered</td> <td>#FF4500</td> <td>255 69 0</td> </tr>
<tr style="background: darkorange; color: white;"> <td>Darkorange</td> <td>#FF8C00</td> <td>255 140 0</td> </tr>
<tr style="background: orange; color: white;"> <td>Orange</td> <td>#FFA500</td> <td>255 165 0</td> </tr>
<tr style="background: white; color: black;"> <td colspan="3;" style="background: whitesmoke; color: slategrey; text-align: center;"><big><b>Warna dasar Kuning</b></big></td> </tr>
<tr style="background: gold; color: black;"> <td>Gold</td> <td>#FFD700</td> <td>255 215 0</td> </tr>
<tr style="background: yellow; color: black;"> <td>Yellow</td> <td>#FFFF00</td> <td>255 255 0</td> </tr>
<tr style="background: lightyellow; color: black;"> <td>Lightyellow</td> <td>#FFFFE0</td> <td>255 255 224</td> </tr>
<tr style="background: lemonchiffon; color: black;"> <td>LemonChiffon</td> <td>#FFFACD</td> <td>255 250 205</td> </tr>
<tr style="background: lightgoldenrodyellow; color: black;"> <td>LightGoldenrodYellow</td> <td>#FAFAD2</td> <td>250 250 210</td> </tr>
<tr style="background: papayawhip; color: black;"> <td>PapayaWhip</td> <td>#FFEFD5</td> <td>255 239 213</td> </tr>
<tr style="background: moccasin; color: black;"> <td>Moccasin</td> <td>#FFE4B5</td> <td>255 228 181</td> </tr>
<tr style="background: peachpuff; color: black;"> <td>PeachPuff</td> <td>#FFDAB9</td> <td>255 218 185</td> </tr>
<tr style="background: palegoldenrod; color: black;"> <td>PaleGoldenrod</td> <td>#EEE8AA</td> <td>238 232 170</td> </tr>
<tr style="background: khaki; color: black;"> <td>Khaki</td> <td>#F0E68C</td> <td>240 230 140</td> </tr>
<tr style="background: darkkhaki; color: white;"> <td>DarkKhaki</td> <td>#BDB76B</td> <td>189 183 107</td> </tr>
<tr style="background: white; color: black;"> <td colspan="3;" style="background: whitesmoke; color: slategrey; text-align: center;"><big><b>Warna dasar Ungu</b></big></td> </tr>
<tr style="background: lavender; color: black;"> <td>Lavender</td> <td>#E6E6FA</td> <td>230 230 250</td> </tr>
<tr style="background: thistle; color: white;"> <td>Thistle</td> <td>#D8BFD8</td> <td>216 191 216</td> </tr>
<tr style="background: plum; color: white;"> <td>Plum</td> <td>#DDA0DD</td> <td>221 160 221</td> </tr>
<tr style="background: violet; color: white;"> <td>Violet</td> <td>#EE82EE</td> <td>238 130 238</td> </tr>
<tr style="background: orchid; color: white;"> <td>Orchid</td> <td>#DA70D6</td> <td>218 112 214</td> </tr>
<tr style="background: fuchsia; color: white;"> <td>Fuchsia</td> <td>#FF00FF</td> <td>255 0 255</td> </tr>
<tr style="background: magenta; color: white;"> <td>Magenta</td> <td>#FF00FF</td> <td>255 0 255</td> </tr>
<tr style="background: mediumorchid; color: white;"> <td>MediumOrchid</td> <td>#BA55D3</td> <td>186 85 211</td> </tr>
<tr style="background: mediumpurple; color: white;"> <td>MediumPurple</td> <td>#9370DB</td> <td>147 112 219</td> </tr>
<tr style="background: blueviolet; color: white;"> <td>BlueViolet</td> <td>#8A2BE2</td> <td>138 43 226</td> </tr>
<tr style="background: darkviolet; color: white;"> <td>DarkViolet</td> <td>#9400D3</td> <td>148 0 211</td> </tr>
<tr style="background: darkorchid; color: white;"> <td>DarkOrchid</td> <td>#9932CC</td> <td>153 50 204</td> </tr>
<tr style="background: darkmagenta; color: white;"> <td>DarkMagenta</td> <td>#8B008B</td> <td>139 0 139</td> </tr>
<tr style="background: purple; color: white;"> <td>Purple</td> <td>#800080</td> <td>128 0 128</td> </tr>
<tr style="background: indigo; color: white;"> <td>Indigo</td> <td>#4B0082</td> <td>75 0 130</td> </tr>
<tr style="background: slateblue; color: white;"> <td>SlateBlue</td> <td>#6A5ACD</td> <td>106 90 205</td> </tr>
<tr style="background: darkslateblue; color: white;"> <td>DarkSlateBlue</td> <td>#483D8B</td> <td>72 61 139</td> </tr>
<tr style="background: white; color: black;"> <td colspan="3;" style="background: whitesmoke; color: slategrey; text-align: center;"><big><b>Warna dasar Hijau</b></big></td> </tr>
<tr style="background: greenyellow; color: black;"> <td>GreenYellow</td> <td>#ADFF2F</td> <td>173 255 47</td> </tr>
<tr style="background: chartreuse; color: black;"> <td>Chartreuse</td> <td>#7FFF00</td> <td>127 255 0</td> </tr>
<tr style="background: lawngreen; color: black;"> <td>LawnGreen</td> <td>#7CFC00</td> <td>124 252 0</td> </tr>
<tr style="background: lime; color: black;"> <td>Lime</td> <td>#00FF00</td> <td>0 255 0</td> </tr>
<tr style="background: limegreen; color: black;"> <td>LimeGreen</td> <td>#32CD32</td> <td>50 205 50</td> </tr>
<tr style="background: palegreen; color: black;"> <td>PaleGreen</td> <td>#98FB98</td> <td>152 251 152</td> </tr>
<tr style="background: lightgreen; color: black;"> <td>LightGreen</td> <td>#90EE90</td> <td>144 238 144</td> </tr>
<tr style="background: mediumspringgreen; color: black;"> <td>MediumSpringGreen</td> <td>#00FA9A</td> <td>0 250 154</td> </tr>
<tr style="background: springgreen; color: black;"> <td>SpringGreen</td> <td>#00FF7F</td> <td>0 255 127</td> </tr>
<tr style="background: mediumseagreen; color: white;"> <td>MediumSeaGreen</td> <td>#3CB371</td> <td>60 179 113</td> </tr>
<tr style="background: seagreen; color: white;"> <td>SeaGreen</td> <td>#2E8B57</td> <td>46 139 87</td> </tr>
<tr style="background: forestgreen; color: white;"> <td>ForestGreen</td> <td>#228B22</td> <td>34 139 34</td> </tr>
<tr style="background: green; color: white;"> <td>Green</td> <td>#008000</td> <td>0 128 0</td> </tr>
<tr style="background: darkgreen; color: white;"> <td>DarkGreen</td> <td>#006400</td> <td>0 100 0</td> </tr>
<tr style="background: yellowgreen; color: white;"> <td>YellowGreen</td> <td>#9ACD32</td> <td>154 205 50</td> </tr>
<tr style="background: olivedrab; color: white;"> <td>OliveDrab</td> <td>#6B8E23</td> <td>107 142 35</td> </tr>
<tr style="background: olive; color: white;"> <td>Olive</td> <td>#808000</td> <td>128 128 0</td> </tr>
<tr style="background: darkolivegreen; color: white;"> <td>DarkOliveGreen</td> <td>#556B2F</td> <td>85 107 47</td> </tr>
<tr style="background: mediumaquamarine; color: black;"> <td>MediumAquamarine</td> <td>#66CDAA</td> <td>102 205 170</td> </tr>
<tr style="background: darkseagreen; color: white;"> <td>DarkSeaGreen</td> <td>#8FBC8F</td> <td>143 188 143</td> </tr>
<tr style="background: lightseagreen; color: white;"> <td>LightSeaGreen</td> <td>#20B2AA</td> <td>32 178 170</td> </tr>
<tr style="background: darkcyan; color: white;"> <td>DarkCyan</td> <td>#008B8B</td> <td>0 139 139</td> </tr>
<tr style="background: teal; color: white;"> <td>Teal</td> <td>#008080</td> <td>0 128 128</td> </tr>
<tr style="background: white; color: black;"> <td colspan="3;" style="background: whitesmoke; color: slategrey; text-align: center;"><big><b>Warna dasar Biru</b></big></td> </tr>
<tr style="background: cyan; color: black;"> <td>Cyan</td> <td>#00FFFF</td> <td>0 255 255</td> </tr>
<tr style="background: lightcyan; color: black;"> <td>LightCyan</td> <td>#E0FFFF</td> <td>224 255 255</td> </tr>
<tr style="background: paleturquoise; color: black;"> <td>PaleTurquoise</td> <td>#AFEEEE</td> <td>175 238 238</td> </tr>
<tr style="background: aquamarine; color: black;"> <td>Aquamarine</td> <td>#7FFFD4</td> <td>127 255 212</td> </tr>
<tr style="background: turquoise; color: black;"> <td>Turquoise</td> <td>#40E0D0</td> <td>64 224 208</td> </tr>
<tr style="background: mediumturquoise; color: white;"> <td>MediumTurquoise</td> <td>#48D1CC</td> <td>72 209 204</td> </tr>
<tr style="background: darkturquoise; color: white;"> <td>DarkTurquoise</td> <td>#00CED1</td> <td>0 206 209</td> </tr>
<tr style="background: cadetblue; color: white;"> <td>CadetBlue</td> <td>#5F9EA0</td> <td>95 158 160</td> </tr>
<tr style="background: steelblue; color: white;"> <td>SteelBlue</td> <td>#4682B4</td> <td>70 130 180</td> </tr>
<tr style="background: lightsteelblue; color: black;"> <td>LightSteelBlue</td> <td>#B0C4DE</td> <td>176 196 222</td> </tr>
<tr style="background: powderblue; color: black;"> <td>PowderBlue</td> <td>#B0E0E6</td> <td>176 224 230</td> </tr>
<tr style="background: lightblue; color: black;"> <td>LightBlue</td> <td>#ADD8E6</td> <td>173 216 230</td> </tr>
<tr style="background: skyblue; color: black;"> <td>SkyBlue</td> <td>#87CEEB</td> <td>135 206 235</td> </tr>
<tr style="background: lightskyblue; color: black;"> <td>LightSkyBlue</td> <td>#87CEFA</td> <td>135 206 250</td> </tr>
<tr style="background: deepskyblue; color: white;"> <td>DeepSkyBlue</td> <td>#00BFFF</td> <td>0 191 255</td> </tr>
<tr style="background: dodgerblue; color: white;"> <td>DodgerBlue</td> <td>#1E90FF</td> <td>30 144 255</td> </tr>
<tr style="background: cornflowerblue; color: white;"> <td>CornflowerBlue</td> <td>#6495ED</td> <td>100 149 237</td> </tr>
<tr style="background: mediumslateblue; color: white;"> <td>MediumSlateBlue</td> <td>#7B68EE</td> <td>123 104 238</td> </tr>
<tr style="background: royalblue; color: white;"> <td>RoyalBlue</td> <td>#4169E1</td> <td>65 105 225</td> </tr>
<tr style="background: blue; color: white;"> <td>Blue</td> <td>#0000FF</td> <td>0 0 255</td> </tr>
<tr style="background: mediumblue; color: white;"> <td>MediumBlue</td> <td>#0000CD</td> <td>0 0 205</td> </tr>
<tr style="background: darkblue; color: white;"> <td>DarkBlue</td> <td>#00008B</td> <td>0 0 139</td> </tr>
<tr style="background: navy; color: white;"> <td>Navy</td> <td>#000080</td> <td>0 0 128</td> </tr>
<tr style="background: midnightblue; color: white;"> <td>MidnightBlue</td> <td>#191970</td> <td>25 25 112</td> </tr>
<tr style="background: white; color: black;"> <td colspan="3;" style="background: whitesmoke; color: slategrey; text-align: center;"><big><b>Warna dasar Coklat</b></big></td> </tr>
<tr style="background: cornsilk; color: black;"> <td>Cornsilk</td> <td>#FFF8DC</td> <td>255 248 220</td> </tr>
<tr style="background: blanchedalmond; color: black;"> <td>BlanchedAlmond</td> <td>#FFEBCD</td> <td>255 235 205</td> </tr>
<tr style="background: bisque; color: black;"> <td>Bisque</td> <td>#FFE4C4</td> <td>255 228 196</td> </tr>
<tr style="background: navajowhite; color: black;"> <td>NavajoWhite</td> <td>#FFDEAD</td> <td>255 222 173</td> </tr>
<tr style="background: wheat; color: black;"> <td>Wheat</td> <td>#F5DEB3</td> <td>245 222 179</td> </tr>
<tr style="background: burlywood; color: white;"> <td>BurlyWood</td> <td>#DEB887</td> <td>222 184 135</td> </tr>
<tr style="background: tan; color: white;"> <td>Tan</td> <td>#D2B48C</td> <td>210 180 140</td> </tr>
<tr style="background: rosybrown; color: white;"> <td>RosyBrown</td> <td>#BC8F8F</td> <td>188 143 143</td> </tr>
<tr style="background: sandybrown; color: white;"> <td>SandyBrown</td> <td>#F4A460</td> <td>244 164 96</td> </tr>
<tr style="background: goldenrod; color: white;"> <td>Goldenrod</td> <td>#DAA520</td> <td>218 165 32</td> </tr>
<tr style="background: darkgoldenrod; color: white;"> <td>DarkGoldenrod</td> <td>#B8860B</td> <td>184 134 11</td> </tr>
<tr style="background: peru; color: white;"> <td>Peru</td> <td>#CD853F</td> <td>205 133 63</td> </tr>
<tr style="background: chocolate; color: white;"> <td>Chocolate</td> <td>#D2691E</td> <td>210 105 30</td> </tr>
<tr style="background: saddlebrown; color: white;"> <td>SaddleBrown</td> <td>#8B4513</td> <td>139 69 19</td> </tr>
<tr style="background: sienna; color: white;"> <td>Sienna</td> <td>#A0522D</td> <td>160 82 45</td> </tr>
<tr style="background: brown; color: white;"> <td>Brown</td> <td>#A52A2A</td> <td>165 42 42</td> </tr>
<tr style="background: maroon; color: white;"> <td>Maroon</td> <td>#800000</td> <td>128 0 0</td> </tr>
<tr style="background: white; color: black;"> <td colspan="3;" style="background: whitesmoke; color: slategrey; text-align: center;"><big><b>Warna dasar Putih</b></big></td> </tr>
<tr style="background: white; color: black;"> <td>White</td> <td>#FFFFFF</td> <td>255 255 255</td> </tr>
<tr style="background: snow; color: black;"> <td>Snow</td> <td>#FFFAFA</td> <td>255 250 250</td> </tr>
<tr style="background: honeydew; color: black;"> <td>Honeydew</td> <td>#F0FFF0</td> <td>240 255 240</td> </tr>
<tr style="background: mintcream; color: black;"> <td>MintCream</td> <td>#F5FFFA</td> <td>245 255 250</td> </tr>
<tr style="background: azure; color: black;"> <td>Azure</td> <td>#F0FFFF</td> <td>240 255 255</td> </tr>
<tr style="background: aliceblue; color: black;"> <td>AliceBlue</td> <td>#F0F8FF</td> <td>240 248 255</td> </tr>
<tr style="background: ghostwhite; color: black;"> <td>GhostWhite</td> <td>#F8F8FF</td> <td>248 248 255</td> </tr>
<tr style="background: whitesmoke; color: black;"> <td>WhiteSmoke</td> <td>#F5F5F5</td> <td>245 245 245</td> </tr>
<tr style="background: seashell; color: black;"> <td>Seashell</td> <td>#FFF5EE</td> <td>255 245 238</td> </tr>
<tr style="background: beige; color: black;"> <td>Beige</td> <td>#F5F5DC</td> <td>245 245 220</td> </tr>
<tr style="background: oldlace; color: black;"> <td>OldLace</td> <td>#FDF5E6</td> <td>253 245 230</td> </tr>
<tr style="background: floralwhite; color: black;"> <td>FloralWhite</td> <td>#FFFAF0</td> <td>255 250 240</td> </tr>
<tr style="background: ivory; color: black;"> <td>Ivory</td> <td>#FFFFF0</td> <td>255 255 240</td> </tr>
<tr style="background: antiquewhite; color: black;"> <td>AntiqueWhite</td> <td>#FAEBD7</td> <td>250 235 215</td> </tr>
<tr style="background: linen; color: black;"> <td>Linen</td> <td>#FAF0E6</td> <td>250 240 230</td> </tr>
<tr style="background: lavenderblush; color: black;"> <td>LavenderBlush</td> <td>#FFF0F5</td> <td>255 240 245</td> </tr>
<tr style="background: mistyrose; color: black;"> <td>MistyRose</td> <td>#FFE4E1</td> <td>255 228 225</td> </tr>
<tr style="background: white; color: black;"> <td colspan="3;" style="background: whitesmoke; color: slategrey; text-align: center;"><big><b>Warna dasar Abu-abu</b></big></td> </tr>
<tr style="background: gainsboro; color: black;"> <td>Gainsboro</td> <td>#DCDCDC</td> <td>220 220 220</td> </tr>
<tr style="background: lightgrey; color: black;"> <td>LightGrey</td> <td>#D3D3D3</td> <td>211 211 211</td> </tr>
<tr style="background: silver; color: black;"> <td>Silver</td> <td>#C0C0C0</td> <td>192 192 192</td> </tr>
<tr style="background: darkgray; color: black;"> <td>DarkGray</td> <td>#A9A9A9</td> <td>169 169 169</td> </tr>
<tr style="background: gray; color: white;"> <td>Gray</td> <td>#808080</td> <td>128 128 128</td> </tr>
<tr style="background: dimgray; color: white;"> <td>DimGray</td> <td>#696969</td> <td>105 105 105</td> </tr>
<tr style="background: lightslategray; color: white;"> <td>LightSlateGray</td> <td>#778899</td> <td>119 136 153</td> </tr>
<tr style="background: slategray; color: white;"> <td>SlateGray</td> <td>#708090</td> <td>112 128 144</td> </tr>
<tr style="background: darkslategray; color: white;"> <td>DarkSlateGray</td> <td>#2F4F4F</td> <td>47 79 79</td> </tr>
<tr style="background: black; color: white;"> <td>Black</td> <td>#000000</td> <td>0 0 0</td> </tr>
</tbody></table>
</div>                                                                                                                                                  <span style="font-family: Arial, Helvetica, sans-serif;">Gadget by <a href="http://dicashot.blogspot.com.br/" target="_blank">DicasHot</a></span></div>
Tendo colado o código, basta salvar e pronto!!!