Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- Stephonce R. Morris | 2014 -->

<!-- Google Font -->
	<link href='https://fonts.googleapis.com/css?family=Lobster|Source+Code+Pro|Raleway' rel='stylesheet' type='text/css'>

<body id="top" contextmenu="menu">

<!-- Top Black Bar -->
	<div id="blkBar"></div>

	<header>
<!-- Logo -->
		<h1><abbr title="HyperText Markup Language">HTML</abbr> Color Names</h1>

<!-- ABC Links -->
		<ul>
			<li><a href="#a">A</a></li>
			<li><a href="#b">B</a></li>
			<li><a href="#c">C</a></li>
			<li><a href="#d">D</a></li>
			<li>E</li>
			<li><a href="#f">F</a></li>
			<li><a href="#g">G</a></li>
			<li><a href="#h">H</a></li>
			<li><a href="#i">I</a></li>
			<li>J</li>
			<li><a href="#k">K</a></li>
			<li><a href="#l">L</a></li>
			<li><a href="#m">M</a></li>
			<li><a href="#n">N</a></li>
			<li><a href="#o">O</a></li>
			<li><a href="#p">P</a></li>
			<li>Q</li>
			<li><a href="#r">R</a></li>
			<li><a href="#s">S</a></li>
			<li><a href="#t">T</a></li>
			<li>U</li>
			<li><a href="#v">V</a></li>
			<li><a href="#w">W</a></li>
			<li>X</li>
			<li><a href="#y">Y</a></li>
			<li>&amp;&nbsp;&nbsp;&nbsp;Z</li>
		</ul>

<!-- Text -->
		<p>Color Names Supported by All Browsers</p>
		<p>
			140 color names are defined in the <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheet">CSS</abbr> color specification (17 standard colors plus 123 more)
		</p>

		<p>
			<strong>Tip:</strong> The 17 standard colors are:
			<abbr title="Aqua - #00FFFF - rgb&lpar;0,255,255&rpar;">aqua</abbr>,
			<abbr title="Black - #000000 - rgb&lpar;0,0,0,&rpar;">black</abbr>,
			<abbr title="Blue - #0000FF - rgb&lpar;0,0,255,&rpar;">blue</abbr>,
			<abbr title="Fuchsia - #FF00FF - rgb&lpar;255,0,255,&rpar;">fuchsia</abbr>,
			<abbr title="Gray - #808080 - rgb&lpar;128,128,128,&rpar;">gray</abbr>,
			<abbr title="Green - #008000 - rgb&lpar;0,128,0,&rpar;">green</abbr>,
			<abbr title="Lime - #00FF00 - rgb&lpar;0,255,0,&rpar;">lime</abbr>,
			<abbr title="Maroon - #800000 - rgb&lpar;128,0,0,&rpar;">maroon</abbr>,
			<abbr title="Navy - #000080 - rgb&lpar;0,0,128,&rpar;">navy</abbr>,
			<abbr title="Olive - #808000 - rgb&lpar;128,128,0,&rpar;">olive</abbr>,
			<abbr title="Orange - #FFA500 - rgb&lpar;255,165,0,&rpar;">orange</abbr>,
			<abbr title="Purple - #800080 - rgb&lpar;128,0,128,&rpar;">purple</abbr>,
			<abbr title="Red - #FF0000 - rgb&lpar;255,0,0,&rpar;">red</abbr>,
			<abbr title="Silver - #C0C0C0 - rgb&lpar;192,192,192,&rpar;">silver</abbr>,
			<abbr title="Teal - #008080 - rgb&lpar;0,128,128,&rpar;">teal</abbr>,
			<abbr title="White - #FFFFFF - rgb&lpar;255,255,255,&rpar;">white</abbr>,
			&amp;
			<abbr title="Yellow - #FFFF00 - rgb&lpar;255,255,0,&rpar;">yellow</abbr>.
		</p>
	</header>

	<div id="content">

<!-- Color Swatches -->
	<table>
<!-- Alpha -->
		<tr title="AliceBlue" style="background: #F0F8FF" id="a">
				<td class="desc">AliceBlue</td>
				<td class="hex"><code>#F0F8FF</code></td>
				<td class="rgb"><code>rgb&lpar;240,248,255&rpar;</code></td>
		</tr>
		<tr title="AntiqueWhite" style="background: #FAEDB7">
				<td class="desc">AntiqueWhite</td>
				<td class="hex"><code>#FAEBD7</code></td>
				<td class="rgb"><code>rgb&lpar;250,237,183,&rpar;</code></td>
		</tr>
		<tr title="Aqua" style="background: #00FFFF">
				<td class="desc">Aqua</td>
				<td class="hex"><code>#00FFFF</code></td>
				<td class="rgb"><code>rgb&lpar;0,255,255,&rpar;</code></td>
		</tr>
		<tr title="Aquamarine" style="background: #7FFFD4">
				<td class="desc">Aquamarine</td>
				<td class="hex"><code>#7FFFD4</code></td>
				<td class="rgb"><code>rgb&lpar;127,255,212,&rpar;</code></td>
		</tr>
		<tr title="Azure" style="background: #F0FFFF">
				<td class="desc">Azure</td>
				<td class="hex"><code>#F0FFFF</code></td>
				<td class="rgb"><code>rgb&lpar;240,255,255,&rpar;</code></td>
		</tr>
