Skip to content

Instantly share code, notes, and snippets.

@pax

pax/html-colors-cheatsheet.html

Created February 6, 2016 21:33
Show Gist options
  • Save pax/6cae6a5cf0c66eb49593 to your computer and use it in GitHub Desktop.
Save pax/6cae6a5cf0c66eb49593 to your computer and use it in GitHub Desktop.
Download ZIP
HTML colos cheatsheet
Raw
html-colors-cheatsheet.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png">
<title>&#9673; HTML color names</title>
<style>
body {font: 12px Arial, Helvetica, sans-serif; }
.js-color {width: 2.5em; height: 2.5em; border-radius: 50%}
h4 {font-weight: normal; margin: 0} li {vertical-align: middle;}
section { break-inside:avoid-column;-webkit-column-break-inside:avoid;page-break-inside:avoid; border-right: 1px solid #DDD; padding-right: 2ex;}
#wrapper {-webkit-column-count: 4; -moz-column-count: 4; column-count: 4;/* -webkit-column-gap: 2.5ex; -moz-column-gap: 2.5ex; column-gap: 2.5ex;*/}
ul {list-style: none; padding: 0; margin: 0}
li>div {display: inline-block; }
.color-name, .color-hex, .color-rgb {display: block; margin-left: 2.5rem; }
.color-hex, .color-rgb {font-size: 0.8em; color: #777;}
li {clear: both; padding: 0.5ex; color: #111; border-bottom: 1px solid #EEE}
section:hover {background-color: #DDD}
li:hover {background-color: #333; color: #CCC;}
div.color-swatch {width: 2.6em; float: left}
</style>
</head>
<body>
<div id="wrapper">
<section id="red">
<ul>
<li class="color" >
<div class="color-swatch">
<div class="js-color" style="background-color:#CD5C5C;" data-hex="#CD5C5C" data-rgb="205, 92, 92" data-hsl="0, 53%, 58%"></div>
</div>
<div class="color-name">IndianRed</div>
<div class="color-hex">#CD5C5C</div>
<div class="color-rgb">rgb(205, 92, 92)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#F08080;" data-hex="#F08080" data-rgb="240, 128, 128" data-hsl="0, 79%, 72%"></div>
</div>
<div class="color-name">LightCoral</div>
<div class="color-hex">#F08080</div>
<div class="color-rgb">rgb(240, 128, 128)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FA8072;" data-hex="#FA8072" data-rgb="250, 128, 114" data-hsl="6, 93%, 71%"></div>
</div>
<div class="color-name">Salmon</div>
<div class="color-hex">#FA8072</div>
<div class="color-rgb">rgb(250, 128, 114)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#E9967A;" data-hex="#E9967A" data-rgb="233, 150, 122" data-hsl="15, 72%, 70%"></div>
</div>
<div class="color-name">DarkSalmon</div>
<div class="color-hex">#E9967A</div>
<div class="color-rgb">rgb(233, 150, 122)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFA07A;" data-hex="#FFA07A" data-rgb="255, 160, 122" data-hsl="17, 100%, 74%"></div>
</div>
<div class="color-name">LightSalmon</div>
<div class="color-hex">#FFA07A</div>
<div class="color-rgb">rgb(255, 160, 122)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#DC143C;" data-hex="#DC143C" data-rgb="220, 20, 60" data-hsl="348, 83%, 47%"></div>
</div>
<div class="color-name">Crimson</div>
<div class="color-hex">#DC143C</div>
<div class="color-rgb">rgb(220, 20, 60)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FF0000;" data-hex="#FF0000" data-rgb="255, 0, 0" data-hsl="0, 100%, 50%"></div>
</div>
<div class="color-name">Red</div>
<div class="color-hex">#FF0000</div>
<div class="color-rgb">rgb(255, 0, 0)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#B22222;" data-hex="#B22222" data-rgb="178, 34, 34" data-hsl="0, 68%, 42%"></div>
</div>
<div class="color-name">FireBrick</div>
<div class="color-hex">#B22222</div>
<div class="color-rgb">rgb(178, 34, 34)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#8B0000;" data-hex="#8B0000" data-rgb="139, 0, 0" data-hsl="0, 100%, 27%"></div>
</div>
<div class="color-name">DarkRed</div>
<div class="color-hex">#8B0000</div>
<div class="color-rgb">rgb(139, 0, 0)</div>
</li>
</ul>
</section>
<section id="pink">
<ul>
<tbody>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFC0CB;" data-hex="#FFC0CB" data-rgb="255, 192, 203" data-hsl="350, 100%, 88%"></div>
</div>
<div class="color-name">Pink</div>
<div class="color-hex">#FFC0CB</div>
<div class="color-rgb">rgb(255, 192, 203)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFB6C1;" data-hex="#FFB6C1" data-rgb="255, 182, 193" data-hsl="351, 100%, 86%"></div>
</div>
<div class="color-name">LightPink</div>
<div class="color-hex">#FFB6C1</div>
<div class="color-rgb">rgb(255, 182, 193)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FF69B4;" data-hex="#FF69B4" data-rgb="255, 105, 180" data-hsl="330, 100%, 71%"></div>
</div>
<div class="color-name">HotPink</div>
<div class="color-hex">#FF69B4</div>
<div class="color-rgb">rgb(255, 105, 180)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FF1493;" data-hex="#FF1493" data-rgb="255, 20, 147" data-hsl="328, 100%, 54%"></div>
</div>
<div class="color-name">DeepPink</div>
<div class="color-hex">#FF1493</div>
<div class="color-rgb">rgb(255, 20, 147)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#C71585;" data-hex="#C71585" data-rgb="199, 21, 133" data-hsl="322, 81%, 43%"></div>
</div>
<div class="color-name">MediumViolelied</div>
<div class="color-hex">#C71585</div>
<div class="color-rgb">rgb(199, 21, 133)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#DB7093;" data-hex="#DB7093" data-rgb="219, 112, 147" data-hsl="340, 60%, 65%"></div>
</div>
<div class="color-name">PaleViolelied</div>
<div class="color-hex">#DB7093</div>
<div class="color-rgb">rgb(219, 112, 147)</div>
</li>
</ul>
</section>
<section id="orange">
<ul>
<tbody>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFA07A;" data-hex="#FFA07A" data-rgb="255, 160, 122" data-hsl="17, 100%, 74%"></div>
</div>
<div class="color-name">LightSalmon</div>
<div class="color-hex">#FFA07A</div>
<div class="color-rgb">rgb(255, 160, 122)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FF7F50;" data-hex="#FF7F50" data-rgb="255, 127, 80" data-hsl="16, 100%, 66%"></div>
</div>
<div class="color-name">Coral</div>
<div class="color-hex">#FF7F50</div>
<div class="color-rgb">rgb(255, 127, 80)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FF6347;" data-hex="#FF6347" data-rgb="255, 99, 71" data-hsl="9, 100%, 64%"></div>
</div>
<div class="color-name">Tomato</div>
<div class="color-hex">#FF6347</div>
<div class="color-rgb">rgb(255, 99, 71)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FF4500;" data-hex="#FF4500" data-rgb="255, 69, 0" data-hsl="16, 100%, 50%"></div>
</div>
<div class="color-name">OrangeRed</div>
<div class="color-hex">#FF4500</div>
<div class="color-rgb">rgb(255, 69, 0)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FF8C00;" data-hex="#FF8C00" data-rgb="255, 140, 0" data-hsl="33, 100%, 50%"></div>
</div>
<div class="color-name">DarkOrange</div>
<div class="color-hex">#FF8C00</div>
<div class="color-rgb">rgb(255, 140, 0)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFA500;" data-hex="#FFA500" data-rgb="255, 165, 0" data-hsl="39, 100%, 50%"></div>
</div>
<div class="color-name">Orange</div>
<div class="color-hex">#FFA500</div>
<div class="color-rgb">rgb(255, 165, 0)</div>
</li>
</ul>
</section>
<section id="yellow">
<ul>
<tbody>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFD700;" data-hex="#FFD700" data-rgb="255, 215, 0" data-hsl="51, 100%, 50%"></div>
</div>
<div class="color-name">Gold</div>
<div class="color-hex">#FFD700</div>
<div class="color-rgb">rgb(255, 215, 0)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFFF00;" data-hex="#FFFF00" data-rgb="255, 255, 0" data-hsl="60, 100%, 50%"></div>
</div>
<div class="color-name">Yellow</div>
<div class="color-hex">#FFFF00</div>
<div class="color-rgb">rgb(255, 255, 0)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFFFE0;" data-hex="#FFFFE0" data-rgb="255, 255, 224" data-hsl="60, 100%, 94%"></div>
</div>
<div class="color-name">LightYellow</div>
<div class="color-hex">#FFFFE0</div>
<div class="color-rgb">rgb(255, 255, 224)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFFACD;" data-hex="#FFFACD" data-rgb="255, 250, 205" data-hsl="54, 100%, 90%"></div>
</div>
<div class="color-name">LemonChiffon</div>
<div class="color-hex">#FFFACD</div>
<div class="color-rgb">rgb(255, 250, 205)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FAFAD2;" data-hex="#FAFAD2" data-rgb="250, 250, 210" data-hsl="60, 80%, 90%"></div>
</div>
<div class="color-name">LightGoldenrodYellow</div>
<div class="color-hex">#FAFAD2</div>
<div class="color-rgb">rgb(250, 250, 210)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFEFD5;" data-hex="#FFEFD5" data-rgb="255, 239, 213" data-hsl="37, 100%, 92%"></div>
</div>
<div class="color-name">PapayaWhip</div>
<div class="color-hex">#FFEFD5</div>
<div class="color-rgb">rgb(255, 239, 213)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFE4B5;" data-hex="#FFE4B5" data-rgb="255, 228, 181" data-hsl="38, 100%, 85%"></div>
</div>
<div class="color-name">Moccasin</div>
<div class="color-hex">#FFE4B5</div>
<div class="color-rgb">rgb(255, 228, 181)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFDAB9;" data-hex="#FFDAB9" data-rgb="255, 218, 185" data-hsl="28, 100%, 86%"></div>
</div>
<div class="color-name">PeachPuff</div>
<div class="color-hex">#FFDAB9</div>
<div class="color-rgb">rgb(255, 218, 185)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#EEE8AA;" data-hex="#EEE8AA" data-rgb="238, 232, 170" data-hsl="55, 67%, 80%"></div>
</div>
<div class="color-name">PaleGoldenrod</div>
<div class="color-hex">#EEE8AA</div>
<div class="color-rgb">rgb(238, 232, 170)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#F0E68C;" data-hex="#F0E68C" data-rgb="240, 230, 140" data-hsl="54, 77%, 75%"></div>
</div>
<div class="color-name">Khaki</div>
<div class="color-hex">#F0E68C</div>
<div class="color-rgb">rgb(240, 230, 140)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#BDB76B;" data-hex="#BDB76B" data-rgb="189, 183, 107" data-hsl="56, 38%, 58%"></div>
</div>
<div class="color-name">DarkKhaki</div>
<div class="color-hex">#BDB76B</div>
<div class="color-rgb">rgb(189, 183, 107)</div>
</li>
</ul>
</section>
<section id="purple">
<ul>
<tbody>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#E6E6FA;" data-hex="#E6E6FA" data-rgb="230, 230, 250" data-hsl="240, 67%, 94%"></div>
</div>
<div class="color-name">Lavender</div>
<div class="color-hex">#E6E6FA</div>
<div class="color-rgb">rgb(230, 230, 250)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#D8BFD8;" data-hex="#D8BFD8" data-rgb="216, 191, 216" data-hsl="300, 24%, 80%"></div>
</div>
<div class="color-name">Thistle</div>
<div class="color-hex">#D8BFD8</div>
<div class="color-rgb">rgb(216, 191, 216)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#DDA0DD;" data-hex="#DDA0DD" data-rgb="221, 160, 221" data-hsl="300, 47%, 75%"></div>
</div>
<div class="color-name">Plum</div>
<div class="color-hex">#DDA0DD</div>
<div class="color-rgb">rgb(221, 160, 221)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#EE82EE;" data-hex="#EE82EE" data-rgb="238, 130, 238" data-hsl="300, 76%, 72%"></div>
</div>
<div class="color-name">Violet</div>
<div class="color-hex">#EE82EE</div>
<div class="color-rgb">rgb(238, 130, 238)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#DA70D6;" data-hex="#DA70D6" data-rgb="218, 112, 214" data-hsl="302, 59%, 65%"></div>
</div>
<div class="color-name">Orchid</div>
<div class="color-hex">#DA70D6</div>
<div class="color-rgb">rgb(218, 112, 214)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FF00FF;" data-hex="#FF00FF" data-rgb="255, 0, 255" data-hsl="300, 100%, 50%"></div>
</div>
<div class="color-name">Fuchsia</div>
<div class="color-hex">#FF00FF</div>
<div class="color-rgb">rgb(255, 0, 255)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FF00FF;" data-hex="#FF00FF" data-rgb="255, 0, 255" data-hsl="300, 100%, 50%"></div>
</div>
<div class="color-name">Magenta</div>
<div class="color-hex">#FF00FF</div>
<div class="color-rgb">rgb(255, 0, 255)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#BA55D3;" data-hex="#BA55D3" data-rgb="186, 85, 211" data-hsl="288, 59%, 58%"></div>
</div>
<div class="color-name">MediumOrchid</div>
<div class="color-hex">#BA55D3</div>
<div class="color-rgb">rgb(186, 85, 211)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#9370DB;" data-hex="#9370DB" data-rgb="147, 112, 219" data-hsl="260, 60%, 65%"></div>
</div>
<div class="color-name">MediumPurple</div>
<div class="color-hex">#9370DB</div>
<div class="color-rgb">rgb(147, 112, 219)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#663399;" data-hex="#663399" data-rgb="102, 51, 153" data-hsl="270, 50%, 40%"></div>
</div>
<div class="color-name">RebeccaPurple</div>
<div class="color-hex">#663399</div>
<div class="color-rgb">rgb(102, 51, 153)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#8A2BE2;" data-hex="#8A2BE2" data-rgb="138, 43, 226" data-hsl="271, 76%, 53%"></div>
</div>
<div class="color-name">BlueViolet</div>
<div class="color-hex">#8A2BE2</div>
<div class="color-rgb">rgb(138, 43, 226)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#9400D3;" data-hex="#9400D3" data-rgb="148, 0, 211" data-hsl="282, 100%, 41%"></div>
</div>
<div class="color-name">DarkViolet</div>
<div class="color-hex">#9400D3</div>
<div class="color-rgb">rgb(148, 0, 211)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#9932CC;" data-hex="#9932CC" data-rgb="153, 50, 204" data-hsl="280, 61%, 50%"></div>
</div>
<div class="color-name">DarkOrchid</div>
<div class="color-hex">#9932CC</div>
<div class="color-rgb">rgb(153, 50, 204)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#8B008B;" data-hex="#8B008B" data-rgb="139, 0, 139" data-hsl="300, 100%, 27%"></div>
</div>
<div class="color-name">DarkMagenta</div>
<div class="color-hex">#8B008B</div>
<div class="color-rgb">rgb(139, 0, 139)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#800080;" data-hex="#800080" data-rgb="128, 0, 128" data-hsl="300, 100%, 25%"></div>
</div>
<div class="color-name">Purple</div>
<div class="color-hex">#800080</div>
<div class="color-rgb">rgb(128, 0, 128)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#4B0082;" data-hex="#4B0082" data-rgb="75, 0, 130" data-hsl="275, 100%, 25%"></div>
</div>
<div class="color-name">Indigo</div>
<div class="color-hex">#4B0082</div>
<div class="color-rgb">rgb(75, 0, 130)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#6A5ACD;" data-hex="#6A5ACD" data-rgb="106, 90, 205" data-hsl="248, 53%, 58%"></div>
</div>
<div class="color-name">SlateBlue</div>
<div class="color-hex">#6A5ACD</div>
<div class="color-rgb">rgb(106, 90, 205)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#483D8B;" data-hex="#483D8B" data-rgb="72, 61, 139" data-hsl="248, 39%, 39%"></div>
</div>
<div class="color-name">DarkSlateBlue</div>
<div class="color-hex">#483D8B</div>
<div class="color-rgb">rgb(72, 61, 139)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#7B68EE;" data-hex="#7B68EE" data-rgb="123, 104, 238" data-hsl="249, 80%, 67%"></div>
</div>
<div class="color-name">MediumSlateBlue</div>
<div class="color-hex">#7B68EE</div>
<div class="color-rgb">rgb(123, 104, 238)</div>
</li>
</ul>
</section>
<section id="green">
<ul>
<tbody>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#ADFF2F;" data-hex="#ADFF2F" data-rgb="173, 255, 47" data-hsl="84, 100%, 59%"></div>
</div>
<div class="color-name">GreenYellow</div>
<div class="color-hex">#ADFF2F</div>
<div class="color-rgb">rgb(173, 255, 47)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#7FFF00;" data-hex="#7FFF00" data-rgb="127, 255, 0" data-hsl="90, 100%, 50%"></div>
</div>
<div class="color-name">Charlieuse</div>
<div class="color-hex">#7FFF00</div>
<div class="color-rgb">rgb(127, 255, 0)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#7CFC00;" data-hex="#7CFC00" data-rgb="124, 252, 0" data-hsl="90, 100%, 49%"></div>
</div>
<div class="color-name">LawnGreen</div>
<div class="color-hex">#7CFC00</div>
<div class="color-rgb">rgb(124, 252, 0)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#00FF00;" data-hex="#00FF00" data-rgb="0, 255, 0" data-hsl="120, 100%, 50%"></div>
</div>
<div class="color-name">Lime</div>
<div class="color-hex">#00FF00</div>
<div class="color-rgb">rgb(0, 255, 0)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#32CD32;" data-hex="#32CD32" data-rgb="50, 205, 50" data-hsl="120, 61%, 50%"></div>
</div>
<div class="color-name">LimeGreen</div>
<div class="color-hex">#32CD32</div>
<div class="color-rgb">rgb(50, 205, 50)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#98FB98;" data-hex="#98FB98" data-rgb="152, 251, 152" data-hsl="120, 93%, 79%"></div>
</div>
<div class="color-name">PaleGreen</div>
<div class="color-hex">#98FB98</div>
<div class="color-rgb">rgb(152, 251, 152)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#90EE90;" data-hex="#90EE90" data-rgb="144, 238, 144" data-hsl="120, 73%, 75%"></div>
</div>
<div class="color-name">LightGreen</div>
<div class="color-hex">#90EE90</div>
<div class="color-rgb">rgb(144, 238, 144)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#00FA9A;" data-hex="#00FA9A" data-rgb="0, 250, 154" data-hsl="157, 100%, 49%"></div>
</div>
<div class="color-name">MediumSpringGreen</div>
<div class="color-hex">#00FA9A</div>
<div class="color-rgb">rgb(0, 250, 154)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#00FF7F;" data-hex="#00FF7F" data-rgb="0, 255, 127" data-hsl="150, 100%, 50%"></div>
</div>
<div class="color-name">SpringGreen</div>
<div class="color-hex">#00FF7F</div>
<div class="color-rgb">rgb(0, 255, 127)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#3CB371;" data-hex="#3CB371" data-rgb="60, 179, 113" data-hsl="147, 50%, 47%"></div>
</div>
<div class="color-name">MediumSeaGreen</div>
<div class="color-hex">#3CB371</div>
<div class="color-rgb">rgb(60, 179, 113)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#2E8B57;" data-hex="#2E8B57" data-rgb="46, 139, 87" data-hsl="146, 50%, 36%"></div>
</div>
<div class="color-name">SeaGreen</div>
<div class="color-hex">#2E8B57</div>
<div class="color-rgb">rgb(46, 139, 87)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#228B22;" data-hex="#228B22" data-rgb="34, 139, 34" data-hsl="120, 61%, 34%"></div>
</div>
<div class="color-name">ForestGreen</div>
<div class="color-hex">#228B22</div>
<div class="color-rgb">rgb(34, 139, 34)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#008000;" data-hex="#008000" data-rgb="0, 128, 0" data-hsl="120, 100%, 25%"></div>
</div>
<div class="color-name">Green</div>
<div class="color-hex">#008000</div>
<div class="color-rgb">rgb(0, 128, 0)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#006400;" data-hex="#006400" data-rgb="0, 100, 0" data-hsl="120, 100%, 20%"></div>
</div>
<div class="color-name">DarkGreen</div>
<div class="color-hex">#006400</div>
<div class="color-rgb">rgb(0, 100, 0)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#9ACD32;" data-hex="#9ACD32" data-rgb="154, 205, 50" data-hsl="80, 61%, 50%"></div>
</div>
<div class="color-name">YellowGreen</div>
<div class="color-hex">#9ACD32</div>
<div class="color-rgb">rgb(154, 205, 50)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#6B8E23;" data-hex="#6B8E23" data-rgb="107, 142, 35" data-hsl="80, 60%, 35%"></div>
</div>
<div class="color-name">OliveDrab</div>
<div class="color-hex">#6B8E23</div>
<div class="color-rgb">rgb(107, 142, 35)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#808000;" data-hex="#808000" data-rgb="128, 128, 0" data-hsl="60, 100%, 25%"></div>
</div>
<div class="color-name">Olive</div>
<div class="color-hex">#808000</div>
<div class="color-rgb">rgb(128, 128, 0)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#556B2F;" data-hex="#556B2F" data-rgb="85, 107, 47" data-hsl="82, 39%, 30%"></div>
</div>
<div class="color-name">DarkOliveGreen</div>
<div class="color-hex">#556B2F</div>
<div class="color-rgb">rgb(85, 107, 47)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#66CDAA;" data-hex="#66CDAA" data-rgb="102, 205, 170" data-hsl="160, 51%, 60%"></div>
</div>
<div class="color-name">MediumAquamarine</div>
<div class="color-hex">#66CDAA</div>
<div class="color-rgb">rgb(102, 205, 170)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#8FBC8B;" data-hex="#8FBC8B" data-rgb="143, 188, 139" data-hsl="115, 27%, 64%"></div>
</div>
<div class="color-name">DarkSeaGreen</div>
<div class="color-hex">#8FBC8B</div>
<div class="color-rgb">rgb(143, 188, 139)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#20B2AA;" data-hex="#20B2AA" data-rgb="32, 178, 170" data-hsl="177, 70%, 41%"></div>
</div>
<div class="color-name">LightSeaGreen</div>
<div class="color-hex">#20B2AA</div>
<div class="color-rgb">rgb(32, 178, 170)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#008B8B;" data-hex="#008B8B" data-rgb="0, 139, 139" data-hsl="180, 100%, 27%"></div>
</div>
<div class="color-name">DarkCyan</div>
<div class="color-hex">#008B8B</div>
<div class="color-rgb">rgb(0, 139, 139)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#008080;" data-hex="#008080" data-rgb="0, 128, 128" data-hsl="180, 100%, 25%"></div>
</div>
<div class="color-name">Teal</div>
<div class="color-hex">#008080</div>
<div class="color-rgb">rgb(0, 128, 128)</div>
</li>
</ul>
</section>
<section id="cyan">
<ul>
<tbody>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#00FFFF;" data-hex="#00FFFF" data-rgb="0, 255, 255" data-hsl="180, 100%, 50%"></div>
</div>
<div class="color-name">Aqua</div>
<div class="color-hex">#00FFFF</div>
<div class="color-rgb">rgb(0, 255, 255)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#00FFFF;" data-hex="#00FFFF" data-rgb="0, 255, 255" data-hsl="180, 100%, 50%"></div>
</div>
<div class="color-name">Cyan</div>
<div class="color-hex">#00FFFF</div>
<div class="color-rgb">rgb(0, 255, 255)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#E0FFFF;" data-hex="#E0FFFF" data-rgb="224, 255, 255" data-hsl="180, 100%, 94%"></div>
</div>
<div class="color-name">LightCyan</div>
<div class="color-hex">#E0FFFF</div>
<div class="color-rgb">rgb(224, 255, 255)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#AFEEEE;" data-hex="#AFEEEE" data-rgb="175, 238, 238" data-hsl="180, 65%, 81%"></div>
</div>
<div class="color-name">PaleTurquoise</div>
<div class="color-hex">#AFEEEE</div>
<div class="color-rgb">rgb(175, 238, 238)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#7FFFD4;" data-hex="#7FFFD4" data-rgb="127, 255, 212" data-hsl="160, 100%, 75%"></div>
</div>
<div class="color-name">Aquamarine</div>
<div class="color-hex">#7FFFD4</div>
<div class="color-rgb">rgb(127, 255, 212)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#40E0D0;" data-hex="#40E0D0" data-rgb="64, 224, 208" data-hsl="174, 72%, 56%"></div>
</div>
<div class="color-name">Turquoise</div>
<div class="color-hex">#40E0D0</div>
<div class="color-rgb">rgb(64, 224, 208)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#48D1CC;" data-hex="#48D1CC" data-rgb="72, 209, 204" data-hsl="178, 60%, 55%"></div>
</div>
<div class="color-name">MediumTurquoise</div>
<div class="color-hex">#48D1CC</div>
<div class="color-rgb">rgb(72, 209, 204)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#00CED1;" data-hex="#00CED1" data-rgb="0, 206, 209" data-hsl="181, 100%, 41%"></div>
</div>
<div class="color-name">DarkTurquoise</div>
<div class="color-hex">#00CED1</div>
<div class="color-rgb">rgb(0, 206, 209)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#5F9EA0;" data-hex="#5F9EA0" data-rgb="95, 158, 160" data-hsl="182, 25%, 50%"></div>
</div>
<div class="color-name">CadetBlue</div>
<div class="color-hex">#5F9EA0</div>
<div class="color-rgb">rgb(95, 158, 160)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#4682B4;" data-hex="#4682B4" data-rgb="70, 130, 180" data-hsl="207, 44%, 49%"></div>
</div>
<div class="color-name">SteelBlue</div>
<div class="color-hex">#4682B4</div>
<div class="color-rgb">rgb(70, 130, 180)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#B0C4DE;" data-hex="#B0C4DE" data-rgb="176, 196, 222" data-hsl="214, 41%, 78%"></div>
</div>
<div class="color-name">LightSteelBlue</div>
<div class="color-hex">#B0C4DE</div>
<div class="color-rgb">rgb(176, 196, 222)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#B0E0E6;" data-hex="#B0E0E6" data-rgb="176, 224, 230" data-hsl="187, 52%, 80%"></div>
</div>
<div class="color-name">PowderBlue</div>
<div class="color-hex">#B0E0E6</div>
<div class="color-rgb">rgb(176, 224, 230)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#ADD8E6;" data-hex="#ADD8E6" data-rgb="173, 216, 230" data-hsl="195, 53%, 79%"></div>
</div>
<div class="color-name">LightBlue</div>
<div class="color-hex">#ADD8E6</div>
<div class="color-rgb">rgb(173, 216, 230)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#87CEEB;" data-hex="#87CEEB" data-rgb="135, 206, 235" data-hsl="197, 71%, 73%"></div>
</div>
<div class="color-name">SkyBlue</div>
<div class="color-hex">#87CEEB</div>
<div class="color-rgb">rgb(135, 206, 235)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#87CEFA;" data-hex="#87CEFA" data-rgb="135, 206, 250" data-hsl="203, 92%, 75%"></div>
</div>
<div class="color-name">LightSkyBlue</div>
<div class="color-hex">#87CEFA</div>
<div class="color-rgb">rgb(135, 206, 250)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#00BFFF;" data-hex="#00BFFF" data-rgb="0, 191, 255" data-hsl="195, 100%, 50%"></div>
</div>
<div class="color-name">DeepSkyBlue</div>
<div class="color-hex">#00BFFF</div>
<div class="color-rgb">rgb(0, 191, 255)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#1E90FF;" data-hex="#1E90FF" data-rgb="30, 144, 255" data-hsl="210, 100%, 56%"></div>
</div>
<div class="color-name">DodgerBlue</div>
<div class="color-hex">#1E90FF</div>
<div class="color-rgb">rgb(30, 144, 255)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#6495ED;" data-hex="#6495ED" data-rgb="100, 149, 237" data-hsl="219, 79%, 66%"></div>
</div>
<div class="color-name">CornflowerBlue</div>
<div class="color-hex">#6495ED</div>
<div class="color-rgb">rgb(100, 149, 237)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#7B68EE;" data-hex="#7B68EE" data-rgb="123, 104, 238" data-hsl="249, 80%, 67%"></div>
</div>
<div class="color-name">MediumSlateBlue</div>
<div class="color-hex">#7B68EE</div>
<div class="color-rgb">rgb(123, 104, 238)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#4169E1;" data-hex="#4169E1" data-rgb="65, 105, 225" data-hsl="225, 73%, 57%"></div>
</div>
<div class="color-name">RoyalBlue</div>
<div class="color-hex">#4169E1</div>
<div class="color-rgb">rgb(65, 105, 225)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#0000FF;" data-hex="#0000FF" data-rgb="0, 0, 255" data-hsl="240, 100%, 50%"></div>
</div>
<div class="color-name">Blue</div>
<div class="color-hex">#0000FF</div>
<div class="color-rgb">rgb(0, 0, 255)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#0000CD;" data-hex="#0000CD" data-rgb="0, 0, 205" data-hsl="240, 100%, 40%"></div>
</div>
<div class="color-name">MediumBlue</div>
<div class="color-hex">#0000CD</div>
<div class="color-rgb">rgb(0, 0, 205)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#00008B;" data-hex="#00008B" data-rgb="0, 0, 139" data-hsl="240, 100%, 27%"></div>
</div>
<div class="color-name">DarkBlue</div>
<div class="color-hex">#00008B</div>
<div class="color-rgb">rgb(0, 0, 139)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#000080;" data-hex="#000080" data-rgb="0, 0, 128" data-hsl="240, 100%, 25%"></div>
</div>
<div class="color-name">Navy</div>
<div class="color-hex">#000080</div>
<div class="color-rgb">rgb(0, 0, 128)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#191970;" data-hex="#191970" data-rgb="25, 25, 112" data-hsl="240, 64%, 27%"></div>
</div>
<div class="color-name">MidnightBlue</div>
<div class="color-hex">#191970</div>
<div class="color-rgb">rgb(25, 25, 112)</div>
</li>
</ul>
</section>
<section id="brown">
<ul>
<tbody>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFF8DC;" data-hex="#FFF8DC" data-rgb="255, 248, 220" data-hsl="48, 100%, 93%"></div>
</div>
<div class="color-name">Cornsilk</div>
<div class="color-hex">#FFF8DC</div>
<div class="color-rgb">rgb(255, 248, 220)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFEBCD;" data-hex="#FFEBCD" data-rgb="255, 235, 205" data-hsl="36, 100%, 90%"></div>
</div>
<div class="color-name">BlanchedAlmond</div>
<div class="color-hex">#FFEBCD</div>
<div class="color-rgb">rgb(255, 235, 205)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFE4C4;" data-hex="#FFE4C4" data-rgb="255, 228, 196" data-hsl="33, 100%, 88%"></div>
</div>
<div class="color-name">Bisque</div>
<div class="color-hex">#FFE4C4</div>
<div class="color-rgb">rgb(255, 228, 196)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFDEAD;" data-hex="#FFDEAD" data-rgb="255, 222, 173" data-hsl="36, 100%, 84%"></div>
</div>
<div class="color-name">NavajoWhite</div>
<div class="color-hex">#FFDEAD</div>
<div class="color-rgb">rgb(255, 222, 173)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#F5DEB3;" data-hex="#F5DEB3" data-rgb="245, 222, 179" data-hsl="39, 77%, 83%"></div>
</div>
<div class="color-name">Wheat</div>
<div class="color-hex">#F5DEB3</div>
<div class="color-rgb">rgb(245, 222, 179)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#DEB887;" data-hex="#DEB887" data-rgb="222, 184, 135" data-hsl="34, 57%, 70%"></div>
</div>
<div class="color-name">BurlyWood</div>
<div class="color-hex">#DEB887</div>
<div class="color-rgb">rgb(222, 184, 135)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#D2B48C;" data-hex="#D2B48C" data-rgb="210, 180, 140" data-hsl="34, 44%, 69%"></div>
</div>
<div class="color-name">Tan</div>
<div class="color-hex">#D2B48C</div>
<div class="color-rgb">rgb(210, 180, 140)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#BC8F8F;" data-hex="#BC8F8F" data-rgb="188, 143, 143" data-hsl="0, 25%, 65%"></div>
</div>
<div class="color-name">RosyBrown</div>
<div class="color-hex">#BC8F8F</div>
<div class="color-rgb">rgb(188, 143, 143)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#F4A460;" data-hex="#F4A460" data-rgb="244, 164, 96" data-hsl="28, 87%, 67%"></div>
</div>
<div class="color-name">SandyBrown</div>
<div class="color-hex">#F4A460</div>
<div class="color-rgb">rgb(244, 164, 96)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#DAA520;" data-hex="#DAA520" data-rgb="218, 165, 32" data-hsl="43, 74%, 49%"></div>
</div>
<div class="color-name">Goldenrod</div>
<div class="color-hex">#DAA520</div>
<div class="color-rgb">rgb(218, 165, 32)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#B8860B;" data-hex="#B8860B" data-rgb="184, 134, 11" data-hsl="43, 89%, 38%"></div>
</div>
<div class="color-name">DarkGoldenrod</div>
<div class="color-hex">#B8860B</div>
<div class="color-rgb">rgb(184, 134, 11)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#CD853F;" data-hex="#CD853F" data-rgb="205, 133, 63" data-hsl="30, 59%, 53%"></div>
</div>
<div class="color-name">Peru</div>
<div class="color-hex">#CD853F</div>
<div class="color-rgb">rgb(205, 133, 63)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#D2691E;" data-hex="#D2691E" data-rgb="210, 105, 30" data-hsl="25, 75%, 47%"></div>
</div>
<div class="color-name">Chocolate</div>
<div class="color-hex">#D2691E</div>
<div class="color-rgb">rgb(210, 105, 30)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#8B4513;" data-hex="#8B4513" data-rgb="139, 69, 19" data-hsl="25, 76%, 31%"></div>
</div>
<div class="color-name">SaddleBrown</div>
<div class="color-hex">#8B4513</div>
<div class="color-rgb">rgb(139, 69, 19)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#A0522D;" data-hex="#A0522D" data-rgb="160, 82, 45" data-hsl="19, 56%, 40%"></div>
</div>
<div class="color-name">Sienna</div>
<div class="color-hex">#A0522D</div>
<div class="color-rgb">rgb(160, 82, 45)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#A52A2A;" data-hex="#A52A2A" data-rgb="165, 42, 42" data-hsl="0, 59%, 41%"></div>
</div>
<div class="color-name">Brown</div>
<div class="color-hex">#A52A2A</div>
<div class="color-rgb">rgb(165, 42, 42)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#800000;" data-hex="#800000" data-rgb="128, 0, 0" data-hsl="0, 100%, 25%"></div>
</div>
<div class="color-name">Maroon</div>
<div class="color-hex">#800000</div>
<div class="color-rgb">rgb(128, 0, 0)</div>
</li>
</ul>
</section>
<section id="white">
<ul>
<tbody>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFFFFF;" data-hex="#FFFFFF" data-rgb="255, 255, 255" data-hsl="0, 0%, 100%"></div>
</div>
<div class="color-name">White</div>
<div class="color-hex">#FFFFFF</div>
<div class="color-rgb">rgb(255, 255, 255)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFFAFA;" data-hex="#FFFAFA" data-rgb="255, 250, 250" data-hsl="0, 100%, 99%"></div>
</div>
<div class="color-name">Snow</div>
<div class="color-hex">#FFFAFA</div>
<div class="color-rgb">rgb(255, 250, 250)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#F0FFF0;" data-hex="#F0FFF0" data-rgb="240, 255, 240" data-hsl="120, 100%, 97%"></div>
</div>
<div class="color-name">HoneyDew</div>
<div class="color-hex">#F0FFF0</div>
<div class="color-rgb">rgb(240, 255, 240)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#F5FFFA;" data-hex="#F5FFFA" data-rgb="245, 255, 250" data-hsl="150, 100%, 98%"></div>
</div>
<div class="color-name">MintCream</div>
<div class="color-hex">#F5FFFA</div>
<div class="color-rgb">rgb(245, 255, 250)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#F0FFFF;" data-hex="#F0FFFF" data-rgb="240, 255, 255" data-hsl="180, 100%, 97%"></div>
</div>
<div class="color-name">Azure</div>
<div class="color-hex">#F0FFFF</div>
<div class="color-rgb">rgb(240, 255, 255)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#F0F8FF;" data-hex="#F0F8FF" data-rgb="240, 248, 255" data-hsl="208, 100%, 97%"></div>
</div>
<div class="color-name">AliceBlue</div>
<div class="color-hex">#F0F8FF</div>
<div class="color-rgb">rgb(240, 248, 255)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#F8F8FF;" data-hex="#F8F8FF" data-rgb="248, 248, 255" data-hsl="240, 100%, 99%"></div>
</div>
<div class="color-name">GhostWhite</div>
<div class="color-hex">#F8F8FF</div>
<div class="color-rgb">rgb(248, 248, 255)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#F5F5F5;" data-hex="#F5F5F5" data-rgb="245, 245, 245" data-hsl="0, 0%, 96%"></div>
</div>
<div class="color-name">WhiteSmoke</div>
<div class="color-hex">#F5F5F5</div>
<div class="color-rgb">rgb(245, 245, 245)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFF5EE;" data-hex="#FFF5EE" data-rgb="255, 245, 238" data-hsl="25, 100%, 97%"></div>
</div>
<div class="color-name">SeaShell</div>
<div class="color-hex">#FFF5EE</div>
<div class="color-rgb">rgb(255, 245, 238)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#F5F5DC;" data-hex="#F5F5DC" data-rgb="245, 245, 220" data-hsl="60, 56%, 91%"></div>
</div>
<div class="color-name">Beige</div>
<div class="color-hex">#F5F5DC</div>
<div class="color-rgb">rgb(245, 245, 220)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FDF5E6;" data-hex="#FDF5E6" data-rgb="253, 245, 230" data-hsl="39, 85%, 95%"></div>
</div>
<div class="color-name">OldLace</div>
<div class="color-hex">#FDF5E6</div>
<div class="color-rgb">rgb(253, 245, 230)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFFAF0;" data-hex="#FFFAF0" data-rgb="255, 250, 240" data-hsl="40, 100%, 97%"></div>
</div>
<div class="color-name">FloralWhite</div>
<div class="color-hex">#FFFAF0</div>
<div class="color-rgb">rgb(255, 250, 240)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFFFF0;" data-hex="#FFFFF0" data-rgb="255, 255, 240" data-hsl="60, 100%, 97%"></div>
</div>
<div class="color-name">Ivory</div>
<div class="color-hex">#FFFFF0</div>
<div class="color-rgb">rgb(255, 255, 240)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FAEBD7;" data-hex="#FAEBD7" data-rgb="250, 235, 215" data-hsl="34, 78%, 91%"></div>
</div>
<div class="color-name">AntiqueWhite</div>
<div class="color-hex">#FAEBD7</div>
<div class="color-rgb">rgb(250, 235, 215)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FAF0E6;" data-hex="#FAF0E6" data-rgb="250, 240, 230" data-hsl="30, 67%, 94%"></div>
</div>
<div class="color-name">Linen</div>
<div class="color-hex">#FAF0E6</div>
<div class="color-rgb">rgb(250, 240, 230)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFF0F5;" data-hex="#FFF0F5" data-rgb="255, 240, 245" data-hsl="340, 100%, 97%"></div>
</div>
<div class="color-name">LavenderBlush</div>
<div class="color-hex">#FFF0F5</div>
<div class="color-rgb">rgb(255, 240, 245)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#FFE4E1;" data-hex="#FFE4E1" data-rgb="255, 228, 225" data-hsl="6, 100%, 94%"></div>
</div>
<div class="color-name">MistyRose</div>
<div class="color-hex">#FFE4E1</div>
<div class="color-rgb">rgb(255, 228, 225)</div>
</li>
</ul>
</section>
<section id="gray">
<ul>
<tbody>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#DCDCDC;" data-hex="#DCDCDC" data-rgb="220, 220, 220" data-hsl="0, 0%, 86%"></div>
</div>
<div class="color-name">Gainsboro</div>
<div class="color-hex">#DCDCDC</div>
<div class="color-rgb">rgb(220, 220, 220)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#D3D3D3;" data-hex="#D3D3D3" data-rgb="211, 211, 211" data-hsl="0, 0%, 83%"></div>
</div>
<div class="color-name">LightGray</div>
<div class="color-hex">#D3D3D3</div>
<div class="color-rgb">rgb(211, 211, 211)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#C0C0C0;" data-hex="#C0C0C0" data-rgb="192, 192, 192" data-hsl="0, 0%, 75%"></div>
</div>
<div class="color-name">Silver</div>
<div class="color-hex">#C0C0C0</div>
<div class="color-rgb">rgb(192, 192, 192)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#A9A9A9;" data-hex="#A9A9A9" data-rgb="169, 169, 169" data-hsl="0, 0%, 66%"></div>
</div>
<div class="color-name">DarkGray</div>
<div class="color-hex">#A9A9A9</div>
<div class="color-rgb">rgb(169, 169, 169)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#808080;" data-hex="#808080" data-rgb="128, 128, 128" data-hsl="0, 0%, 50%"></div>
</div>
<div class="color-name">Gray</div>
<div class="color-hex">#808080</div>
<div class="color-rgb">rgb(128, 128, 128)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#696969;" data-hex="#696969" data-rgb="105, 105, 105" data-hsl="0, 0%, 41%"></div>
</div>
<div class="color-name">DimGray</div>
<div class="color-hex">#696969</div>
<div class="color-rgb">rgb(105, 105, 105)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#778899;" data-hex="#778899" data-rgb="119, 136, 153" data-hsl="210, 14%, 53%"></div>
</div>
<div class="color-name">LightSlateGray</div>
<div class="color-hex">#778899</div>
<div class="color-rgb">rgb(119, 136, 153)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#708090;" data-hex="#708090" data-rgb="112, 128, 144" data-hsl="210, 13%, 50%"></div>
</div>
<div class="color-name">SlateGray</div>
<div class="color-hex">#708090</div>
<div class="color-rgb">rgb(112, 128, 144)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#2F4F4F;" data-hex="#2F4F4F" data-rgb="47, 79, 79" data-hsl="180, 25%, 25%"></div>
</div>
<div class="color-name">DarkSlateGray</div>
<div class="color-hex">#2F4F4F</div>
<div class="color-rgb">rgb(47, 79, 79)</div>
</li>
<li class="color">
<div class="color-swatch">
<div class="js-color" style="background-color:#000000;" data-hex="#000000" data-rgb="0, 0, 0" data-hsl="0, 0%, 0%"></div>
</div>
<div class="color-name">Black</div>
<div class="color-hex">#000000</div>
<div class="color-rgb">rgb(0, 0, 0)</div>
</li>
</ul>
</section>
</div>
<small>
<a href="http://htmlcolorcodes.com/color-names/">http://htmlcolorcodes.com/color-names/</a>
</small>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment