Material colour pallette

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