<!-- Bravo -->
		<tr title="Beige" style="background: #F5F5DC" id="b">
				<td class="desc">Beige</td>
				<td class="hex"><code>#F5F5DC</code></td>
				<td class="rgb"><code>rgb&lpar;245,245,220,&rpar;</code></td>
		</tr>
		<tr title="Bisque" style="background: #FFE4C4">
				<td class="desc">Bisque</td>
				<td class="hex"><code>#FFE4C4</code></td>
				<td class="rgb"><code>rgb&lpar;255,228,196,&rpar;</code></td>
		</tr>
		<tr title="Black" style="background: #000000">
				<td class="desc">Black</td>
				<td class="hex"><code>#000000</code></td>
				<td class="rgb"><code>rgb&lpar;0,0,0,&rpar;</code></td>
		</tr>
		<tr title="BlanchedAlmond" style="background: #FFEBCD">
				<td class="desc">BlanchedAlmond</td>
				<td class="hex"><code>#FFEBCD</code></td>
				<td class="rgb"><code>rgb&lpar;255,235,205,&rpar;</code></td>
		</tr>
		<tr title="Blue" style="background: #0000FF">
				<td class="desc">Blue</td>
				<td class="hex"><code>#0000FF</code></td>
				<td class="rgb"><code>rgb&lpar;0,0,255,&rpar;</code></td>
		</tr>
		<tr title="BlueViolet" style="background: #8A2BE2">
				<td class="desc">BlueViolet</td>
				<td class="hex"><code>#8A2BE2</code></td>
				<td class="rgb"><code>rgb&lpar;138,43,226,&rpar;</code></td>
		</tr>
		<tr title="Brown" style="background: #A52A2A">
				<td class="desc">Brown</td>
				<td class="hex"><code>#A52A2A</code></td>
				<td class="rgb"><code>rgb&lpar;165,42,42,&rpar;</code></td>
		</tr>
		<tr title="BurlyWood" style="background: #DEB887">
				<td class="desc">BurlyWood</td>
				<td class="hex"><code>#DEB887</code></td>
				<td class="rgb"><code>rgb&lpar;222,184,135,&rpar;</code></td>
		</tr>
<!-- Charlie -->
		<tr title="CadetBlue" style="background: #5F9EA0" id="c">
				<td class="desc">CadetBlue</td>
				<td class="hex"><code>#5F9EA0</code></td>
				<td class="rgb"><code>rgb&lpar;95,158,160,&rpar;</code></td>
		</tr>
		<tr title="Chartreuse" style="background: #7FFF00">
				<td class="desc">Chartreuse</td>
				<td class="hex"><code>#7FFF00</code></td>
				<td class="rgb"><code>rgb&lpar;127,255,0,&rpar;</code></td>
		</tr>
		<tr title="Chocolate" style="background: #D2691E">
				<td class="desc">Chocolate</td>
				<td class="hex"><code>#D2691E</code></td>
				<td class="rgb"><code>rgb&lpar;210,105,30,&rpar;</code></td>
		</tr>
		<tr title="Coral" style="background: #FF7F50">
				<td class="desc">Coral</td>
				<td class="hex"><code>#FF7F50</code></td>
				<td class="rgb"><code>rgb&lpar;255,127,80,&rpar;</code></td>
		</tr>
		<tr title="CornflowerBlue" style="background: #6495ED">
				<td class="desc">CornflowerBlue</td>
				<td class="hex"><code>#6495ED</code></td>
				<td class="rgb"><code>rgb&lpar;100,149,237,&rpar;</code></td>
		</tr>
		<tr title="Cornsilk" style="background: #FFF8DC">
				<td class="desc">Cornsilk</td>
				<td class="hex"><code>#FFF8DC</code></td>
				<td class="rgb"><code>rgb&lpar;255,248,220,&rpar;</code></td>
		</tr>
		<tr title="Crimson" style="background: #DC143C">
				<td class="desc">Crimson</td>
				<td class="hex"><code>#DC143C</code></td>
				<td class="rgb"><code>rgb&lpar;220,20,60,&rpar;</code></td>
		</tr>
		<tr title="Cyan" style="background: #00FFFF">
				<td class="desc">Cyan</td>
				<td class="hex"><code>#00FFFF</code></td>
				<td class="rgb"><code>rgb&lpar;0,255,255,&rpar;</code></td>
		</tr>
