This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
<link rel="stylesheet" href="https://paul.kinlan.me/css/material.css">
<p>This is more for my own future reference and noodling with.</p>
<p>I converted it from the aco file with <a href="https://github.com/websemantics/Color-Palette-Toolkit">https://github.com/websemantics/Color-Palette-Toolkit</a></p>
<section class="box">
<section class="color-full color-pomegranate"></section>
<h1>Pomegranate</h1>
<p>#f44336</p>
</section>
<section class="box">
<section class="color-full color-lavender-blush"></section>
<h1>Lavender blush</h1>
<p>#ffebee</p>
</section>
<section class="box">
<section class="color-full color-pastel-pink"></section>
<h1>Pastel Pink</h1>
<p>#ffcdd2</p>
</section>
<section class="box">
<section class="color-full color-sea-pink"></section>
<h1>Sea Pink</h1>
<p>#ef9a9a</p>
</section>
<section class="box">
<section class="color-full color-sunglo"></section>
<h1>Sunglo</h1>
<p>#e57373</p>
</section>
<section class="box">
<section class="color-full color-burnt-sienna"></section>
<h1>Burnt Sienna</h1>
<p>#ef5350</p>
</section>
<section class="box">
<section class="color-full color-cinnabar"></section>
<h1>Cinnabar</h1>
<p>#e53935</p>
</section>
<section class="box">
<section class="color-full color-persian-red"></section>
<h1>Persian Red</h1>
<p>#d32f2f</p>
</section>
<section class="box">
<section class="color-full color-tall-poppy"></section>
<h1>Tall Poppy</h1>
<p>#c62828</p>
</section>
<section class="box">
<section class="color-full color-thunderbird"></section>
<h1>Thunderbird</h1>
<p>#b71c1c</p>
</section>
<section class="box">
<section class="color-full color-vivid-tangerine"></section>
<h1>Vivid Tangerine</h1>
<p>#ff8a80</p>
</section>
<section class="box">
<section class="color-full color-sunset-orange"></section>
<h1>Sunset Orange</h1>
<p>#ff5252</p>
</section>
<section class="box">
<section class="color-full color-torch-red"></section>
<h1>Torch Red</h1>
<p>#ff1744</p>
</section>
<section class="box">
<section class="color-full color-guardsman-red"></section>
<h1>Guardsman Red</h1>
<p>#d50000</p>
</section>
<section class="box">
<section class="color-full color-amaranth"></section>
<h1>Amaranth</h1>
<p>#e91e63</p>
</section>
<section class="box">
<section class="color-full color-wisp-pink"></section>
<h1>Wisp Pink</h1>
<p>#fce4ec</p>
</section>
<section class="box">
<section class="color-full color-chantilly"></section>
<h1>Chantilly</h1>
<p>#f8bbd0</p>
</section>
<section class="box">
<section class="color-full color-mauvelous"></section>
<h1>Mauvelous</h1>
<p>#f48fb1</p>
</section>
<section class="box">
<section class="color-full color-froly"></section>
<h1>Froly</h1>
<p>#f06292</p>
</section>
<section class="box">
<section class="color-full color-french-rose"></section>
<h1>French Rose</h1>
<p>#ec407a</p>
</section>
<section class="box">
<section class="color-full color-amaranth"></section>
<h1>Amaranth</h1>
<p>#d81b60</p>
</section>
<section class="box">
<section class="color-full color-maroon-flush"></section>
<h1>Maroon Flush</h1>
<p>#c2185b</p>
</section>
<section class="box">
<section class="color-full color-jazzberry-jam"></section>
<h1>Jazzberry Jam</h1>
<p>#ad1457</p>
</section>
<section class="box">
<section class="color-full color-rose-bud-cherry"></section>
<h1>Rose Bud Cherry</h1>
<p>#880e4f</p>
</section>
<section class="box">
<section class="color-full color-tickle-me-pink"></section>
<h1>Tickle Me Pink</h1>
<p>#ff80ab</p>
</section>
<section class="box">
<section class="color-full color-wild-strawberry"></section>
<h1>Wild Strawberry</h1>
<p>#ff4081</p>
</section>
<section class="box">
<section class="color-full color-razzmatazz"></section>
<h1>Razzmatazz</h1>
<p>#f50057</p>
</section>
<section class="box">
<section class="color-full color-red-violet"></section>
<h1>Red Violet</h1>
<p>#c51162</p>
</section>
<section class="box">
<section class="color-full color-seance"></section>
<h1>Seance</h1>
<p>#9c27b0</p>
</section>
<section class="box">
<section class="color-full color-snuff"></section>
<h1>Snuff</h1>
<p>#f3e5f5</p>
</section>
<section class="box">
<section class="color-full color-french-lilac"></section>
<h1>French Lilac</h1>
<p>#e1bee7</p>
</section>
<section class="box">
<section class="color-full color-light-wisteria"></section>
<h1>Light Wisteria</h1>
<p>#ce93d8</p>
</section>
<section class="box">
<section class="color-full color-amethyst"></section>
<h1>Amethyst</h1>
<p>#ba68c8</p>
</section>
<section class="box">
<section class="color-full color-amethyst"></section>
<h1>Amethyst</h1>
<p>#ab47bc</p>
</section>
<section class="box">
<section class="color-full color-seance"></section>
<h1>Seance</h1>
<p>#8e24aa</p>
</section>
<section class="box">
<section class="color-full color-seance"></section>
<h1>Seance</h1>
<p>#7b1fa2</p>
</section>
<section class="box">
<section class="color-full color-seance"></section>
<h1>Seance</h1>
<p>#6a1b9a</p>
</section>
<section class="box">
<section class="color-full color-persian-indigo"></section>
<h1>Persian Indigo</h1>
<p>#4a148c</p>
</section>
<section class="box">
<section class="color-full color-heliotrope"></section>
<h1>Heliotrope</h1>
<p>#ea80fc</p>
</section>
<section class="box">
<section class="color-full color-heliotrope"></section>
<h1>Heliotrope</h1>
<p>#e040fb</p>
</section>
<section class="box">
<section class="color-full color-electric-violet"></section>
<h1>Electric Violet</h1>
<p>#d500f9</p>
</section>
<section class="box">
<section class="color-full color-electric-violet"></section>
<h1>Electric Violet</h1>
<p>#aa00ff</p>
</section>
<section class="box">
<section class="color-full color-purple-heart"></section>
<h1>Purple Heart</h1>
<p>#673ab7</p>
</section>
<section class="box">
<section class="color-full color-white-lilac"></section>
<h1>White Lilac</h1>
<p>#ede7f6</p>
</section>
<section class="box">
<section class="color-full color-prelude"></section>
<h1>Prelude</h1>
<p>#d1c4e9</p>
</section>
<section class="box">
<section class="color-full color-cold-purple"></section>
<h1>Cold Purple</h1>
<p>#b39ddb</p>
</section>
<section class="box">
<section class="color-full color-lilac-bush"></section>
<h1>Lilac Bush</h1>
<p>#9575cd</p>
</section>
<section class="box">
<section class="color-full color-fuchsia-blue"></section>
<h1>Fuchsia Blue</h1>
<p>#7e57c2</p>
</section>
<section class="box">
<section class="color-full color-purple-heart"></section>
<h1>Purple Heart</h1>
<p>#5e35b1</p>
</section>
<section class="box">
<section class="color-full color-daisy-bush"></section>
<h1>Daisy Bush</h1>
<p>#512da8</p>
</section>
<section class="box">
<section class="color-full color-daisy-bush"></section>
<h1>Daisy Bush</h1>
<p>#4527a0</p>
</section>
<section class="box">
<section class="color-full color-jacksons-purple"></section>
<h1>Jacksons Purple</h1>
<p>#311b92</p>
</section>
<section class="box">
<section class="color-full color-heliotrope"></section>
<h1>Heliotrope</h1>
<p>#b388ff</p>
</section>
<section class="box">
<section class="color-full color-electric-violet"></section>
<h1>Electric Violet</h1>
<p>#7c4dff</p>
</section>
<section class="box">
<section class="color-full color-electric-violet"></section>
<h1>Electric Violet</h1>
<p>#651fff</p>
</section>
<section class="box">
<section class="color-full color-electric-violet"></section>
<h1>Electric Violet</h1>
<p>#6200ea</p>
</section>
<section class="box">
<section class="color-full color-san-marino"></section>
<h1>San Marino</h1>
<p>#3f51b5</p>
</section>
<section class="box">
<section class="color-full color-white-lilac"></section>
<h1>White Lilac</h1>
<p>#e8eaf6</p>
</section>
<section class="box">
<section class="color-full color-periwinkle-gray"></section>
<h1>Periwinkle Gray</h1>
<p>#c5cae9</p>
</section>
<section class="box">
<section class="color-full color-cold-purple"></section>
<h1>Cold Purple</h1>
<p>#9fa8da</p>
</section>
<section class="box">
<section class="color-full color-moody-blue"></section>
<h1>Moody Blue</h1>
<p>#7986cb</p>
</section>
<section class="box">
<section class="color-full color-indigo"></section>
<h1>Indigo</h1>
<p>#5c6bc0</p>
</section>
<section class="box">
<section class="color-full color-sapphire"></section>
<h1>Sapphire</h1>
<p>#3949ab</p>
</section>
<section class="box">
<section class="color-full color-sapphire"></section>
<h1>Sapphire</h1>
<p>#303f9f</p>
</section>
<section class="box">
<section class="color-full color-bay-of-many"></section>
<h1>Bay of Many</h1>
<p>#283593</p>
</section>
<section class="box">
<section class="color-full color-jacksons-purple"></section>
<h1>Jacksons Purple</h1>
<p>#1a237e</p>
</section>
<section class="box">
<section class="color-full color-malibu"></section>
<h1>Malibu</h1>
<p>#8c9eff</p>
</section>
<section class="box">
<section class="color-full color-dodger-blue"></section>
<h1>Dodger Blue</h1>
<p>#536dfe</p>
</section>
<section class="box">
<section class="color-full color-dodger-blue"></section>
<h1>Dodger Blue</h1>
<p>#3d5afe</p>
</section>
<section class="box">
<section class="color-full color-blue-ribbon"></section>
<h1>Blue Ribbon</h1>
<p>#304ffe</p>
</section>
<section class="box">
<section class="color-full color-dodger-blue"></section>
<h1>Dodger Blue</h1>
<p>#2196f3</p>
</section>
<section class="box">
<section class="color-full color-hawkes-blue"></section>
<h1>Hawkes Blue</h1>
<p>#e3f2fd</p>
</section>
<section class="box">
<section class="color-full color-sail"></section>
<h1>Sail</h1>
<p>#bbdefb</p>
</section>
<section class="box">
<section class="color-full color-malibu"></section>
<h1>Malibu</h1>
<p>#90caf9</p>
</section>
<section class="box">
<section class="color-full color-malibu"></section>
<h1>Malibu</h1>
<p>#64b5f6</p>
</section>
<section class="box">
<section class="color-full color-picton-blue"></section>
<h1>Picton Blue</h1>
<p>#42a5f5</p>
</section>
<section class="box">
<section class="color-full color-curious-blue"></section>
<h1>Curious Blue</h1>
<p>#1e88e5</p>
</section>
<section class="box">
<section class="color-full color-denim"></section>
<h1>Denim</h1>
<p>#1976d2</p>
</section>
<section class="box">
<section class="color-full color-denim"></section>
<h1>Denim</h1>
<p>#1565c0</p>
</section>
<section class="box">
<section class="color-full color-tory-blue"></section>
<h1>Tory Blue</h1>
<p>#0d47a1</p>
</section>
<section class="box">
<section class="color-full color-malibu"></section>
<h1>Malibu</h1>
<p>#82b1ff</p>
</section>
<section class="box">
<section class="color-full color-dodger-blue"></section>
<h1>Dodger Blue</h1>
<p>#448aff</p>
</section>
<section class="box">
<section class="color-full color-dodger-blue"></section>
<h1>Dodger Blue</h1>
<p>#2979ff</p>
</section>
<section class="box">
<section class="color-full color-dodger-blue"></section>
<h1>Dodger Blue</h1>
<p>#2962ff</p>
</section>
<section class="box">
<section class="color-full color-cerulean"></section>
<h1>Cerulean</h1>
<p>#03a9f4</p>
</section>
<section class="box">
<section class="color-full color-pattens-blue"></section>
<h1>Pattens Blue</h1>
<p>#e1f5fe</p>
</section>
<section class="box">
<section class="color-full color-french-pass"></section>
<h1>French Pass</h1>
<p>#b3e5fc</p>
</section>
<section class="box">
<section class="color-full color-malibu"></section>
<h1>Malibu</h1>
<p>#81d4fa</p>
</section>
<section class="box">
<section class="color-full color-picton-blue"></section>
<h1>Picton Blue</h1>
<p>#4fc3f7</p>
</section>
<section class="box">
<section class="color-full color-dodger-blue"></section>
<h1>Dodger Blue</h1>
<p>#29b6f6</p>
</section>
<section class="box">
<section class="color-full color-cerulean"></section>
<h1>Cerulean</h1>
<p>#039be5</p>
</section>
<section class="box">
<section class="color-full color-lochmara"></section>
<h1>Lochmara</h1>
<p>#0288d1</p>
</section>
<section class="box">
<section class="color-full color-lochmara"></section>
<h1>Lochmara</h1>
<p>#0277bd</p>
</section>
<section class="box">
<section class="color-full color-bahama-blue"></section>
<h1>Bahama Blue</h1>
<p>#01579b</p>
</section>
<section class="box">
<section class="color-full color-anakiwa"></section>
<h1>Anakiwa</h1>
<p>#80d8ff</p>
</section>
<section class="box">
<section class="color-full color-dodger-blue"></section>
<h1>Dodger Blue</h1>
<p>#40c4ff</p>
</section>
<section class="box">
<section class="color-full color-dodger-blue"></section>
<h1>Dodger Blue</h1>
<p>#00b0ff</p>
</section>
<section class="box">
<section class="color-full color-azure-radiance"></section>
<h1>Azure Radiance</h1>
<p>#0091ea</p>
</section>
<section class="box">
<section class="color-full color-robins-egg-blue"></section>
<h1>Robin's Egg Blue</h1>
<p>#00bcd4</p>
</section>
<section class="box">
<section class="color-full color-white-ice"></section>
<h1>White Ice</h1>
<p>#e0f7fa</p>
</section>
<section class="box">
<section class="color-full color-blizzard-blue"></section>
<h1>Blizzard Blue</h1>
<p>#b2ebf2</p>
</section>
<section class="box">
<section class="color-full color-spray"></section>
<h1>Spray</h1>
<p>#80deea</p>
</section>
<section class="box">
<section class="color-full color-turquoise-blue"></section>
<h1>Turquoise Blue</h1>
<p>#4dd0e1</p>
</section>
<section class="box">
<section class="color-full color-scooter"></section>
<h1>Scooter</h1>
<p>#26c6da</p>
</section>
<section class="box">
<section class="color-full color-pacific-blue"></section>
<h1>Pacific Blue</h1>
<p>#00acc1</p>
</section>
<section class="box">
<section class="color-full color-bondi-blue"></section>
<h1>Bondi Blue</h1>
<p>#0097a7</p>
</section>
<section class="box">
<section class="color-full color-blue-lagoon"></section>
<h1>Blue Lagoon</h1>
<p>#00838f</p>
</section>
<section class="box">
<section class="color-full color-blue-stone"></section>
<h1>Blue Stone</h1>
<p>#006064</p>
</section>
<section class="box">
<section class="color-full color-anakiwa"></section>
<h1>Anakiwa</h1>
<p>#84ffff</p>
</section>
<section class="box">
<section class="color-full color-cyan-/-aqua"></section>
<h1>Cyan / Aqua</h1>
<p>#18ffff</p>
</section>
<section class="box">
<section class="color-full color-cyan-/-aqua"></section>
<h1>Cyan / Aqua</h1>
<p>#00e5ff</p>
</section>
<section class="box">
<section class="color-full color-cerulean"></section>
<h1>Cerulean</h1>
<p>#00b8d4</p>
</section>
<section class="box">
<section class="color-full color-persian-green"></section>
<h1>Persian Green</h1>
<p>#009688</p>
</section>
<section class="box">
<section class="color-full color-aqua-squeeze"></section>
<h1>Aqua Squeeze</h1>
<p>#e0f2f1</p>
</section>
<section class="box">
<section class="color-full color-aqua-island"></section>
<h1>Aqua Island</h1>
<p>#b2dfdb</p>
</section>
<section class="box">
<section class="color-full color-monte-carlo"></section>
<h1>Monte Carlo</h1>
<p>#80cbc4</p>
</section>
<section class="box">
<section class="color-full color-fountain-blue"></section>
<h1>Fountain Blue</h1>
<p>#4db6ac</p>
</section>
<section class="box">
<section class="color-full color-jungle-green"></section>
<h1>Jungle Green</h1>
<p>#26a69a</p>
</section>
<section class="box">
<section class="color-full color-teal"></section>
<h1>Teal</h1>
<p>#00897b</p>
</section>
<section class="box">
<section class="color-full color-pine-green"></section>
<h1>Pine Green</h1>
<p>#00796b</p>
</section>
<section class="box">
<section class="color-full color-tropical-rain-forest"></section>
<h1>Tropical Rain Forest</h1>
<p>#00695c</p>
</section>
<section class="box">
<section class="color-full color-aqua-deep"></section>
<h1>Aqua Deep</h1>
<p>#004d40</p>
</section>
<section class="box">
<section class="color-full color-aero-blue"></section>
<h1>Aero Blue</h1>
<p>#a7ffeb</p>
</section>
<section class="box">
<section class="color-full color-aquamarine"></section>
<h1>Aquamarine</h1>
<p>#64ffda</p>
</section>
<section class="box">
<section class="color-full color-java"></section>
<h1>Java</h1>
<p>#1de9b6</p>
</section>
<section class="box">
<section class="color-full color-caribbean-green"></section>
<h1>Caribbean Green</h1>
<p>#00bfa5</p>
</section>
<section class="box">
<section class="color-full color-fruit-salad"></section>
<h1>Fruit Salad</h1>
<p>#4caf50</p>
</section>
<section class="box">
<section class="color-full color-panache"></section>
<h1>Panache</h1>
<p>#e8f5e9</p>
</section>
<section class="box">
<section class="color-full color-zanah"></section>
<h1>Zanah</h1>
<p>#c8e6c9</p>
</section>
<section class="box">
<section class="color-full color-moss-green"></section>
<h1>Moss Green</h1>
<p>#a5d6a7</p>
</section>
<section class="box">
<section class="color-full color-de-york"></section>
<h1>De York</h1>
<p>#81c784</p>
</section>
<section class="box">
<section class="color-full color-fern"></section>
<h1>Fern</h1>
<p>#66bb6a</p>
</section>
<section class="box">
<section class="color-full color-apple"></section>
<h1>Apple</h1>
<p>#43a047</p>
</section>
<section class="box">
<section class="color-full color-apple"></section>
<h1>Apple</h1>
<p>#388e3c</p>
</section>
<section class="box">
<section class="color-full color-sea-green"></section>
<h1>Sea Green</h1>
<p>#2e7d32</p>
</section>
<section class="box">
<section class="color-full color-parsley"></section>
<h1>Parsley</h1>
<p>#1b5e20</p>
</section>
<section class="box">
<section class="color-full color-magic-mint"></section>
<h1>Magic Mint</h1>
<p>#b9f6ca</p>
</section>
<section class="box">
<section class="color-full color-turquoise-blue"></section>
<h1>Turquoise Blue</h1>
<p>#69f0ae</p>
</section>
<section class="box">
<section class="color-full color-spring-green"></section>
<h1>Spring Green</h1>
<p>#00e676</p>
</section>
<section class="box">
<section class="color-full color-malachite"></section>
<h1>Malachite</h1>
<p>#00c853</p>
</section>
<section class="box">
<section class="color-full color-sushi"></section>
<h1>Sushi</h1>
<p>#8bc34a</p>
</section>
<section class="box">
<section class="color-full color-loafer"></section>
<h1>Loafer</h1>
<p>#f1f8e9</p>
</section>
<section class="box">
<section class="color-full color-chrome-white"></section>
<h1>Chrome White</h1>
<p>#dcedc8</p>
</section>
<section class="box">
<section class="color-full color-deco"></section>
<h1>Deco</h1>
<p>#c5e1a5</p>
</section>
<section class="box">
<section class="color-full color-feijoa"></section>
<h1>Feijoa</h1>
<p>#aed581</p>
</section>
<section class="box">
<section class="color-full color-celery"></section>
<h1>Celery</h1>
<p>#9ccc65</p>
</section>
<section class="box">
<section class="color-full color-sushi"></section>
<h1>Sushi</h1>
<p>#7cb342</p>
</section>
<section class="box">
<section class="color-full color-apple"></section>
<h1>Apple</h1>
<p>#689f38</p>
</section>
<section class="box">
<section class="color-full color-apple"></section>
<h1>Apple</h1>
<p>#558b2f</p>
</section>
<section class="box">
<section class="color-full color-dell"></section>
<h1>Dell</h1>
<p>#33691e</p>
</section>
<section class="box">
<section class="color-full color-reef"></section>
<h1>Reef</h1>
<p>#ccff90</p>
</section>
<section class="box">
<section class="color-full color-green-yellow"></section>
<h1>Green Yellow</h1>
<p>#b2ff59</p>
</section>
<section class="box">
<section class="color-full color-chartreuse"></section>
<h1>Chartreuse</h1>
<p>#76ff03</p>
</section>
<section class="box">
<section class="color-full color-lima"></section>
<h1>Lima</h1>
<p>#64dd17</p>
</section>
<section class="box">
<section class="color-full color-pear"></section>
<h1>Pear</h1>
<p>#cddc39</p>
</section>
<section class="box">
<section class="color-full color-coconut-cream"></section>
<h1>Coconut Cream</h1>
<p>#f9fbe7</p>
</section>
<section class="box">
<section class="color-full color-tusk"></section>
<h1>Tusk</h1>
<p>#f0f4c3</p>
</section>
<section class="box">
<section class="color-full color-primrose"></section>
<h1>Primrose</h1>
<p>#e6ee9c</p>
</section>
<section class="box">
<section class="color-full color-manz"></section>
<h1>Manz</h1>
<p>#dce775</p>
</section>
<section class="box">
<section class="color-full color-wattle"></section>
<h1>Wattle</h1>
<p>#d4e157</p>
</section>
<section class="box">
<section class="color-full color-earls-green"></section>
<h1>Earls Green</h1>
<p>#c0ca33</p>
</section>
<section class="box">
<section class="color-full color-lemon-ginger"></section>
<h1>Lemon Ginger</h1>
<p>#afb42b</p>
</section>
<section class="box">
<section class="color-full color-lemon-ginger"></section>
<h1>Lemon Ginger</h1>
<p>#9e9d24</p>
</section>
<section class="box">
<section class="color-full color-trendy-green"></section>
<h1>Trendy Green</h1>
<p>#827717</p>
</section>
<section class="box">
<section class="color-full color-dolly"></section>
<h1>Dolly</h1>
<p>#f4ff81</p>
</section>
<section class="box">
<section class="color-full color-golden-fizz"></section>
<h1>Golden Fizz</h1>
<p>#eeff41</p>
</section>
<section class="box">
<section class="color-full color-electric-lime"></section>
<h1>Electric Lime</h1>
<p>#c6ff00</p>
</section>
<section class="box">
<section class="color-full color-lime"></section>
<h1>Lime</h1>
<p>#aeea00</p>
</section>
<section class="box">
<section class="color-full color-gorse"></section>
<h1>Gorse</h1>
<p>#ffeb3b</p>
</section>
<section class="box">
<section class="color-full color-travertine"></section>
<h1>Travertine</h1>
<p>#fffde7</p>
</section>
<section class="box">
<section class="color-full color-lemon-chiffon"></section>
<h1>Lemon Chiffon</h1>
<p>#fff9c4</p>
</section>
<section class="box">
<section class="color-full color-picasso"></section>
<h1>Picasso</h1>
<p>#fff59d</p>
</section>
<section class="box">
<section class="color-full color-paris-daisy"></section>
<h1>Paris Daisy</h1>
<p>#fff176</p>
</section>
<section class="box">
<section class="color-full color-gorse"></section>
<h1>Gorse</h1>
<p>#ffee58</p>
</section>
<section class="box">
<section class="color-full color-bright-sun"></section>
<h1>Bright Sun</h1>
<p>#fdd835</p>
</section>
<section class="box">
<section class="color-full color-lightning-yellow"></section>
<h1>Lightning Yellow</h1>
<p>#fbc02d</p>
</section>
<section class="box">
<section class="color-full color-sea-buckthorn"></section>
<h1>Sea Buckthorn</h1>
<p>#f9a825</p>
</section>
<section class="box">
<section class="color-full color-ecstasy"></section>
<h1>Ecstasy</h1>
<p>#f57f17</p>
</section>
<section class="box">
<section class="color-full color-dolly"></section>
<h1>Dolly</h1>
<p>#ffff8d</p>
</section>
<section class="box">
<section class="color-full color-yellow"></section>
<h1>Yellow</h1>
<p>#ffff00</p>
</section>
<section class="box">
<section class="color-full color-turbo"></section>
<h1>Turbo</h1>
<p>#ffea00</p>
</section>
<section class="box">
<section class="color-full color-gold"></section>
<h1>Gold</h1>
<p>#ffd600</p>
</section>
<section class="box">
<section class="color-full color-amber"></section>
<h1>Amber</h1>
<p>#ffc107</p>
</section>
<section class="box">
<section class="color-full color-gin-fizz"></section>
<h1>Gin Fizz</h1>
<p>#fff8e1</p>
</section>
<section class="box">
<section class="color-full color-buttermilk"></section>
<h1>Buttermilk</h1>
<p>#ffecb3</p>
</section>
<section class="box">
<section class="color-full color-salomie"></section>
<h1>Salomie</h1>
<p>#ffe082</p>
</section>
<section class="box">
<section class="color-full color-mustard"></section>
<h1>Mustard</h1>
<p>#ffd54f</p>
</section>
<section class="box">
<section class="color-full color-sunglow"></section>
<h1>Sunglow</h1>
<p>#ffca28</p>
</section>
<section class="box">
<section class="color-full color-selective-yellow"></section>
<h1>Selective Yellow</h1>
<p>#ffb300</p>
</section>
<section class="box">
<section class="color-full color-orange-peel"></section>
<h1>Orange Peel</h1>
<p>#ffa000</p>
</section>
<section class="box">
<section class="color-full color-pizazz"></section>
<h1>Pizazz</h1>
<p>#ff8f00</p>
</section>
<section class="box">
<section class="color-full color-blaze-orange"></section>
<h1>Blaze Orange</h1>
<p>#ff6f00</p>
</section>
<section class="box">
<section class="color-full color-kournikova"></section>
<h1>Kournikova</h1>
<p>#ffe57f</p>
</section>
<section class="box">
<section class="color-full color-bright-sun"></section>
<h1>Bright Sun</h1>
<p>#ffd740</p>
</section>
<section class="box">
<section class="color-full color-amber"></section>
<h1>Amber</h1>
<p>#ffc400</p>
</section>
<section class="box">
<section class="color-full color-web-orange"></section>
<h1>Web Orange</h1>
<p>#ffab00</p>
</section>
<section class="box">
<section class="color-full color-pizazz"></section>
<h1>Pizazz</h1>
<p>#ff9800</p>
</section>
<section class="box">
<section class="color-full color-sazerac"></section>
<h1>Sazerac</h1>
<p>#fff3e0</p>
</section>
<section class="box">
<section class="color-full color-frangipani"></section>
<h1>Frangipani</h1>
<p>#ffe0b2</p>
</section>
<section class="box">
<section class="color-full color-chardonnay"></section>
<h1>Chardonnay</h1>
<p>#ffcc80</p>
</section>
<section class="box">
<section class="color-full color-texas-rose"></section>
<h1>Texas Rose</h1>
<p>#ffb74d</p>
</section>
<section class="box">
<section class="color-full color-sunshade"></section>
<h1>Sunshade</h1>
<p>#ffa726</p>
</section>
<section class="box">
<section class="color-full color-pizazz"></section>
<h1>Pizazz</h1>
<p>#fb8c00</p>
</section>
<section class="box">
<section class="color-full color-gold-drop"></section>
<h1>Gold Drop</h1>
<p>#f57c00</p>
</section>
<section class="box">
<section class="color-full color-clementine"></section>
<h1>Clementine</h1>
<p>#ef6c00</p>
</section>
<section class="box">
<section class="color-full color-trinidad"></section>
<h1>Trinidad</h1>
<p>#e65100</p>
</section>
<section class="box">
<section class="color-full color-grandis"></section>
<h1>Grandis</h1>
<p>#ffd180</p>
</section>
<section class="box">
<section class="color-full color-yellow-orange"></section>
<h1>Yellow Orange</h1>
<p>#ffab40</p>
</section>
<section class="box">
<section class="color-full color-pizazz"></section>
<h1>Pizazz</h1>
<p>#ff9100</p>
</section>
<section class="box">
<section class="color-full color-blaze-orange"></section>
<h1>Blaze Orange</h1>
<p>#ff6d00</p>
</section>
<section class="box">
<section class="color-full color-orange"></section>
<h1>Orange</h1>
<p>#ff5722</p>
</section>
<section class="box">
<section class="color-full color-linen"></section>
<h1>Linen</h1>
<p>#fbe9e7</p>
</section>
<section class="box">
<section class="color-full color-romantic"></section>
<h1>Romantic</h1>
<p>#ffccbc</p>
</section>
<section class="box">
<section class="color-full color-mona-lisa"></section>
<h1>Mona Lisa</h1>
<p>#ffab91</p>
</section>
<section class="box">
<section class="color-full color-salmon"></section>
<h1>Salmon</h1>
<p>#ff8a65</p>
</section>
<section class="box">
<section class="color-full color-burning-orange"></section>
<h1>Burning Orange</h1>
<p>#ff7043</p>
</section>
<section class="box">
<section class="color-full color-pomegranate"></section>
<h1>Pomegranate</h1>
<p>#f4511e</p>
</section>
<section class="box">
<section class="color-full color-cinnabar"></section>
<h1>Cinnabar</h1>
<p>#e64a19</p>
</section>
<section class="box">
<section class="color-full color-tia-maria"></section>
<h1>Tia Maria</h1>
<p>#d84315</p>
</section>
<section class="box">
<section class="color-full color-tia-maria"></section>
<h1>Tia Maria</h1>
<p>#bf360c</p>
</section>
<section class="box">
<section class="color-full color-vivid-tangerine"></section>
<h1>Vivid Tangerine</h1>
<p>#ff9e80</p>
</section>
<section class="box">
<section class="color-full color-burning-orange"></section>
<h1>Burning Orange</h1>
<p>#ff6e40</p>
</section>
<section class="box">
<section class="color-full color-vermilion"></section>
<h1>Vermilion</h1>
<p>#ff3d00</p>
</section>
<section class="box">
<section class="color-full color-grenadier"></section>
<h1>Grenadier</h1>
<p>#dd2c00</p>
</section>
<section class="box">
<section class="color-full color-silver-chalice"></section>
<h1>Silver Chalice</h1>
<p>#9e9e9e</p>
</section>
<section class="box">
<section class="color-full color-alabaster"></section>
<h1>Alabaster</h1>
<p>#fafafa</p>
</section>
<section class="box">
<section class="color-full color-wild-sand"></section>
<h1>Wild Sand</h1>
<p>#f5f5f5</p>
</section>
<section class="box">
<section class="color-full color-gallery"></section>
<h1>Gallery</h1>
<p>#eeeeee</p>
</section>
<section class="box">
<section class="color-full color-alto"></section>
<h1>Alto</h1>
<p>#e0e0e0</p>
</section>
<section class="box">
<section class="color-full color-silver"></section>
<h1>Silver</h1>
<p>#bdbdbd</p>
</section>
<section class="box">
<section class="color-full color-boulder"></section>
<h1>Boulder</h1>
<p>#757575</p>
</section>
<section class="box">
<section class="color-full color-dove-gray"></section>
<h1>Dove Gray</h1>
<p>#616161</p>
</section>
<section class="box">
<section class="color-full color-tundora"></section>
<h1>Tundora</h1>
<p>#424242</p>
</section>
<section class="box">
<section class="color-full color-mine-shaft"></section>
<h1>Mine Shaft</h1>
<p>#212121</p>
</section>
<section class="box">
<section class="color-full color-lynch"></section>
<h1>Lynch</h1>
<p>#607d8b</p>
</section>
<section class="box">
<section class="color-full color-porcelain"></section>
<h1>Porcelain</h1>
<p>#eceff1</p>
</section>
<section class="box">
<section class="color-full color-geyser"></section>
<h1>Geyser</h1>
<p>#cfd8dc</p>
</section>
<section class="box">
<section class="color-full color-tower-gray"></section>
<h1>Tower Gray</h1>
<p>#b0bec5</p>
</section>
<section class="box">
<section class="color-full color-gull-gray"></section>
<h1>Gull Gray</h1>
<p>#90a4ae</p>
</section>
<section class="box">
<section class="color-full color-regent-gray"></section>
<h1>Regent Gray</h1>
<p>#78909c</p>
</section>
<section class="box">
<section class="color-full color-cutty-sark"></section>
<h1>Cutty Sark</h1>
<p>#546e7a</p>
</section>
<section class="box">
<section class="color-full color-fiord"></section>
<h1>Fiord</h1>
<p>#455a64</p>
</section>
<section class="box">
<section class="color-full color-limed-spruce"></section>
<h1>Limed Spruce</h1>
<p>#37474f</p>
</section>
<section class="box">
<section class="color-full color-outer-space"></section>
<h1>Outer Space</h1>
<p>#263238</p>
</section>
<section class="box">
<section class="color-full color-roman-coffee"></section>
<h1>Roman Coffee</h1>
<p>#795548</p>
</section>
<section class="box">
<section class="color-full color-ebb"></section>
<h1>Ebb</h1>
<p>#efebe9</p>
</section>
<section class="box">
<section class="color-full color-swirl"></section>
<h1>Swirl</h1>
<p>#d7ccc8</p>
</section>
<section class="box">
<section class="color-full color-silk"></section>
<h1>Silk</h1>
<p>#bcaaa4</p>
</section>
<section class="box">
<section class="color-full color-pharlap"></section>
<h1>Pharlap</h1>
<p>#a1887f</p>
</section>
<section class="box">
<section class="color-full color-cement"></section>
<h1>Cement</h1>
<p>#8d6e63</p>
</section>
<section class="box">
<section class="color-full color-kabul"></section>
<h1>Kabul</h1>
<p>#6d4c41</p>
</section>
<section class="box">
<section class="color-full color-millbrook"></section>
<h1>Millbrook</h1>
<p>#5d4037</p>
</section>
<section class="box">
<section class="color-full color-rock"></section>
<h1>Rock</h1>
<p>#4e342e</p>
</section>
<section class="box">
<section class="color-full color-english-walnut"></section>
<h1>English Walnut</h1>
<p>#3e2723</p>
</section>
<section class="box">
<section class="color-full color-black"></section>
<h1>Black</h1>
<p>#000000</p>
</section>
<section class="box">
<section class="color-full color-white"></section>
<h1>White</h1>
<p>#ffffff</p>
</section>
</body>
</html>
This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