<!-- Delta -->
		<tr title="DarkBlue" style="background: #00008B" id="d">
				<td class="desc">DarkBlue</td>
				<td class="hex"><code>#00008B</code></td>
				<td class="rgb"><code>rgb&lpar;0,0,139,&rpar;</code></td>
		</tr>
		<tr title="DarkCyan" style="background: #008B8B">
				<td class="desc">DarkCyan</td>
				<td class="hex"><code>#008B8B</code></td>
				<td class="rgb"><code>rgb&lpar;0,139,139,&rpar;</code></td>
		</tr>
		<tr title="DarkGoldenRod" style="background: #B8860B">
				<td class="desc">DarkGoldenRod</td>
				<td class="hex"><code>#B8860B</code></td>
				<td class="rgb"><code>rgb&lpar;184,134,11,&rpar;</code></td>
		</tr>
		<tr title="DarkGrey" style="background: #A9A9A9">
				<td class="desc">DarkGrey</td>
				<td class="hex"><code>#A9A9A9</code></td>
				<td class="rgb"><code>rgb&lpar;169,169,169,&rpar;</code></td>
		</tr>
		<tr title="DarkGreen" style="background: #006400">
				<td class="desc">DarkGreen</td>
				<td class="hex"><code>#006400</code></td>
				<td class="rgb"><code>rgb&lpar;0,100,0,&rpar;</code></td>
		</tr>
		<tr title="DarkKhaki" style="background: #BDB76B">
				<td class="desc">DarkKhaki</td>
				<td class="hex"><code>#BDB76B</code></td>
				<td class="rgb"><code>rgb&lpar;189,183,107,&rpar;</code></td>
		</tr>
		<tr title="DarkMagenta " style="background: #8B008B">
				<td class="desc">DarkMagenta </td>
				<td class="hex"><code>#8B008B</code></td>
				<td class="rgb"><code>rgb&lpar;139,0,139,&rpar;</code></td>
		</tr>
		<tr title="DarkOliveGreen " style="background: #556B2F">
				<td class="desc">DarkOliveGreen </td>
				<td class="hex"><code>#556B2F</code></td>
				<td class="rgb"><code>rgb&lpar;85,107,47,&rpar;</code></td>
		</tr>
		<tr title="DarkOrange" style="background: #FF8C00">
				<td class="desc">DarkOrange</td>
				<td class="hex"><code>#FF8C00</code></td>
				<td class="rgb"><code>rgb&lpar;255,140,0,&rpar;</code></td>
		</tr>
		<tr title="DarkOrchid" style="background: #9932CC">
				<td class="desc">DarkOrchid</td>
				<td class="hex"><code>#9932CC</code></td>
				<td class="rgb"><code>rgb&lpar;153,50,204,&rpar;</code></td>
		</tr>
		<tr title="DarkRed" style="background: #8B0000">
				<td class="desc">DarkRed</td>
				<td class="hex"><code>#8B0000</code></td>
				<td class="rgb"><code>rgb&lpar;139,0,0,&rpar;</code></td>
		</tr>
		<tr title="DarkSalmon" style="background: #E9967A">
				<td class="desc">DarkSalmon</td>
				<td class="hex"><code>#E9967A</code></td>
				<td class="rgb"><code>rgb&lpar;233,150,122,&rpar;</code></td>
		</tr>
		<tr title="DarkSeaGreen" style="background: #8FBC8F">
				<td class="desc">DarkSeaGreen</td>
				<td class="hex"><code>#8FBC8F</code></td>
				<td class="rgb"><code>rgb&lpar;143,188,143,&rpar;</code></td>
		</tr>
		<tr title="DarkSlateBlue" style="background: #483D8B">
				<td class="desc">DarkSlateBlue</td>
				<td class="hex"><code>#483D8B</code></td>
				<td class="rgb"><code>rgb&lpar;72,61,139,&rpar;</code></td>
		</tr>
		<tr title="DarkSlateGray" style="background: #2F4F4F">
				<td class="desc">DarkSlateGray</td>
				<td class="hex"><code>#2F4F4F</code></td>
				<td class="rgb"><code>rgb&lpar;47,79,79,&rpar;</code></td>
		</tr>
		<tr title="DarkTurquoise " style="background: #00CED1">
				<td class="desc">DarkTurquoise </td>
				<td class="hex"><code>#00CED1</code></td>
				<td class="rgb"><code>rgb&lpar;0,206,209,&rpar;</code></td>
		</tr>
		<tr title="DarkViolet" style="background: #8400D3">
				<td class="desc">DarkViolet</td>
				<td class="hex"><code>#8400D3</code></td>
				<td class="rgb"><code>rgb&lpar;148,0,211,&rpar;</code></td>
		</tr>
		<tr title="DeepPink" style="background: #FF1493">
				<td class="desc">DeepPink</td>
				<td class="hex"><code>#FF1493</code></td>
				<td class="rgb"><code>rgb&lpar;255,20,147,&rpar;</code></td>
		</tr>
		<tr title="DeepSkyBlue" style="background: #00BFFF">
				<td class="desc">DeepSkyBlue</td>
				<td class="hex"><code>#00BFFF</code></td>
				<td class="rgb"><code>rgb&lpar;0,191,255,&rpar;</code></td>
		</tr>
		<tr title="DimGray" style="background: #696969">
				<td class="desc">DimGray</td>
				<td class="hex"><code>#696969</code></td>
				<td class="rgb"><code>rgb&lpar;105,105,105,&rpar;</code></td>
		</tr>
		<tr title="DodgerBlue" style="background: #1E90FF">
				<td class="desc">DodgerBlue</td>
				<td class="hex"><code>#1E90FF</code></td>
				<td class="rgb"><code>rgb&lpar;30,144,255,&rpar;</code></td>
		</tr>
<!-- Foxtrot -->
		<tr title="FireBrick" style="background: #B22222" id="f">
				<td class="desc">FireBrick</td>
				<td class="hex"><code>#B22222</code></td>
				<td class="rgb"><code>rgb&lpar;178,34,34,&rpar;</code></td>
		</tr>
		<tr title="FloralWhite" style="background: #FFFAF0">
				<td class="desc">FloralWhite</td>
				<td class="hex"><code>#FFFAF0</code></td>
				<td class="rgb"><code>rgb&lpar;255,250,240,&rpar;</code></td>
		</tr>
		<tr title="ForestGreen" style="background: #228B22">
				<td class="desc">ForestGreen</td>
				<td class="hex"><code>#228B22</code></td>
				<td class="rgb"><code>rgb&lpar;34,139,34,&rpar;</code></td>
		</tr>
		<tr title="Fuchsia" style="background: #FF00FF">
				<td class="desc">Fuchsia</td>
				<td class="hex"><code>#FF00FF</code></td>
				<td class="rgb"><code>rgb&lpar;255,0,255,&rpar;</code></td>
		</tr>
<!-- Golf -->
		<tr title="Gainsboro" style="background: #DCDCDC" id="g">
				<td class="desc">Gainsboro</td>
				<td class="hex"><code>#DCDCDC</code></td>
				<td class="rgb"><code>rgb&lpar;220,220,220,&rpar;</code></td>
		</tr>
		<tr title="GhostWhite" style="background: #F8F8FF">
				<td class="desc">GhostWhite</td>
				<td class="hex"><code>#F8F8FF</code></td>
				<td class="rgb"><code>rgb&lpar;248,248,255,&rpar;</code></td>
		</tr>
		<tr title="Gold" style="background: #FFD700">
				<td class="desc">Gold</td>
				<td class="hex"><code>#FFD700</code></td>
				<td class="rgb"><code>rgb&lpar;255,215,0,&rpar;</code></td>
		</tr>
		<tr title="GoldenRod" style="background: #DAA520">
				<td class="desc">GoldenRod</td>
				<td class="hex"><code>#DAA520</code></td>
				<td class="rgb"><code>rgb&lpar;218,165,32,&rpar;</code></td>
		</tr>
		<tr title="Gray" style="background: #808080">
				<td class="desc">Gray</td>
				<td class="hex"><code>#808080</code></td>
				<td class="rgb"><code>rgb&lpar;128,128,128,&rpar;</code></td>
		</tr>
		<tr title="Green" style="background: #008000">
				<td class="desc">Green</td>
				<td class="hex"><code>#008000</code></td>
				<td class="rgb"><code>rgb&lpar;0,128,0,&rpar;</code></td>
		</tr>
		<tr title="GreenYellow" style="background: #ADFF2F">
				<td class="desc">GreenYellow</td>
				<td class="hex"><code>#ADFF2F</code></td>
				<td class="rgb"><code>rgb&lpar;173,255,47,&rpar;</code></td>
		</tr>
<!-- Hotel -->
	 	<tr title="HoneyDew" style="background: #F0FFF0" id="h">
				<td class="desc">HoneyDew</td>
				<td class="hex"><code>#F0FFF0</code></td>
				<td class="rgb"><code>rgb&lpar;240,255,240,&rpar;</code></td>
		</tr>
		<tr title="HotPink" style="background: #FF69B4">
				<td class="desc">HotPink</td>
				<td class="hex"><code>#FF69B4</code></td>
				<td class="rgb"><code>rgb&lpar;255,105,180,&rpar;</code></td>
		</tr>
<!-- India -->
		<tr title="IndianRed" style="background: #CD5C5C" id="i">
				<td class="desc">IndianRed</td>
				<td class="hex"><code>#CD5C5C</code></td>
				<td class="rgb"><code>rgb&lpar;205,92,92,&rpar;</code></td>
		</tr>
		<tr title="Indigo" style="background: #4B0082">
				<td class="desc">Indigo</td>
				<td class="hex"><code>#4B0082</code></td>
				<td class="rgb"><code>rgb&lpar;75,0,130,&rpar;</code></td>
		</tr>
		<tr title="Ivory" style="background: #FFFFF0">
				<td class="desc">Ivory</td>
				<td class="hex"><code>#FFFFF0</code></td>
				<td class="rgb"><code>rgb&lpar;255,255,240,&rpar;</code></td>
		</tr>
<!-- Kilo -->
		<tr title="Khaki" style="background: #F0E68C" id="k">
				<td class="desc">Khaki</td>
				<td class="hex"><code>#F0E68C</code></td>
				<td class="rgb"><code>rgb&lpar;240,230,140,&rpar;</code></td>
		</tr>
<!-- Lima -->
		<tr title="Lavender" style="background: #E6E6FA" id="l">
				<td class="desc">Lavender</td>
				<td class="hex"><code>#E6E6FA</code></td>
				<td class="rgb"><code>rgb&lpar;230,230,250,&rpar;</code></td>
		</tr>
		<tr title="LavenderBlush" style="background: #FFF0F5">
				<td class="desc">LavenderBlush</td>
				<td class="hex"><code>#FFF0F5</code></td>
				<td class="rgb"><code>rgb&lpar;255,240,245,&rpar;</code></td>
		</tr>
		<tr title="LawnGreen" style="background: #7CFC00">
				<td class="desc">LawnGreen</td>
				<td class="hex"><code>#7CFC00</code></td>
				<td class="rgb"><code>rgb&lpar;124,252,0,&rpar;</code></td>
		</tr>
		<tr title="LemonChiffon" style="background: #FFFACD">
				<td class="desc">LemonChiffon</td>
				<td class="hex"><code>#FFFACD</code></td>
				<td class="rgb"><code>rgb&lpar;255,250,205,&rpar;</code></td>
		</tr>
		<tr title="LightBlue" style="background: #ADD8E6">
				<td class="desc">LightBlue</td>
				<td class="hex"><code>#ADD8E6</code></td>
				<td class="rgb"><code>rgb&lpar;173,216,230,&rpar;</code></td>
		</tr>
		<tr title="LightCoral" style="background: #F08080">
				<td class="desc">LightCoral</td>
				<td class="hex"><code>#F08080</code></td>
				<td class="rgb"><code>rgb&lpar;240,128,128,&rpar;</code></td>
		</tr>
		<tr title="LightCyan" style="background: #E0FFFF">
				<td class="desc">LightCyan</td>
				<td class="hex"><code>#E0FFFF</code></td>
				<td class="rgb"><code>rgb&lpar;224,255,255,&rpar;</code></td>
		</tr>
		<tr title="LightGoldenRodYellow" style="background: #FAFAD2">
				<td class="desc lrg2">LightGoldenRodYellow</td>
				<td class="hex"><code>#FAFAD2</code></td>
				<td class="rgb"><code>rgb&lpar;250,250,210,&rpar;</code></td>
		</tr>
		<tr title="LightGrey" style="background: #D3D3D3">
				<td class="desc">LightGrey</td>
				<td class="hex"><code>#D3D3D3</code></td>
				<td class="rgb"><code>rgb&lpar;211,211,211,&rpar;</code></td>
		</tr>
		<tr title="LightGreen" style="background: #90EE90">
				<td class="desc">LightGreen</td>
				<td class="hex"><code>#90EE90</code></td>
				<td class="rgb"><code>rgb&lpar;144,238,144,&rpar;</code></td>
		</tr>
		<tr title="LightPink" style="background: #FFB6C1">
				<td class="desc">LightPink</td>
				<td class="hex"><code>#FFB6C1</code></td>
				<td class="rgb"><code>rgb&lpar;255,182,193,&rpar;</code></td>
		</tr>
		<tr title="LightSalmon" style="background: #FFA07A">
				<td class="desc">LightSalmon</td>
				<td class="hex"><code>#FFA07A</code></td>
				<td class="rgb"><code>rgb&lpar;255,160,122,&rpar;</code></td>
		</tr>
		<tr title="LightSeaGreen" style="background: #20B2AA">
				<td class="desc">LightSeaGreen</td>
				<td class="hex"><code>#20B2AA</code></td>
				<td class="rgb"><code>rgb&lpar;32,178,170,&rpar;</code></td>
		</tr>
		<tr title="LightSkyBlue" style="background: #87CEFA">
				<td class="desc">LightSkyBlue</td>
				<td class="hex"><code>#87CEFA</code></td>
				<td class="rgb"><code>rgb&lpar;135,206,250,&rpar;</code></td>
		</tr>
		<tr title="LightSlateGrey" style="background: #778899">
				<td class="desc">LightSlateGrey</td>
				<td class="hex"><code>#778899</code></td>
				<td class="rgb"><code>rgb&lpar;119,136,153,&rpar;</code></td>
		</tr>
		<tr title="LightSteelBlue" style="background: #B0C4DE">
				<td class="desc">LightSteelBlue</td>
				<td class="hex"><code>#B0C4DE</code></td>
				<td class="rgb"><code>rgb&lpar;176,196,222,&rpar;</code></td>
		</tr>
		<tr title="LightYellow" style="background: #FFFFE0">
				<td class="desc">LightYellow</td>
				<td class="hex"><code>#FFFFE0</code></td>
				<td class="rgb"><code>rgb&lpar;255,255,224,&rpar;</code></td>
		</tr>
		<tr title="Lime" style="background: #00FF00">
				<td class="desc">Lime</td>
				<td class="hex"><code>#00FF00</code></td>
				<td class="rgb"><code>rgb&lpar;0,255,0,&rpar;</code></td>
		</tr>
		<tr title="LimeGreen" style="background: #32CD32">
				<td class="desc">LimeGreen</td>
				<td class="hex"><code>#32CD32</code></td>
				<td class="rgb"><code>rgb&lpar;50,205,50,&rpar;</code></td>
		</tr>
		<tr title="Linen" style="background: #FAF0E6">
				<td class="desc">Linen</td>
				<td class="hex"><code>#FAF0E6</code></td>
				<td class="rgb"><code>rgb&lpar;250,240,230,&rpar;</code></td>
		</tr>
<!-- Mike -->
		<tr title="Magenta" style="background: #FF00FF" id="m">
				<td class="desc">Magenta</td>
				<td class="hex"><code>#FF00FF</code></td>
				<td class="rgb"><code>rgb&lpar;255,0,255,&rpar;</code></td>
		</tr>
		<tr title="Maroon" style="background: #800000">
				<td class="desc">Maroon</td>
				<td class="hex"><code>#800000</code></td>
				<td class="rgb"><code>rgb&lpar;128,0,0,&rpar;</code></td>
		</tr>
		<tr title="MediumAquaMarine" style="background: #66CDAA">
				<td class="desc lrg">MediumAquaMarine</td>
				<td class="hex"><code>#66CDAA</code></td>
				<td class="rgb"><code>rgb&lpar;102,205,170,&rpar;</code></td>
		</tr>
		<tr title="MediumBlue" style="background: #0000CD">
				<td class="desc">MediumBlue</td>
				<td class="hex"><code>#0000CD</code></td>
				<td class="rgb"><code>rgb&lpar;0,0,205,&rpar;</code></td>
		</tr>
		<tr title="MediumOrchid" style="background: #BA55D3">
				<td class="desc">MediumOrchid</td>
				<td class="hex"><code>#BA55D3</code></td>
				<td class="rgb"><code>rgb&lpar;186,85,211,&rpar;</code></td>
		</tr>
		<tr title="MediumPurple" style="background: #9370DB">
				<td class="desc">MediumPurple</td>
				<td class="hex"><code>#9370DB</code></td>
				<td class="rgb"><code>rgb&lpar;147,112,219,&rpar;</code></td>
		</tr>
		<tr title="MediumSeaGreen" style="background: #3CB371">
				<td class="desc">MediumSeaGreen</td>
				<td class="hex"><code>#3CB371</code></td>
				<td class="rgb"><code>rgb&lpar;60,179,113,&rpar;</code></td>
		</tr>
		<tr title="MediumSlateBlue" style="background: #7B68EE">
				<td class="desc">MediumSlateBlue</td>
				<td class="hex"><code>#7B68EE</code></td>
				<td class="rgb"><code>rgb&lpar;123,104,238,&rpar;</code></td>
		</tr>
		<tr title="MediumSpringGreen" style="background: #00FA9A">
				<td class="desc lrg">MediumSpringGreen</td>
				<td class="hex"><code>#00FA9A</code></td>
				<td class="rgb"><code>rgb&lpar;0,250,154,&rpar;</code></td>
		</tr>
		<tr title="MediumTurquoise" style="background: #48D1CC">
				<td class="desc">MediumTurquoise</td>
				<td class="hex"><code>#48D1CC</code></td>
				<td class="rgb"><code>rgb&lpar;72,209,204,&rpar;</code></td>
		</tr>
		<tr title="MediumVioletRed" style="background: #C71585">
				<td class="desc">MediumVioletRed</td>
				<td class="hex"><code>#C71585</code></td>
				<td class="rgb"><code>rgb&lpar;199,21,133,&rpar;</code></td>
		</tr>
		<tr title="MidnightBlue" style="background: #191970">
				<td class="desc">MidnightBlue</td>
				<td class="hex"><code>#191970</code></td>
				<td class="rgb"><code>rgb&lpar;25,25,112,&rpar;</code></td>
		</tr>
		<tr title="MintCream" style="background: #F5FFFA">
				<td class="desc">MintCream</td>
				<td class="hex"><code>#F5FFFA</code></td>
				<td class="rgb"><code>rgb&lpar;245,255,250,&rpar;</code></td>
		</tr>
		<tr title="MistyRose" style="background: #FFE4E1">
				<td class="desc">MistyRose</td>
				<td class="hex"><code>#FFE4E1</code></td>
				<td class="rgb"><code>rgb&lpar;255,228,225,&rpar;</code></td>
		</tr>
		<tr title="Moccasin" style="background: #FFE4B5">
				<td class="desc">Moccasin</td>
				<td class="hex"><code>#FFE4B5</code></td>
				<td class="rgb"><code>rgb&lpar;255,228,181,&rpar;</code></td>
		</tr>
<!-- November -->
		<tr title="NavajoWhite" style="background: #FFDEAD" id="n">
				<td class="desc">NavajoWhite</td>
				<td class="hex"><code>#FFDEAD</code></td>
				<td class="rgb"><code>rgb&lpar;255,222,173,&rpar;</code></td>
		</tr>
		<tr title="Navy" style="background: #000080">
				<td class="desc">Navy</td>
				<td class="hex"><code>#000080</code></td>
				<td class="rgb"><code>rgb&lpar;0,0,128,&rpar;</code></td>
		</tr>
<!-- Oscar -->
		<tr title="OldLace" style="background: #FDF5E6" id="o">
				<td class="desc">OldLace</td>
				<td class="hex"><code>#FDF5E6</code></td>
				<td class="rgb"><code>rgb&lpar;253,245,230,&rpar;</code></td>
		</tr>
		<tr title="Olive" style="background: #808000">
				<td class="desc">Olive</td>
				<td class="hex"><code>#808000</code></td>
				<td class="rgb"><code>rgb&lpar;128,128,0,&rpar;</code></td>
		</tr>
		<tr title="OliveDrab" style="background: #6B8E23">
				<td class="desc">OliveDrab</td>
				<td class="hex"><code>#6B8E23</code></td>
				<td class="rgb"><code>rgb&lpar;107,142,35,&rpar;</code></td>
		</tr>
		<tr title="Orange" style="background: #FFA500">
				<td class="desc">Orange</td>
				<td class="hex"><code>#FFA500</code></td>
				<td class="rgb"><code>rgb&lpar;255,165,0,&rpar;</code></td>
		</tr>
		<tr title="OrangeRed" style="background: #FF4500">
				<td class="desc">OrangeRed</td>
				<td class="hex"><code>#FF4500</code></td>
				<td class="rgb"><code>rgb&lpar;255,69,0,&rpar;</code></td>
		</tr>
		<tr title="Orchid" style="background: #DA70D6">
				<td class="desc">Orchid</td>
				<td class="hex"><code>#DA70D6</code></td>
				<td class="rgb"><code>rgb&lpar;218,112,214,&rpar;</code></td>
		</tr>
<!-- Papa -->
		<tr title="PaleGoldenRod" style="background: #EEE8AA" id="p">
				<td class="desc">PaleGoldenRod</td>
				<td class="hex"><code>#EEE8AA</code></td>
				<td class="rgb"><code>rgb&lpar;238,232,170,&rpar;</code></td>
		</tr>
		<tr title="PaleGreen" style="background: #98FB98">
				<td class="desc">PaleGreen</td>
				<td class="hex"><code>#98FB98</code></td>
				<td class="rgb"><code>rgb&lpar;152,251,152,&rpar;</code></td>
		</tr>
		<tr title="PaleTurquoise" style="background: #AFEEEE">
				<td class="desc">PaleTurquoise</td>
				<td class="hex"><code>#AFEEEE</code></td>
				<td class="rgb"><code>rgb&lpar;175,238,238,&rpar;</code></td>
		</tr>
		<tr title="PaleVioletRed" style="background: #DB7093">
				<td class="desc">PaleVioletRed</td>
				<td class="hex"><code>#DB7093</code></td>
				<td class="rgb"><code>rgb&lpar;219,112,147,&rpar;</code></td>
		</tr>
		<tr title="PapayaWhip" style="background: #FFEFD5">
				<td class="desc">PapayaWhip</td>
				<td class="hex"><code>#FFEFD5</code></td>
				<td class="rgb"><code>rgb&lpar;255,239,213,&rpar;</code></td>
		</tr>
		<tr title="PeachPuff" style="background: #FFDAB9">
				<td class="desc">PeachPuff</td>
				<td class="hex"><code>#FFDAB9</code></td>
				<td class="rgb"><code>rgb&lpar;255,218,185,&rpar;</code></td>
		</tr>
		<tr title="Peru" style="background: #CD853F">
				<td class="desc">Peru</td>
				<td class="hex"><code>#CD853F</code></td>
				<td class="rgb"><code>rgb&lpar;205,133,63,&rpar;</code></td>
		</tr>
		<tr title="Pink" style="background: #FFC0CB">
				<td class="desc">Pink</td>
				<td class="hex"><code>#FFC0CB</code></td>
				<td class="rgb"><code>rgb&lpar;255,192,203,&rpar;</code></td>
		</tr>
		<tr title="Plum" style="background: #DDA0DD">
				<td class="desc">Plum</td>
				<td class="hex"><code>#DDA0DD</code></td>
				<td class="rgb"><code>rgb&lpar;221,160,221,&rpar;</code></td>
		</tr>
		<tr title="PowderBlue" style="background: #B0E0E6">
				<td class="desc">PowderBlue</td>
				<td class="hex"><code>#B0E0E6</code></td>
				<td class="rgb"><code>rgb&lpar;176,224,230,&rpar;</code></td>
		</tr>
		<tr title="Purple" style="background: #800080">
				<td class="desc">Purple</td>
				<td class="hex"><code>#800080</code></td>
				<td class="rgb"><code>rgb&lpar;128,0,128,&rpar;</code></td>
		</tr>
<!-- Romeo -->
		<tr title="Red" style="background: #FF0000" id="r">
				<td class="desc">Red</td>
				<td class="hex"><code>#FF0000</code></td>
				<td class="rgb"><code>rgb&lpar;255,0,0,&rpar;</code></td>
		</tr>
		<tr title="RosyBrown" style="background: #BC8F8F">
				<td class="desc">RosyBrown</td>
				<td class="hex"><code>#BC8F8F</code></td>
				<td class="rgb"><code>rgb&lpar;188,143,143,&rpar;</code></td>
		</tr>
		<tr title="RoyalBlue" style="background: #4169E1">
				<td class="desc">RoyalBlue</td>
				<td class="hex"><code>#4169E1</code></td>
				<td class="rgb"><code>rgb&lpar;65,105,225,&rpar;</code></td>
		</tr>
<!-- Sierra -->
		<tr title="SaddleBrown" style="background: #8B4513" id="s">
				<td class="desc">SaddleBrown</td>
				<td class="hex"><code>#8B4513</code></td>
				<td class="rgb"><code>rgb&lpar;139,69,19,&rpar;</code></td>
		</tr>
		<tr title="Salmon" style="background: #FA8072">
				<td class="desc">Salmon</td>
				<td class="hex"><code>#FA8072</code></td>
				<td class="rgb"><code>rgb&lpar;250,128,114,&rpar;</code></td>
		</tr>
		<tr title="SandyBrown" style="background: #F4A460">
				<td class="desc">SandyBrown</td>
				<td class="hex"><code>#F4A460</code></td>
				<td class="rgb"><code>rgb&lpar;244,164,96,&rpar;</code></td>
		</tr>
		<tr title="SeaGreen" style="background: #2E8B57">
				<td class="desc">SeaGreen</td>
				<td class="hex"><code>#2E8B57</code></td>
				<td class="rgb"><code>rgb&lpar;46,139,87,&rpar;</code></td>
		</tr>
		<tr title="SeaShell" style="background: #FFF5EE">
				<td class="desc">SeaShell</td>
				<td class="hex"><code>#FFF5EE</code></td>
				<td class="rgb"><code>rgb&lpar;255,245,238,&rpar;</code></td>
		</tr>
		<tr title="Sienna" style="background: #A0522D">
				<td class="desc">Sienna</td>
				<td class="hex"><code>#A0522D</code></td>
				<td class="rgb"><code>rgb&lpar;160,82,45,&rpar;</code></td>
		</tr>
		<tr title="Silver" style="background: #C0C0C0">
				<td class="desc">Silver</td>
				<td class="hex"><code>#C0C0C0</code></td>
				<td class="rgb"><code>rgb&lpar;192,192,192,&rpar;</code></td>
		</tr>
		<tr title="SkyBlue" style="background: #87CEEB">
				<td class="desc">SkyBlue</td>
				<td class="hex"><code>#87CEEB</code></td>
				<td class="rgb"><code>rgb&lpar;135,206,235,&rpar;</code></td>
		</tr>
		<tr title="SlateBlue" style="background: #6A5ACD">
				<td class="desc">SlateBlue</td>
				<td class="hex"><code>#6A5ACD</code></td>
				<td class="rgb"><code>rgb&lpar;106,90,205,&rpar;</code></td>
		</tr>
		<tr title="SlateGrey" style="background: #708090">
				<td class="desc">SlateGrey</td>
				<td class="hex"><code>#708090</code></td>
				<td class="rgb"><code>rgb&lpar;112,128,144,&rpar;</code></td>
		</tr>
		<tr title="Snow" style="background: #FFFAFA">
				<td class="desc">Snow</td>
				<td class="hex"><code>#FFFAFA</code></td>
				<td class="rgb"><code>rgb&lpar;225,250,250,&rpar;</code></td>
		</tr>
		<tr title="SpringGreen" style="background: #00FF7F">
				<td class="desc">SpringGreen</td>
				<td class="hex"><code>#00FF7F</code></td>
				<td class="rgb"><code>rgb&lpar;0,255,127,&rpar;</code></td>
		</tr>
		<tr title="SteelBlue" style="background: #4682B4">
				<td class="desc">SteelBlue</td>
				<td class="hex"><code>#4682B4</code></td>
				<td class="rgb"><code>rgb&lpar;70,130,180,&rpar;</code></td>
		</tr>
<!-- Tango -->
		<tr title="Tan" style="background: #D2B48C" id="t">
				<td class="desc">Tan</td>
				<td class="hex"><code>#D2B48C</code></td>
				<td class="rgb"><code>rgb&lpar;210,180,140,&rpar;</code></td>
		</tr>
		<tr title="Teal" style="background: #008080">
				<td class="desc">Teal</td>
				<td class="hex"><code>#008080</code></td>
				<td class="rgb"><code>rgb&lpar;0,128,128,&rpar;</code></td>
		</tr>
		<tr title="Thistle" style="background: #D8BFD8">
				<td class="desc">Thistle</td>
				<td class="hex"><code>#D8BFD8</code></td>
				<td class="rgb"><code>rgb&lpar;216,191,216,&rpar;</code></td>
		</tr>
		<tr title="Tomato" style="background: #FF6347">
				<td class="desc">Tomato</td>
				<td class="hex"><code>#FF6347</code></td>
				<td class="rgb"><code>rgb&lpar;255,99,71,&rpar;</code></td>
		</tr>
		<tr title="Turquoise" style="background: #40E0D0">
				<td class="desc">Turquoise</td>
				<td class="hex"><code>#40E0D0</code></td>
				<td class="rgb"><code>rgb&lpar;64,224,208,&rpar;</code></td>
		</tr>
<!-- Victor -->
		<tr title="Violet" style="background: #EE82EE" id="v">
				<td class="desc">Violet</td>
				<td class="hex"><code>#EE82EE</code></td>
				<td class="rgb"><code>rgb&lpar;238,130,238,&rpar;</code></td>
		</tr>
<!-- Whiskey -->
		<tr title="Wheat" style="background: #F5DEB3" id="w">
				<td class="desc">Wheat</td>
				<td class="hex"><code>#F5DEB3</code></td>
				<td class="rgb"><code>rgb&lpar;245,222,179,&rpar;</code></td>
		</tr>
		<tr title="White" style="background: #FFFFFF">
				<td class="desc">White</td>
				<td class="hex"><code>#FFFFFF</code></td>
				<td class="rgb"><code>rgb&lpar;255,255,255,&rpar;</code></td>
		</tr>
		<tr title="WhiteSmoke" style="background: #F5F5F5">
				<td class="desc">WhiteSmoke</td>
				<td class="hex"><code>#F5F5F5</code></td>
				<td class="rgb"><code>rgb&lpar;245,245,245,&rpar;</code></td>
		</tr>
<!-- Yankee -->
		<tr title="Yellow" style="background: #FFFF00" id="y">
				<td class="desc">Yellow</td>
				<td class="hex"><code>#FFFF00</code></td>
				<td class="rgb"><code>rgb&lpar;255,255,0,&rpar;</code></td>
		</tr>
		<tr title="YellowGreen" style="background: #9ACD32">
				<td class="desc">YellowGreen</td>
				<td class="hex"><code>#9ACD32</code></td>
				<td class="rgb"><code>rgb&lpar;154,205,50,&rpar;</code></td>
		</tr>
	</table>

	</div>

	<p class="top"><a href="#top">Top</a></p>

	<footer>
		<p><abbr title="HyperText Markup Language">HTML Color Names</abbr> © 2014 <a href="mailto:stephonce.morris@gmail.com" target="blank">Stephonce R. Morris</a></p>
	</footer>
              
            
!

CSS

              
                /* Stephonce R. Morris | 2014 */

body {
	background: #8FBC9F;
	color: black;
	/*font-family: serif;*/
	font-family: 'Raleway', sans-serif;
	width: 100%;
	margin: 0 auto;
}

code {
	font-family: 'Source Code Pro';
	font-size: 0.8em;
}

#blkBar {
	width: 100%;
	height: 20px;
	margin: auto;
	background: black;
	-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);
	   -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);
			box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);
}

header {
	width: 80%;/*850px*/
	margin: auto;
}

h1 {
	font-family: 'Lobster', cursive;
	font-size: 4em;
	text-align: center;
	margin: 10px;
	text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

abbr {
	border-bottom: none;
	/*font-variant: none*/
}

p {
	font-family: 'Raleway', sans-serif;
	font-size: 0.9em;
	line-height: 1.2
}

strong {
	text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}

li {
	display: inline;
	padding-right: 10px;
}

a {
	text-decoration: none;
	color: #000;
}

a:hover {
	font-weight: bold;
	color: black;
	text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}

ul {
	font-size: 1em;
	border-bottom: solid black 1px;
	padding-bottom: 5px;
	margin: 1em auto;
}

#content {
	width: 90%;
	margin: auto;
}

table {
	font: 0.8em Monaco;
	/*display: block;*/
	/*width: 1045px;*/
	margin: 0 auto;
	clear: both;
	text-align:center;
}

tr {
	display: inline-block;
	text-align: center;
	width: 15em;
	height: 15em;
	margin: .5em;
	padding: 1px;
	position: relative;
	border: solid black 1px;
	border: solid rgba(0, 0, 0, 0.3) 1px;
	-webkit-box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.3);
	   -moz-box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.3);
			box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.3);
	/*border-radius: 5%;*/
}

tr:hover .hex, tr:hover .desc, tr:hover .rgb {
	visibility: visible;
	background: black;
	background: rgba(0, 0, 0, 0.5);
}

td {
	display: block;
	text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
	font-family: 'Raleway', sans-serif;
	color: white;
	-webkit-transition:background 1s ease-out;
       -moz-transition:background 1s ease-out;
    	 -o-transition:background 1s ease-out;
        	transition:background 1s ease-out;
	/*font-size: 1em;*/
}

.desc {
	visibility: hidden;
	text-align: center;
	font-size: 1.3em;
	padding: 10% 0;
}

.hex, .rgb {
	visibility: hidden;
	font-size: 1.3em;
	padding: 10% 0;
}

.top{
	text-align: center;
}

footer {
	width: 80%;
	margin: auto;
	text-align: center;
	border-top: solid black 1px;
}
              
            
!

JS

              
                
              
            
!
999px

Console