<h1>Color Palettes</h1>
<h2>The New Defaults</h2>
<h3>Whites</h3>
<div class="color-container">
<div class="color-item white">white<br /><strong>#fffefc</strong></div>
<div class="color-item alabaster">alabaster<br /><strong>#fefaf0</strong></div>
<div class="color-item snow">snow<br /><strong>#f4fefd</strong></div>
<div class="color-item ivory">ivory<br /><strong>#fef7e5</strong></div>
<div class="color-item cream">cream<br /><strong>#fffbda</strong></div>
<div class="color-item eggshell">eggshell<br /><strong>#fef9e3</strong></div>
<div class="color-item cotton">cotton<br /><strong>#fbfcf7</strong></div>
<div class="color-item chiffon">chiffon<br /><strong>#fafaf1</strong></div>
<div class="color-item salt">salt<br /><strong>#f8efec</strong></div>
<div class="color-item lace">lace<br /><strong>#faf3ea</strong></div>
<div class="color-item coconut">coconut<br /><strong>#fff1e6</strong></div>
<div class="color-item linen">linen<br /><strong>#f2ebd3</strong></div>
<div class="color-item bone">bone<br /><strong>#e7dfcc</strong></div>
<div class="color-item porcelain">porcelain<br /><strong>#fffffc</strong></div>
<div class="color-item parchment">parchment<br /><strong>#fcf6df</strong></div>
<div class="color-item rice">rice<br /><strong>#fbf6ef</strong></div>
</div>
<h3>blues</h3>
<div class="color-container">
<div class="color-item blue">blue<br /><strong>#0074d9</strong></div>
<div class="color-item navy">navy<br /><strong>#001f3f</strong></div>
<div class="color-item aqua">aqua<br /><strong>#7fdbff</strong></div>
<div class="color-item sky">sky<br /><strong>#00b2ff</strong></div>
<div class="color-item teal">teal<br /><strong>#39cccc</strong></div>
<div class="color-item slate">slate<br /><strong>#757b87</strong></div>
<div class="color-item indigo">indigo<br /><strong>#281e5d</strong></div>
<div class="color-item cobalt">cobalt<br /><strong>#1438bd</strong></div>
<div class="color-item ocean">ocean<br /><strong>#026063</strong></div>
<div class="color-item peacock">peacock<br /><strong>#002d37</strong></div>
<div class="color-item azure">azure<br /><strong>#1621a6</strong></div>
<div class="color-item cerulean">cerulean<br /><strong>#0592c2</strong></div>
<div class="color-item lapis">lapis<br /><strong>#2632c2</strong></div>
<div class="color-item spruce">spruce<br /><strong>#2c3e4b</strong></div>
<div class="color-item stone">stone<br /><strong>#59788d</strong></div>
<div class="color-item aegean">aegean<br /><strong>#1e456e</strong></div>
<div class="color-item berry">berry<br /><strong>#24146f</strong></div>
<div class="color-item denim">denim<br /><strong>#141e3c</strong></div>
<div class="color-item admiral">admiral<br /><strong>#061094</strong></div>
<div class="color-item sapphire">sapphire<br /><strong>#52b2c0</strong></div>
<div class="color-item arctic">arctic<br /><strong>#82edfd</strong></div>
</div>
<h3>browns</h3>
<div class="color-container">
<div class="color-item tan">tan<br /><strong>#e5dbac</strong></div>
<div class="color-item beige">beige<br /><strong>#ecdc99</strong></div>
<div class="color-item macaroon">macaroon<br /><strong>#f7df75</strong></div>
<div class="color-item hazelwood">hazelwood<br /><strong>#c9bc8e</strong></div>
<div class="color-item granola">granola<br /><strong>#d6b75a</strong></div>
<div class="color-item oat">oat<br /><strong>#dec98a</strong></div>
<div class="color-item eggnog">eggnog<br /><strong>#fbe29d</strong></div>
<div class="color-item fawn">fawn<br /><strong>#c7a951</strong></div>
<div class="color-item sugarcookie">sugarcookie<br /><strong>#f3ebad</strong></div>
<div class="color-item sand">sand<br /><strong>#d7b963</strong></div>
<div class="color-item sepia">sepia<br /><strong>#e3b678</strong></div>
<div class="color-item latte">latte<br /><strong>#e9c17b</strong></div>
<div class="color-item oyster">oyster<br /><strong>#dcd69f</strong></div>
<div class="color-item biscotti">biscotti<br /><strong>#e3c565</strong></div>
<div class="color-item parmesean">parmesean<br /><strong>#fee993</strong></div>
<div class="color-item hazelnut">hazelnut<br /><strong>#bda55d</strong></div>
<div class="color-item sandcastle">sandcastle<br /><strong>#dbc27d</strong></div>
<div class="color-item buttermilk">buttermilk<br /><strong>#fdefb2</strong></div>
<div class="color-item sanddollar">sanddollar<br /><strong>#ebe7b9</strong></div>
<div class="color-item shortbread">shortbread<br /><strong>#fce791</strong></div>
</div>
<h3>Yellows</h3>
<div class="color-container">
<div class="color-item yellow">yellow<br /><strong>#ffdc00</strong></div>
<div class="color-item canary">canary<br /><strong>#fac801</strong></div>
<div class="color-item gold">gold<br /><strong>#f9a602</strong></div>
<div class="color-item daffodil">daffodil<br /><strong>#feee88</strong></div>
<div class="color-item flaxen">flaxen<br /><strong>#d5b65a</strong></div>
<div class="color-item butter">butter<br /><strong>#fee226</strong></div>
<div class="color-item lemon">lemon<br /><strong>#effd5f</strong></div>
<div class="color-item mustard">mustard<br /><strong>#e9b829</strong></div>
<div class="color-item corn">corn<br /><strong>#e4cd04</strong></div>
<div class="color-item medallion">medallion<br /><strong>#e4b103</strong></div>
<div class="color-item dandelion">dandelion<br /><strong>#fdce2a</strong></div>
<div class="color-item bumblebee">bumblebee<br /><strong>#fce206</strong></div>
<div class="color-item banana">banana<br /><strong>#fcf4a3</strong></div>
<div class="color-item butterscotch">butterscotch<br /><strong>#fabd04</strong></div>
<div class="color-item dijon">dijon<br /><strong>#c29200</strong></div>
<div class="color-item honey">honey<br /><strong>#ec9707</strong></div>
<div class="color-item blonde">blonde<br /><strong>#fdeb75</strong></div>
<div class="color-item pineapple">pineapple<br /><strong>#ffe327</strong></div>
<div class="color-item tuscansun">tuscansun<br /><strong>#fcd12a</strong></div>
</div>
<h3>Oranges</h3>
<div class="color-container">
<div class="color-item orange">orange<br /><strong>#ff851b</strong></div>
<div class="color-item tangerine">tangerine<br /><strong>#f98228</strong></div>
<div class="color-item merigold">merigold<br /><strong>#fdae1d</strong></div>
<div class="color-item cider">cider<br /><strong>#b66827</strong></div>
<div class="color-item rust">rust<br /><strong>#8c4005</strong></div>
<div class="color-item ginger">ginger<br /><strong>#bc5703</strong></div>
<div class="color-item tiger">tiger<br /><strong>#fb6b02</strong></div>
<div class="color-item bronze">bronze<br /><strong>#b2560c</strong></div>
<div class="color-item cantaloupe">cantaloupe<br /><strong>#fca172</strong></div>
<div class="color-item apricot">apricot<br /><strong>#ed810f</strong></div>
<div class="color-item carrot">carrot<br /><strong>#ed7116</strong></div>
<div class="color-item squash">squash<br /><strong>#c95c09</strong></div>
<div class="color-item spice">spice<br /><strong>#7a3a03</strong></div>
<div class="color-item marmalade">marmalade<br /><strong>#d16102</strong></div>
<div class="color-item amber">amber<br /><strong>#893201</strong></div>
<div class="color-item sandstone">sandstone<br /><strong>#d57128</strong></div>
<div class="color-item yam">yam<br /><strong>#cc5801</strong></div>
</div>
<h3>reds</h3>
<div class="color-container">
<div class="color-item red">red<br /><strong>#ff4136</strong></div>
<div class="color-item cherry">cherry<br /><strong>#9a0f02</strong></div>
<div class="color-item rose">rose<br /><strong>#e2252a</strong></div>
<div class="color-item jam">jam<br /><strong>#600f0b</strong></div>
<div class="color-item merlot">merlot<br /><strong>#541f1b</strong></div>
<div class="color-item garnet">garnet<br /><strong>#5f0a04</strong></div>
<div class="color-item crimson">crimson<br /><strong>#b8100a</strong></div>
<div class="color-item ruby">ruby<br /><strong>#900503</strong></div>
<div class="color-item scarlet">scarlet<br /><strong>#910d08</strong></div>
<div class="color-item redwine">redwine<br /><strong>#4c0805</strong></div>
<div class="color-item redapple">redapple<br /><strong>#a91b0d</strong></div>
<div class="color-item mahogany">mahogany<br /><strong>#420d09</strong></div>
<div class="color-item blood">blood<br /><strong>#710c04</strong></div>
<div class="color-item sangria">sangria<br /><strong>#5f1914</strong></div>
<div class="color-item currant">currant<br /><strong>#670c07</strong></div>
<div class="color-item blush">blush<br /><strong>#bb544a</strong></div>
<div class="color-item candy">candy<br /><strong>#d31603</strong></div>
<div class="color-item lipstick">lipstick<br /><strong>#9b0f02</strong></div>
</div>
<h3>Pinks</h3>
<div class="color-container">
<div class="color-item pink">pink<br /><strong>#f69acd</strong></div>
<div class="color-item fuchsia">fuchsia<br /><strong>#f012be</strong></div>
<div class="color-item punch">punch<br /><strong>#f25278</strong></div>
<div class="color-item watermelon">watermelon<br /><strong>#fe809c</strong></div>
<div class="color-item flamingo">flamingo<br /><strong>#fda4b8</strong></div>
<div class="color-item rouge">rouge<br /><strong>#f26c8c</strong></div>
<div class="color-item salmon">salmon<br /><strong>#fdab9f</strong></div>
<div class="color-item coral">coral<br /><strong>#fe7d67</strong></div>
<div class="color-item peach">peach<br /><strong>#fb9483</strong></div>
<div class="color-item strawberry">strawberry<br /><strong>#fc4c4e</strong></div>
<div class="color-item rosewood">rosewood<br /><strong>#a04242</strong></div>
<div class="color-item lemonade">lemonade<br /><strong>#fabacb</strong></div>
<div class="color-item taffy">taffy<br /><strong>#fa85c4</strong></div>
<div class="color-item bubblegum">bubblegum<br /><strong>#fd5ca8</strong></div>
<div class="color-item balletslipper">balletslipper<br /><strong>#f69abf</strong></div>
<div class="color-item crepe">crepe<br /><strong>#f1b7c6</strong></div>
<div class="color-item maroon">maroon<br /><strong>#85144b</strong></div>
<div class="color-item hotpink">hotpink<br /><strong>#ff1696</strong></div>
</div>
<h3>purples</h3>
<div class="color-container">
<div class="color-item purple">purple<br /><strong>#b10dc9</strong></div>
<div class="color-item mauve">mauve<br /><strong>#7a4a89</strong></div>
<div class="color-item violet">violet<br /><strong>#710193</strong></div>
<div class="color-item boysenberry">boysenberry<br /><strong>#630536</strong></div>
<div class="color-item lavender">lavender<br /><strong>#e3a0f6</strong></div>
<div class="color-item plum">plum<br /><strong>#601a36</strong></div>
<div class="color-item lilac">lilac<br /><strong>#b65fcd</strong></div>
<div class="color-item periwinkle">periwinkle<br /><strong>#be93d4</strong></div>
<div class="color-item eggplant">eggplant<br /><strong>#311431</strong></div>
<div class="color-item iris">iris<br /><strong>#9866c5</strong></div>
<div class="color-item heather">heather<br /><strong>#9b7cb9</strong></div>
<div class="color-item amethyst">amethyst<br /><strong>#a45de4</strong></div>
<div class="color-item raisin">raisin<br /><strong>#290916</strong></div>
<div class="color-item orchid">orchid<br /><strong>#af69ee</strong></div>
<div class="color-item mulberry">mulberry<br /><strong>#4d0220</strong></div>
</div>
<h3>greens</h3>
<div class="color-container">
<div class="color-item green">green<br /><strong>#2ecc40</strong></div>
<div class="color-item chartreuse">chartreuse<br /><strong>#b0fd38</strong></div>
<div class="color-item juniper">juniper<br /><strong>#395311</strong></div>
<div class="color-item sage">sage<br /><strong>#728c69</strong></div>
<div class="color-item lime">lime<br /><strong>#01ff70</strong></div>
<div class="color-item fern">fern<br /><strong>#5dbc64</strong></div>
<div class="color-item olive">olive<br /><strong>#98bf64</strong></div>
<div class="color-item emerald">emerald<br /><strong>#038911</strong></div>
<div class="color-item pear">pear<br /><strong>#74b62d</strong></div>
<div class="color-item moss">moss<br /><strong>#476d1e</strong></div>
<div class="color-item shamrock">shamrock<br /><strong>#03ac13</strong></div>
<div class="color-item seafoam">seafoam<br /><strong>#3cec96</strong></div>
<div class="color-item pine">pine<br /><strong>#24501e</strong></div>
<div class="color-item parakeet">parakeet<br /><strong>#02c04a</strong></div>
<div class="color-item mint">mint<br /><strong>#98ecc3</strong></div>
<div class="color-item seaweed">seaweed<br /><strong>#354b21</strong></div>
<div class="color-item pickle">pickle<br /><strong>#5a7d36</strong></div>
<div class="color-item pistachio">pistachio<br /><strong>#b2d3c1</strong></div>
<div class="color-item basil">basil<br /><strong>#32622d</strong></div>
<div class="color-item crocodile">crocodile<br /><strong>#5f7c3a</strong></div>
</div>
<h3>Browns</h3>
<div class="color-container">
<div class="color-item brown">brown<br /><strong>#241709</strong></div>
<div class="color-item coffee">coffee<br /><strong>#4b371c</strong></div>
<div class="color-item mocha">mocha<br /><strong>#3c290d</strong></div>
<div class="color-item peanut">peanut<br /><strong>#795c34</strong></div>
<div class="color-item carob">carob<br /><strong>#35260f</strong></div>
<div class="color-item hickory">hickory<br /><strong>#371d10</strong></div>
<div class="color-item pecan">pecan<br /><strong>#4a2512</strong></div>
<div class="color-item walnut">walnut<br /><strong>#432711</strong></div>
<div class="color-item caramel">caramel<br /><strong>#66360f</strong></div>
<div class="color-item gingerbread">gingerbread<br /><strong>#5d2c04</strong></div>
<div class="color-item chocolate">chocolate<br /><strong>#2c1603</strong></div>
<div class="color-item tortilla">tortilla<br /><strong>#9a7b4f</strong></div>
<div class="color-item umber">umber<br /><strong>#352415</strong></div>
<div class="color-item tawny">tawny<br /><strong>#7e491d</strong></div>
<div class="color-item brunette">brunette<br /><strong>#391e07</strong></div>
<div class="color-item cinammon">cinammon<br /><strong>#642b0d</strong></div>
<div class="color-item penny">penny<br /><strong>#522915</strong></div>
</div>
<h3>greys</h3>
<div class="color-container">
<div class="color-item grey">grey<br /><strong>#aaaaaa</strong></div>
<div class="color-item shadow">shadow<br /><strong>#373737</strong></div>
<div class="color-item graphite">graphite<br /><strong>#584d5b</strong></div>
<div class="color-item iron">iron<br /><strong>#332d31</strong></div>
<div class="color-item pewter">pewter<br /><strong>#6a6880</strong></div>
<div class="color-item cloud">cloud<br /><strong>#c5c5d0</strong></div>
<div class="color-item silver">silver<br /><strong>#dddddd</strong></div>
<div class="color-item smoke">smoke<br /><strong>#59515f</strong></div>
<div class="color-item anchor">anchor<br /><strong>#42424c</strong></div>
<div class="color-item ash">ash<br /><strong>#554c4d</strong></div>
<div class="color-item porpoise">porpoise<br /><strong>#4d4c5c</strong></div>
<div class="color-item dove">dove<br /><strong>#7c6e7f</strong></div>
<div class="color-item fog">fog<br /><strong>#655965</strong></div>
<div class="color-item flint">flint<br /><strong>#7d7c9c</strong></div>
<div class="color-item pebble">pebble<br /><strong>#333333</strong></div>
<div class="color-item lead">lead<br /><strong>#403f4e</strong></div>
<div class="color-item coin">coin<br /><strong>#9897a9</strong></div>
<div class="color-item fossil">fossil<br /><strong>#787276</strong></div>
</div>
<h3>Blacks</h3>
<div class="color-container">
<div class="color-item black">black<br /><strong>#111111</strong></div>
<div class="color-item ebony">ebony<br /><strong>#080401</strong></div>
<div class="color-item crow">crow<br /><strong>#25221F</strong></div>
<div class="color-item charcoal">charcoal<br /><strong>#22202</strong></div>
</div>
<h3>Funky Colors</h3>
<div class="color-container">
<div class="color-item hemi-orange">Hemi Orange<br><strong>#F3782B</strong></div>
<div class="color-item plum-crazy">Plum Crazy Purple<br<strong>#6600CC</strong></div>
<div class="color-item panther-pink">Panther Pink<br><strong>#BE439D</strong></div>
<div class="color-item green-go">Green Go<br><strong>#339A4B</strong></div>
<div class="color-item sublime-green">Sublime Green<br><strong>#a0e03a</strong></div>
<div class="color-item go-mango">Go Mango<br><strong>#DA5246</strong></div>
<div class="color-item bright-green">Bright Green<br><strong>#66ff00</strong></div>
<div class="color-item top-banana">Top Banana<br><strong>#ffed4d</strong></div>
<div class="color-item citron-yella">Citron Yella<br><strong>#9fa91f</strong></div>
<div class="color-item butterscotch">Butterscotch<br><strong>#D48827</strong></div>
<div class="color-item cherry">Cherry<br><strong>#D2042D</strong></div>
<div class="color-item black-cherry">Black Cherry<br><strong>#52253A</strong></div>
<div class="color-item rebeccapurple">Rebecca Purple<br><strong>#663399</strong></div>
</div>
<h3>Lighter Color</h3>
<p>This demo uses <a href="https://drafts.csswg.org/css-color-5/#color-mix">color-mix()</a>, part of the level 5 CSS color specification to lighten a black-like colors in increments of 10%.</p>
<p><strong>Note: This demo only works in Firefox Nighttly and Safari TP122 or later with the `css color-mix()` experimental feature enabled as of 11/25/21. Because it is a demo, do not use in production!</strong></p>
<div class="color-container">
<div class="color-item charcoal">charcoal<br /><strong>#222023</strong></div>
<div class="color-item light-text9">charcoal<br /><strong>10% lighter</strong></div>
<div class="color-item light-text8">charcoal<br /><strong>20% lighter</strong></div>
<div class="color-item light-text7">charcoal<br /><strong>30% lighter</strong></div>
<div class="color-item light-text6">charcoal<br /><strong>40% lighter</strong></div>
<div class="color-item light-text5">charcoal<br /><strong>50% lighter</strong></div>
<div class="color-item light-text4">charcoal<br /><strong>60% lighter</strong></div>
<div class="color-item light-text3">charcoal<br /><strong>70% lighter</strong></div>
<div class="color-item light-text2">charcoal<br /><strong>80% lighter</strong></div>
<div class="color-item light-text1">charcoal<br /><strong>90% lighter</strong></div>
</div>
<h3>Darker Color</h3>
<p>This demo uses <a href="https://drafts.csswg.org/css-color-5/#color-mix">color-mix()</a>, part of the level 5 CSS color specification to darken a light green color in increments of 10%.</p>
<p><strong>Note: This demo only works in Firefox Nighttly and Safari TP122 or later with the `css color-mix()` experimental feature enabled as of 11/25/21. Because it is a demo, do not use in production!</strong></p>
<div class="color-container">
<div class="color-item mint">mint<br /><strong>#98ecc3</strong></div>
<div class="color-item dark-text9">mint<br /><strong>10% darker</strong></div>
<div class="color-item dark-text8">mint<br /><strong>20% darker</strong></div>
<div class="color-item dark-text7">mint<br /><strong>30% darker</strong></div>
<div class="color-item dark-text6">mint<br /><strong>40% darker</strong></div>
<div class="color-item dark-text5">mint<br /><strong>50% darker</strong></div>
<div class="color-item dark-text4">mint<br /><strong>60% darker</strong></div>
<div class="color-item dark-text3">mint<br /><strong>70% darker</strong></div>
<div class="color-item dark-text2">mint<br /><strong>80% darker</strong></div>
<div class="color-item dark-text1">mint<br /><strong>90% darker</strong></div>
</div>
<h1>Color Palettes</h1>
<h2>The New Defaults</h2>
<h3>Whites</h3>
<div class="color-container">
<div class="color-item white">white<br/><strong>#fffefc</strong></div>
<div class="color-item alabaster">alabaster<br/><strong>#fefaf0</strong></div>
<div class="color-item snow">snow<br/><strong>#f4fefd</strong></div>
<div class="color-item ivory">ivory<br/><strong>#fef7e5</strong></div>
<div class="color-item cream">cream<br/><strong>#fffbda</strong></div>
<div class="color-item eggshell">eggshell<br/><strong>#fef9e3</strong></div>
<div class="color-item cotton">cotton<br/><strong>#fbfcf7</strong></div>
<div class="color-item chiffon">chiffon<br/><strong>#fafaf1</strong></div>
<div class="color-item salt">salt<br/><strong>#f8efec</strong></div>
<div class="color-item lace">lace<br/><strong>#faf3ea</strong></div>
<div class="color-item coconut">coconut<br/><strong>#fff1e6</strong></div>
<div class="color-item linen">linen<br/><strong>#f2ebd3</strong></div>
<div class="color-item bone">bone<br/><strong>#e7dfcc</strong></div>
<div class="color-item porcelain">porcelain<br/><strong>#fffffc</strong></div>
<div class="color-item parchment">parchment<br/><strong>#fcf6df</strong></div>
<div class="color-item rice">rice<br/><strong>#fbf6ef</strong></div>
</div>
<h3>blues</h3>
<div class="color-container">
<div class="color-item blue">blue<br/><strong>#0074d9</strong></div>
<div class="color-item navy">navy<br/><strong>#001f3f</strong></div>
<div class="color-item aqua">aqua<br/><strong>#7fdbff</strong></div>
<div class="color-item sky">sky<br/><strong>#00b2ff</strong></div>
<div class="color-item teal">teal<br/><strong>#39cccc</strong></div>
<div class="color-item slate">slate<br/><strong>#757b87</strong></div>
<div class="color-item indigo">indigo<br/><strong>#281e5d</strong></div>
<div class="color-item cobalt">cobalt<br/><strong>#1438bd</strong></div>
<div class="color-item ocean">ocean<br/><strong>#026063</strong></div>
<div class="color-item peacock">peacock<br/><strong>#002d37</strong></div>
<div class="color-item azure">azure<br/><strong>#1621a6</strong></div>
<div class="color-item cerulean">cerulean<br/><strong>#0592c2</strong></div>
<div class="color-item lapis">lapis<br/><strong>#2632c2</strong></div>
<div class="color-item spruce">spruce<br/><strong>#2c3e4b</strong></div>
<div class="color-item stone">stone<br/><strong>#59788d</strong></div>
<div class="color-item aegean">aegean<br/><strong>#1e456e</strong></div>
<div class="color-item berry">berry<br/><strong>#24146f</strong></div>
<div class="color-item denim">denim<br/><strong>#141e3c</strong></div>
<div class="color-item admiral">admiral<br/><strong>#061094</strong></div>
<div class="color-item sapphire">sapphire<br/><strong>#52b2c0</strong></div>
<div class="color-item arctic">arctic<br/><strong>#82edfd</strong></div>
</div>
<h3>browns</h3>
<div class="color-container">
<div class="color-item tan">tan<br/><strong>#e5dbac</strong></div>
<div class="color-item beige">beige<br/><strong>#ecdc99</strong></div>
<div class="color-item macaroon">macaroon<br/><strong>#f7df75</strong></div>
<div class="color-item hazelwood">hazelwood<br/><strong>#c9bc8e</strong></div>
<div class="color-item granola">granola<br/><strong>#d6b75a</strong></div>
<div class="color-item oat">oat<br/><strong>#dec98a</strong></div>
<div class="color-item eggnog">eggnog<br/><strong>#fbe29d</strong></div>
<div class="color-item fawn">fawn<br/><strong>#c7a951</strong></div>
<div class="color-item sugarcookie">sugarcookie<br/><strong>#f3ebad</strong></div>
<div class="color-item sand">sand<br/><strong>#d7b963</strong></div>
<div class="color-item sepia">sepia<br/><strong>#e3b678</strong></div>
<div class="color-item latte">latte<br/><strong>#e9c17b</strong></div>
<div class="color-item oyster">oyster<br/><strong>#dcd69f</strong></div>
<div class="color-item biscotti">biscotti<br/><strong>#e3c565</strong></div>
<div class="color-item parmesean">parmesean<br/><strong>#fee993</strong></div>
<div class="color-item hazelnut">hazelnut<br/><strong>#bda55d</strong></div>
<div class="color-item sandcastle">sandcastle<br/><strong>#dbc27d</strong></div>
<div class="color-item buttermilk">buttermilk<br/><strong>#fdefb2</strong></div>
<div class="color-item sanddollar">sanddollar<br/><strong>#ebe7b9</strong></div>
<div class="color-item shortbread">shortbread<br/><strong>#fce791</strong></div>
</div>
<h3>Yellows</h3>
<div class="color-container">
<div class="color-item yellow">yellow<br/><strong>#ffdc00</strong></div>
<div class="color-item canary">canary<br/><strong>#fac801</strong></div>
<div class="color-item gold">gold<br/><strong>#f9a602</strong></div>
<div class="color-item daffodil">daffodil<br/><strong>#feee88</strong></div>
<div class="color-item flaxen">flaxen<br/><strong>#d5b65a</strong></div>
<div class="color-item butter">butter<br/><strong>#fee226</strong></div>
<div class="color-item lemon">lemon<br/><strong>#effd5f</strong></div>
<div class="color-item mustard">mustard<br/><strong>#e9b829</strong></div>
<div class="color-item corn">corn<br/><strong>#e4cd04</strong></div>
<div class="color-item medallion">medallion<br/><strong>#e4b103</strong></div>
<div class="color-item dandelion">dandelion<br/><strong>#fdce2a</strong></div>
<div class="color-item bumblebee">bumblebee<br/><strong>#fce206</strong></div>
<div class="color-item banana">banana<br/><strong>#fcf4a3</strong></div>
<div class="color-item butterscotch">butterscotch<br/><strong>#fabd04</strong></div>
<div class="color-item dijon">dijon<br/><strong>#c29200</strong></div>
<div class="color-item honey">honey<br/><strong>#ec9707</strong></div>
<div class="color-item blonde">blonde<br/><strong>#fdeb75</strong></div>
<div class="color-item pineapple">pineapple<br/><strong>#ffe327</strong></div>
<div class="color-item tuscansun">tuscansun<br/><strong>#fcd12a</strong></div>
</div>
<h3>Oranges</h3>
<div class="color-container">
<div class="color-item orange">orange<br/><strong>#ff851b</strong></div>
<div class="color-item tangerine">tangerine<br/><strong>#f98228</strong></div>
<div class="color-item merigold">merigold<br/><strong>#fdae1d</strong></div>
<div class="color-item cider">cider<br/><strong>#b66827</strong></div>
<div class="color-item rust">rust<br/><strong>#8c4005</strong></div>
<div class="color-item ginger">ginger<br/><strong>#bc5703</strong></div>
<div class="color-item tiger">tiger<br/><strong>#fb6b02</strong></div>
<div class="color-item bronze">bronze<br/><strong>#b2560c</strong></div>
<div class="color-item cantaloupe">cantaloupe<br/><strong>#fca172</strong></div>
<div class="color-item apricot">apricot<br/><strong>#ed810f</strong></div>
<div class="color-item carrot">carrot<br/><strong>#ed7116</strong></div>
<div class="color-item squash">squash<br/><strong>#c95c09</strong></div>
<div class="color-item spice">spice<br/><strong>#7a3a03</strong></div>
<div class="color-item marmalade">marmalade<br/><strong>#d16102</strong></div>
<div class="color-item amber">amber<br/><strong>#893201</strong></div>
<div class="color-item sandstone">sandstone<br/><strong>#d57128</strong></div>
<div class="color-item yam">yam<br/><strong>#cc5801</strong></div>
</div>
<h3>reds</h3>
<div class="color-container">
<div class="color-item red">red<br/><strong>#ff4136</strong></div>
<div class="color-item cherry">cherry<br/><strong>#9a0f02</strong></div>
<div class="color-item rose">rose<br/><strong>#e2252a</strong></div>
<div class="color-item jam">jam<br/><strong>#600f0b</strong></div>
<div class="color-item merlot">merlot<br/><strong>#541f1b</strong></div>
<div class="color-item garnet">garnet<br/><strong>#5f0a04</strong></div>
<div class="color-item crimson">crimson<br/><strong>#b8100a</strong></div>
<div class="color-item ruby">ruby<br/><strong>#900503</strong></div>
<div class="color-item scarlet">scarlet<br/><strong>#910d08</strong></div>
<div class="color-item redwine">redwine<br/><strong>#4c0805</strong></div>
<div class="color-item redapple">redapple<br/><strong>#a91b0d</strong></div>
<div class="color-item mahogany">mahogany<br/><strong>#420d09</strong></div>
<div class="color-item blood">blood<br/><strong>#710c04</strong></div>
<div class="color-item sangria">sangria<br/><strong>#5f1914</strong></div>
<div class="color-item currant">currant<br/><strong>#670c07</strong></div>
<div class="color-item blush">blush<br/><strong>#bb544a</strong></div>
<div class="color-item candy">candy<br/><strong>#d31603</strong></div>
<div class="color-item lipstick">lipstick<br/><strong>#9b0f02</strong></div>
</div>
<h3>Pinks</h3>
<div class="color-container">
<div class="color-item pink">pink<br/><strong>#f69acd</strong></div>
<div class="color-item fuchsia">fuchsia<br/><strong>#f012be</strong></div>
<div class="color-item punch">punch<br/><strong>#f25278</strong></div>
<div class="color-item watermelon">watermelon<br/><strong>#fe809c</strong></div>
<div class="color-item flamingo">flamingo<br/><strong>#fda4b8</strong></div>
<div class="color-item rouge">rouge<br/><strong>#f26c8c</strong></div>
<div class="color-item salmon">salmon<br/><strong>#fdab9f</strong></div>
<div class="color-item coral">coral<br/><strong>#fe7d67</strong></div>
<div class="color-item peach">peach<br/><strong>#fb9483</strong></div>
<div class="color-item strawberry">strawberry<br/><strong>#fc4c4e</strong></div>
<div class="color-item rosewood">rosewood<br/><strong>#a04242</strong></div>
<div class="color-item lemonade">lemonade<br/><strong>#fabacb</strong></div>
<div class="color-item taffy">taffy<br/><strong>#fa85c4</strong></div>
<div class="color-item bubblegum">bubblegum<br/><strong>#fd5ca8</strong></div>
<div class="color-item balletslipper">balletslipper<br/><strong>#f69abf</strong></div>
<div class="color-item crepe">crepe<br/><strong>#f1b7c6</strong></div>
<div class="color-item maroon">maroon<br/><strong>#85144b</strong></div>
<div class="color-item hotpink">hotpink<br/><strong>#ff1696</strong></div>
</div>
<h3>purples</h3>
<div class="color-container">
<div class="color-item purple">purple<br/><strong>#b10dc9</strong></div>
<div class="color-item mauve">mauve<br/><strong>#7a4a89</strong></div>
<div class="color-item violet">violet<br/><strong>#710193</strong></div>
<div class="color-item boysenberry">boysenberry<br/><strong>#630536</strong></div>
<div class="color-item lavender">lavender<br/><strong>#e3a0f6</strong></div>
<div class="color-item plum">plum<br/><strong>#601a36</strong></div>
<div class="color-item lilac">lilac<br/><strong>#b65fcd</strong></div>
<div class="color-item periwinkle">periwinkle<br/><strong>#be93d4</strong></div>
<div class="color-item eggplant">eggplant<br/><strong>#311431</strong></div>
<div class="color-item iris">iris<br/><strong>#9866c5</strong></div>
<div class="color-item heather">heather<br/><strong>#9b7cb9</strong></div>
<div class="color-item amethyst">amethyst<br/><strong>#a45de4</strong></div>
<div class="color-item raisin">raisin<br/><strong>#290916</strong></div>
<div class="color-item orchid">orchid<br/><strong>#af69ee</strong></div>
<div class="color-item mulberry">mulberry<br/><strong>#4d0220</strong></div>
</div>
<h3>greens</h3>
<div class="color-container">
<div class="color-item green">green<br/><strong>#2ecc40</strong></div>
<div class="color-item chartreuse">chartreuse<br/><strong>#b0fd38</strong></div>
<div class="color-item juniper">juniper<br/><strong>#395311</strong></div>
<div class="color-item sage">sage<br/><strong>#728c69</strong></div>
<div class="color-item lime">lime<br/><strong>#01ff70</strong></div>
<div class="color-item fern">fern<br/><strong>#5dbc64</strong></div>
<div class="color-item olive">olive<br/><strong>#98bf64</strong></div>
<div class="color-item emerald">emerald<br/><strong>#038911</strong></div>
<div class="color-item pear">pear<br/><strong>#74b62d</strong></div>
<div class="color-item moss">moss<br/><strong>#476d1e</strong></div>
<div class="color-item shamrock">shamrock<br/><strong>#03ac13</strong></div>
<div class="color-item seafoam">seafoam<br/><strong>#3cec96</strong></div>
<div class="color-item pine">pine<br/><strong>#24501e</strong></div>
<div class="color-item parakeet">parakeet<br/><strong>#02c04a</strong></div>
<div class="color-item mint">mint<br/><strong>#98ecc3</strong></div>
<div class="color-item seaweed">seaweed<br/><strong>#354b21</strong></div>
<div class="color-item pickle">pickle<br/><strong>#5a7d36</strong></div>
<div class="color-item pistachio">pistachio<br/><strong>#b2d3c1</strong></div>
<div class="color-item basil">basil<br/><strong>#32622d</strong></div>
<div class="color-item crocodile">crocodile<br/><strong>#5f7c3a</strong></div>
</div>
<h3>Browns</h3>
<div class="color-container">
<div class="color-item brown">brown<br/><strong>#241709</strong></div>
<div class="color-item coffee">coffee<br/><strong>#4b371c</strong></div>
<div class="color-item mocha">mocha<br/><strong>#3c290d</strong></div>
<div class="color-item peanut">peanut<br/><strong>#795c34</strong></div>
<div class="color-item carob">carob<br/><strong>#35260f</strong></div>
<div class="color-item hickory">hickory<br/><strong>#371d10</strong></div>
<div class="color-item pecan">pecan<br/><strong>#4a2512</strong></div>
<div class="color-item walnut">walnut<br/><strong>#432711</strong></div>
<div class="color-item caramel">caramel<br/><strong>#66360f</strong></div>
<div class="color-item gingerbread">gingerbread<br/><strong>#5d2c04</strong></div>
<div class="color-item chocolate">chocolate<br/><strong>#2c1603</strong></div>
<div class="color-item tortilla">tortilla<br/><strong>#9a7b4f</strong></div>
<div class="color-item umber">umber<br/><strong>#352415</strong></div>
<div class="color-item tawny">tawny<br/><strong>#7e491d</strong></div>
<div class="color-item brunette">brunette<br/><strong>#391e07</strong></div>
<div class="color-item cinammon">cinammon<br/><strong>#642b0d</strong></div>
<div class="color-item penny">penny<br/><strong>#522915</strong></div>
</div>
<h3>greys</h3>
<div class="color-container">
<div class="color-item grey">grey<br/><strong>#aaaaaa</strong></div>
<div class="color-item shadow">shadow<br/><strong>#373737</strong></div>
<div class="color-item graphite">graphite<br/><strong>#584d5b</strong></div>
<div class="color-item iron">iron<br/><strong>#332d31</strong></div>
<div class="color-item pewter">pewter<br/><strong>#6a6880</strong></div>
<div class="color-item cloud">cloud<br/><strong>#c5c5d0</strong></div>
<div class="color-item silver">silver<br/><strong>#dddddd</strong></div>
<div class="color-item smoke">smoke<br/><strong>#59515f</strong></div>
<div class="color-item anchor">anchor<br/><strong>#42424c</strong></div>
<div class="color-item ash">ash<br/><strong>#554c4d</strong></div>
<div class="color-item porpoise">porpoise<br/><strong>#4d4c5c</strong></div>
<div class="color-item dove">dove<br/><strong>#7c6e7f</strong></div>
<div class="color-item fog">fog<br/><strong>#655965</strong></div>
<div class="color-item flint">flint<br/><strong>#7d7c9c</strong></div>
<div class="color-item pebble">pebble<br/><strong>#333333</strong></div>
<div class="color-item lead">lead<br/><strong>#403f4e</strong></div>
<div class="color-item coin">coin<br/><strong>#9897a9</strong></div>
<div class="color-item fossil">fossil<br/><strong>#787276</strong></div>
</div>
<h3>Blacks</h3>
<div class="color-container">
<div class="color-item black">black<br/><strong>#111111</strong></div>
<div class="color-item ebony">ebony<br/><strong>#080401</strong></div>
<div class="color-item crow">crow<br/><strong>#25221F</strong></div>
<div class="color-item charcoal">charcoal<br/><strong>#22202</strong></div>
</div>
<h3>Funky Colors</h3>
<div class="color-container">
<div class="color-item hemi-orange">Hemi Orange<br><strong>#F3782B</strong></div>
<div class="color-item plum-crazy">Plum Crazy Purple<br<strong>#6600CC</strong></div>
<div class="color-item panther-pink">Panther Pink<br><strong>#BE439D</strong></div>
<div class="color-item green-go">Green Go<br><strong>#339A4B</strong></div>
<div class="color-item sublime-green">Sublime Green<br><strong>#a0e03a</strong></div>
<div class="color-item go-mango">Go Mango<br><strong>#DA5246</strong></div>
<div class="color-item bright-green">Bright Green<br><strong>#66ff00</strong></div>
<div class="color-item top-banana">Top Banana<br><strong>#ffed4d</strong></div>
<div class="color-item citron-yella">Citron Yella<br><strong>#9fa91f</strong></div>
<div class="color-item butterscotch">Butterscotch<br><strong>#D48827</strong></div>
<div class="color-item cherry">Cherry<br><strong>#D2042D</strong></div>
<div class="color-item black-cherry">Black Cherry<br><strong>#52253A</strong></div>
<div class="color-item rebeccapurple">Rebecca Purple<br><strong>#663399</strong></div>
</div>
<h3>Lighter Color</h3>
<p>This demo uses <a href="https://drafts.csswg.org/css-color-5/#color-mix">color-mix()</a>, part of the level 5 CSS color specification to lighten a black-like colors in increments of 10%.</p>
<p><strong>Note: This demo only works in Firefox Nighttly and Safari TP122 or later with the `css color-mix()` experimental feature enabled as of 11/25/21. Because it is a demo, do not use in production!</strong></p>
<div class="color-container">
<div class="color-item charcoal">charcoal<br /><strong>#222023</strong></div>
<div class="color-item light-text9">charcoal<br /><strong>10% lighter</strong></div>
<div class="color-item light-text8">charcoal<br /><strong>20% lighter</strong></div>
<div class="color-item light-text7">charcoal<br /><strong>30% lighter</strong></div>
<div class="color-item light-text6">charcoal<br /><strong>40% lighter</strong></div>
<div class="color-item light-text5">charcoal<br /><strong>50% lighter</strong></div>
<div class="color-item light-text4">charcoal<br /><strong>60% lighter</strong></div>
<div class="color-item light-text3">charcoal<br /><strong>70% lighter</strong></div>
<div class="color-item light-text2">charcoal<br /><strong>80% lighter</strong></div>
<div class="color-item light-text1">charcoal<br /><strong>90% lighter</strong></div>
</div>
<h3>Darker Color</h3>
<p>This demo uses <a href="https://drafts.csswg.org/css-color-5/#color-mix">color-mix()</a>, part of the level 5 CSS color specification to darken a light green color in increments of 10%.</p>
<p><strong>Note: This demo only works in Firefox Nighttly and Safari TP122 or later with the `css color-mix()` experimental feature enabled as of 11/25/21. Because it is a demo, do not use in production!</strong></p>
<div class="color-container">
<div class="color-item mint">mint<br /><strong>#98ecc3</strong></div>
<div class="color-item dark-text9">mint<br /><strong>10% darker</strong></div>
<div class="color-item dark-text8">mint<br /><strong>20% darker</strong></div>
<div class="color-item dark-text7">mint<br /><strong>30% darker</strong></div>
<div class="color-item dark-text6">mint<br /><strong>40% darker</strong></div>
<div class="color-item dark-text5">mint<br /><strong>50% darker</strong></div>
<div class="color-item dark-text4">mint<br /><strong>60% darker</strong></div>
<div class="color-item dark-text3">mint<br /><strong>70% darker</strong></div>
<div class="color-item dark-text2">mint<br /><strong>80% darker</strong></div>
<div class="color-item dark-text1">mint<br /><strong>90% darker</strong></div>
</div>
/* No context defined. */
/* color-mix() experiment: lighten a charcoal black */
:root {
/* lightening charcoal */
--text1: color-mix(in srgb, var(--color-charcoal) 10%, white);
--text2: color-mix(in srgb, var(--color-charcoal) 20%, white);
--text3: color-mix(in srgb, var(--color-charcoal) 30%, white);
--text4: color-mix(in srgb, var(--color-charcoal) 40%, white);
--text5: color-mix(in srgb, var(--color-charcoal) 50%, white);
--text6: color-mix(in srgb, var(--color-charcoal) 60%, white);
--text7: color-mix(in srgb, var(--color-charcoal) 70%, white);
--text8: color-mix(in srgb, var(--color-charcoal) 80%, white);
--text9: color-mix(in srgb, var(--color-charcoal) 90%, white);
}
.light-text1 {
background-color: var(--text1);
}
.light-text2 {
background-color: var(--text2);
}
.light-text3 {
background-color: var(--text3);
}
.light-text4 {
background-color: var(--text4);
}
.light-text5 {
background-color: var(--text5);
}
.light-text6 {
background-color: var(--text6);
}
.light-text7 {
background-color: var(--text7);
}
.light-text8 {
background-color: var(--text8);
}
.light-text9 {
background-color: var(--text9);
color: #fff;
}
/* color-mix() experiment: darken a dark green mint color */
:root {
--dark-text1: color-mix(in srgb, var(--color-mint) 10%, black);
--dark-text2: color-mix(in srgb, var(--color-mint) 20%, black);
--dark-text3: color-mix(in srgb, var(--color-mint) 30%, black);
--dark-text4: color-mix(in srgb, var(--color-mint) 40%, black);
--dark-text5: color-mix(in srgb, var(--color-mint) 50%, black);
--dark-text6: color-mix(in srgb, var(--color-mint) 60%, black);
--dark-text7: color-mix(in srgb, var(--color-mint) 70%, black);
--dark-text8: color-mix(in srgb, var(--color-mint) 80%, black);
--dark-text9: color-mix(in srgb, var(--color-mint) 90%, black);
}
.dark-text1 {
background-color: var(--dark-text1);
color: #fff;
}
.dark-text2 {
background-color: var(--dark-text2);
color: #fff;
}
.dark-text3 {
background-color: var(--dark-text3);
color: #fff;
}
.dark-text4 {
background-color: var(--dark-text4);
color: #fff;
}
.dark-text5 {
background-color: var(--dark-text5);
color: #fff;
}
.dark-text6 {
background-color: var(--dark-text6);
color: #fff;
}
.dark-text7 {
background-color: var(--dark-text7);
color: #fff;
}
.dark-text8 {
background-color: var(--dark-text8);
color: #fff;
}
.dark-text9 {
background-color: var(--dark-text9);
color: #fff;
}
:root {
/* whites */
--color-white: #fffeff;
--color-alabaster: #fefaf0;
--color-snow: #f4fefd;
--color-ivory: #fef7e5;
--color-cream: #fffbda;
--color-eggshell: #fef9e3;
--color-cotton: #fbfcf7;
--color-chiffon: #fafaf1;
--color-salt: #f8efec;
--color-lace: #faf3ea;
--color-coconut: #fff1e6;
--color-linen: #f2ebd3;
--color-bone: #e7dfcc;
--color-porcelain: #fffffc;
--color-parchment: #fcf6df;
--color-rice: #fbf6ef;
/* blues */
--color-blue: #0074d9;
--color-navy: #001f3f;
--color-aqua: #7fdbff;
--color-sky: #00b2ff;
--color-teal: #39cccc;
--color-slate: #757b87;
--color-indigo: #281e5d;
--color-cobalt: #1438bd;
--color-ocean: #026063;
--color-peacock: #002d37;
--color-azure: #1621a6;
--color-cerulean: #0592c2;
--color-lapis: #2632c2;
--color-spruce: #2c3e4b;
--color-stone: #59788d;
--color-aegean: #1e456e;
--color-berry: #24146f;
--color-denim: #141e3c;
--color-admiral: #061094;
--color-sapphire: #52b2c0;
--color-arctic: #82edfd;
/* browns */
--color-tan: #e5dbac;
--color-beige: #ecdc99;
--color-macaroon: #f7df75;
--color-hazelwood: #c9bc8e;
--color-granola: #d6b75a;
--color-oat: #dec98a;
--color-eggnog: #fbe29d;
--color-fawn: #c7a951;
--color-sugarcookie: #f3ebad;
--color-sand: #d7b963;
--color-sepia: #e3b678;
--color-latte: #e9c17b;
--color-oyster: #dcd69f;
--color-biscotti: #e3c565;
--color-parmesean: #fee993;
--color-hazelnut: #bda55d;
--color-sandcastle: #dbc27d;
--color-buttermilk: #fdefb2;
--color-sanddollar: #ebe7b9;
--color-shortbread: #fce791;
/* yellows */
--color-yellow: #ffdc00;
--color-canary: #fac801;
--color-gold: #f9a602;
--color-daffodil: #feee88;
--color-flaxen: #d5b65a;
--color-butter: #fee226;
--color-lemon: #effd5f;
--color-mustard: #e9b829;
--color-corn: #e4cd04;
--color-medallion: #e4b103;
--color-dandelion: #fdce2a;
--color-bumblebee: #fce206;
--color-banana: #fcf4a3;
--color-butterscotch: #fabd04;
--color-dijon: #c29200;
--color-honey: #ec9707;
--color-blonde: #fdeb75;
--color-pineapple: #ffe327;
--color-tuscansun: #fcd12a;
/* oranges */
--color-orange: #ff851b;
--color-tangerine: #f98228;
--color-merigold: #fdae1d;
--color-cider: #b66827;
--color-rust: #8c4005;
--color-ginger: #bc5703;
--color-tiger: #fb6b02;
--color-bronze: #b2560c;
--color-cantaloupe: #fca172;
--color-apricot: #ed810f;
--color-carrot: #ed7116;
--color-squash: #c95c09;
--color-spice: #7a3a03;
--color-marmalade: #d16102;
--color-amber: #893201;
--color-sandstone: #d57128;
--color-yam: #cc5801;
/* reds */
--color-red: #ff4136;
--color-cherry: #9a0f02;
--color-rose: #e2252a;
--color-jam: #600f0b;
--color-merlot: #541f1b;
--color-garnet: #5f0a04;
--color-crimson: #b8100a;
--color-ruby: #900503;
--color-scarlet: #910d08;
--color-redwine: #4c0805;
--color-redapple: #a91b0d;
--color-mahogany: #420d09;
--color-blood: #710c04;
--color-sangria: #5f1914;
--color-currant: #670c07;
--color-blush: #bb544a;
--color-candy: #d31603;
--color-lipstick: #9b0f02;
/* pinks */
--color-pink: #f69acd;
--color-fuchsia: #f012be;
--color-punch: #f25278;
--color-watermelon: #fe809c;
--color-flamingo: #fda4b8;
--color-rouge: #f26c8c;
--color-salmon: #fdab9f;
--color-coral: #fe7d67;
--color-peach: #fb9483;
--color-strawberry: #fc4c4e;
--color-rosewood: #a04242;
--color-lemonade: #fabacb;
--color-taffy: #fa85c4;
--color-bubblegum: #fd5ca8;
--color-balletslipper: #f69abf;
--color-crepe: #f1b7c6;
--color-maroon: #85144b;
--color-hotpink: #ff1696;
/* purples */
--color-purple: #b10dc9;
--color-mauve: #7a4a89;
--color-violet: #710193;
--color-boysenberry: #630536;
--color-lavender: #e3a0f6;
--color-plum: #601a36;
--color-lilac: #b65fcd;
--color-periwinkle: #be93d4;
--color-eggplant: #311431;
--color-iris: #9866c5;
--color-heather: #9b7cb9;
--color-amethyst: #a45de4;
--color-raisin: #290916;
--color-orchid: #af69ee;
--color-mulberry: #4d0220;
/* greens */
--color-green: #2ecc40;
--color-chartreuse: #b0fd38;
--color-juniper: #395311;
--color-sage: #728c69;
--color-lime: #01ff70;
--color-fern: #5dbc64;
--color-olive: #98bf64;
--color-emerald: #038911;
--color-pear: #74b62d;
--color-moss: #476d1e;
--color-shamrock: #03ac13;
--color-seafoam: #3cec96;
--color-pine: #24501e;
--color-parakeet: #02c04a;
--color-mint: #98ecc3;
--color-seaweed: #354b21;
--color-pickle: #5a7d36;
--color-pistachio: #b2d3c1;
--color-basil: #32622d;
--color-crocodile: #5f7c3a;
/* browns */
--color-brown: #241709;
--color-coffee: #4b371c;
--color-mocha: #3c290d;
--color-peanut: #795c34;
--color-carob: #35260f;
--color-hickory: #371d10;
--color-pecan: #4a2512;
--color-walnut: #432711;
--color-caramel: #66360f;
--color-gingerbread: #5d2c04;
--color-chocolate: #2c1603;
--color-tortilla: #9a7b4f;
--color-umber: #352415;
--color-tawny: #7e491d;
--color-brunette: #391e07;
--color-cinammon: #642b0d;
--color-penny: #522915;
/* greys */
--color-grey: #aaaaaa;
--color-shadow: #373737;
--color-graphite: #584d5b;
--color-iron: #332d31;
--color-pewter: #6a6880;
--color-cloud: #c5c5d0;
--color-silver: #dddddd;
--color-smoke: #59515f;
--color-anchor: #42424c;
--color-ash: #554c4d;
--color-porpoise: #4d4c5c;
--color-dove: #7c6e7f;
--color-fog: #655965;
--color-flint: #7d7c9c;
--color-pebble: #333333;
--color-lead: #403f4e;
--color-coin: #9897a9;
--color-fossil: #787276;
/* blacks */
--color-black: #111111;
--color-ebony: #080401;
--color-crow: #25221F;
--color-charcoal: #222023;
}
.color-container {
display: flex;
flex-flow: row wrap;
gap: 1em;
}
.color-item {
border: 2px solid var(--color-black);
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
}
/* Colors taken from The New Defaults */
/* whites */
.white {background-color: var(--color-white);}
.pearl {background-color: var(--color-pearl);}
.alabaster {background-color: var(--color-alabaster);}
.snow {background-color: var(--color-snow);}
.ivory {background-color: var(--color-ivory);}
.cream {background-color: var(--color-cream);}
.eggshell {background-color: var(--color-eggshell);}
.cotton {background-color: var(--color-cotton);}
.chiffon {background-color: var(--color-chiffon);}
.salt {background-color: var(--color-salt);}
.lace {background-color: var(--color-lace);}
.coconut {background-color: var(--color-coconut);}
.linen {background-color: var(--color-linen);}
.bone {background-color: var(--color-bone);}
.porcelain {background-color: var(--color-porcelain);}
.parchment {background-color: var(--color-parchment);}
.rice {background-color: var(--color-rice);}
/* blues */
.blue {color: white; background-color: var(--color-blue);}
.navy {color: white; background-color: var(--color-navy);}
.aqua {color: white; background-color: var(--color-aqua);}
.sky {color: white; background-color: var(--color-sky);}
.teal {color: white; background-color: var(--color-teal);}
.slate {color: white; background-color: var(--color-slate);}
.indigo {color: white; background-color: var(--color-indigo);}
.cobalt {color: white; background-color: var(--color-cobalt);}
.ocean {color: white; background-color: var(--color-ocean);}
.peacock {color: white; background-color: var(--color-peacock);}
.azure {color: white; background-color: var(--color-azure);}
.cerulean {color: white; background-color: var(--color-cerulean);}
.lapis {color: white; background-color: var(--color-lapis);}
.spruce {color: white; background-color: var(--color-spruce);}
.stone {color: white; background-color: var(--color-stone);}
.aegean {color: white; background-color: var(--color-aegean);}
.berry {color: white; background-color: var(--color-berry);}
.denim {color: white; background-color: var(--color-denim);}
.admiral {color: white; background-color: var(--color-admiral);}
.sapphire {color: white; background-color: var(--color-sapphire);}
.arctic {color: white; background-color: var(--color-arctic);}
/* browns */
.tan {background-color: var(--color-tan);}
.beige {background-color: var(--color-beige);}
.macaroon {background-color: var(--color-macaroon);}
.hazelwood {background-color: var(--color-hazelwood);}
.granola {background-color: var(--color-granola);}
.oat {background-color: var(--color-oat);}
.eggnog {background-color: var(--color-eggnog);}
.fawn {background-color: var(--color-fawn);}
.sugarcookie {background-color: var(--color-sugarcookie);}
.sand {background-color: var(--color-sand);}
.sepia {background-color: var(--color-sepia);}
.latte {background-color: var(--color-latte);}
.oyster {background-color: var(--color-oyster);}
.biscotti {background-color: var(--color-biscotti);}
.parmesean {background-color: var(--color-parmesean);}
.hazelnut {background-color: var(--color-hazelnut);}
.sandcastle {background-color: var(--color-sandcastle);}
.buttermilk {background-color: var(--color-buttermilk);}
.sanddollar {background-color: var(--color-sanddollar);}
.shortbread {background-color: var(--color-shortbread);}
/* yellows */
.yellow {background-color: var(--color-yellow);}
.canary {background-color: var(--color-canary);}
.gold {background-color: var(--color-gold);}
.daffodil {background-color: var(--color-daffodil);}
.flaxen {background-color: var(--color-flaxen);}
.butter {background-color: var(--color-butter);}
.lemon {background-color: var(--color-lemon);}
.mustard {background-color: var(--color-mustard);}
.corn {background-color: var(--color-corn);}
.medallion {background-color: var(--color-medallion);}
.dandelion {background-color: var(--color-dandelion);}
.bumblebee {background-color: var(--color-bumblebee);}
.banana {background-color: var(--color-banana);}
.butterscotch {background-color: var(--color-butterscotch);}
.dijon {background-color: var(--color-dijon);}
.honey {background-color: var(--color-honey);}
.blonde {background-color: var(--color-blonde);}
.pineapple {background-color: var(--color-pineapple);}
.tuscansun {background-color: var(--color-tuscansun);}
/* oranges */
.orange {background-color: var(--color-orange);}
.tangerine {background-color: var(--color-tangerine);}
.merigold {background-color: var(--color-merigold);}
.cider {background-color: var(--color-cider);}
.rust {background-color: var(--color-rust);}
.ginger {background-color: var(--color-ginger);}
.tiger {background-color: var(--color-tiger);}
.bronze {background-color: var(--color-bronze);}
.cantaloupe {background-color: var(--color-cantaloupe);}
.apricot {background-color: var(--color-apricot);}
.carrot {background-color: var(--color-carrot);}
.squash {background-color: var(--color-squash);}
.spice {background-color: var(--color-spice);}
.marmalade {background-color: var(--color-marmalade);}
.amber {background-color: var(--color-amber);}
.sandstone {background-color: var(--color-sandstone);}
.yam {background-color: var(--color-yam);}
/* reds */
.red {color: white;background-color: var(--color-red);}
.cherry {color: white;background-color: var(--color-cherry);}
.rose {color: white;background-color: var(--color-rose);}
.jam {color: white;background-color: var(--color-jam);}
.merlot {color: white;background-color: var(--color-merlot);}
.garnet {color: white;background-color: var(--color-garnet);}
.crimson {color: white;background-color: var(--color-crimson);}
.ruby {color: white;background-color: var(--color-ruby);}
.scarlet {color: white;background-color: var(--color-scarlet);}
.redwine {color: white;background-color: var(--color-redwine);}
.redapple {color: white;background-color: var(--color-redapple);}
.mahogany {color: white;background-color: var(--color-mahogany);}
.blood {color: white;background-color: var(--color-blood);}
.sangria {color: white;background-color: var(--color-sangria);}
.currant {color: white;background-color: var(--color-currant);}
.blush {color: white;background-color: var(--color-blush);}
.candy {color: white;background-color: var(--color-candy);}
.lipstick {color: white;background-color: var(--color-lipstick);}
/* pinks */
.pink {color: white; background-color: var(--color-pink);}
.fuchsia {color: white; background-color: var(--color-fuchsia);}
.punch {color: white; background-color: var(--color-punch);}
.watermelon {color: white; background-color: var(--color-watermelon);}
.flamingo {color: white; background-color: var(--color-flamingo);}
.rouge {color: white; background-color: var(--color-rouge);}
.salmon {color: white; background-color: var(--color-salmon);}
.coral {color: white; background-color: var(--color-coral);}
.peach {color: white; background-color: var(--color-peach);}
.strawberry {color: white; background-color: var(--color-strawberry);}
.rosewood {color: white; background-color: var(--color-rosewood);}
.lemonade {color: white; background-color: var(--color-lemonade);}
.taffy {color: white; background-color: var(--color-taffy);}
.bubblegum {color: white; background-color: var(--color-bubblegum);}
.balletslipper {color: white; background-color: var(--color-balletslipper);}
.crepe {color: white; background-color: var(--color-crepe);}
.maroon {color: white; background-color: var(--color-maroon);}
.hotpink {color: white; background-color: var(--color-hotpink);}
/* purples */
.purple {color: white; background-color: var(--color-purple);}
.mauve {color: white; background-color: var(--color-mauve);}
.violet {color: white; background-color: var(--color-violet);}
.boysenberry {color: white; background-color: var(--color-boysenberry);}
.lavender {color: white; background-color: var(--color-lavender);}
.plum {color: white; background-color: var(--color-plum);}
.lilac {color: white; background-color: var(--color-lilac);}
.periwinkle {color: white; background-color: var(--color-periwinkle);}
.eggplant {color: white; background-color: var(--color-eggplant);}
.iris {color: white; background-color: var(--color-iris);}
.heather {color: white; background-color: var(--color-heather);}
.amethyst {color: white; background-color: var(--color-amethyst);}
.raisin {color: white; background-color: var(--color-raisin);}
.orchid {color: white; background-color: var(--color-orchid);}
.mulberry {color: white; background-color: var(--color-mulberry);}
/* greens */
.green {color: white; background-color: var(--color-green);}
.chartreuse {color: white; background-color: var(--color-chartreuse);}
.juniper {color: white; background-color: var(--color-juniper);}
.sage {color: white; background-color: var(--color-sage);}
.lime {color: white; background-color: var(--color-lime);}
.fern {color: white; background-color: var(--color-fern);}
.olive {color: white; background-color: var(--color-olive);}
.emerald {color: white; background-color: var(--color-emerald);}
.pear {color: white; background-color: var(--color-pear);}
.moss {color: white; background-color: var(--color-moss);}
.shamrock {color: white; background-color: var(--color-shamrock);}
.seafoam {color: white; background-color: var(--color-seafoam);}
.pine {color: white; background-color: var(--color-pine);}
.parakeet {color: white; background-color: var(--color-parakeet);}
.mint {color: white; background-color: var(--color-mint);}
.seaweed {color: white; background-color: var(--color-seaweed);}
.pickle {color: white; background-color: var(--color-pickle);}
.pistachio {color: white; background-color: var(--color-pistachio);}
.basil {color: white; background-color: var(--color-basil);}
.crocodile {color: white; background-color: var(--color-crocodile);}
/* browns */
.brown {color: white; background-color: var(--color-brown);}
.coffee {color: white; background-color: var(--color-coffee);}
.mocha {color: white; background-color: var(--color-mocha);}
.peanut {color: white; background-color: var(--color-peanut);}
.carob {color: white; background-color: var(--color-carob);}
.hickory {color: white; background-color: var(--color-hickory);}
.pecan {color: white; background-color: var(--color-pecan);}
.walnut {color: white; background-color: var(--color-walnut);}
.caramel {color: white; background-color: var(--color-caramel);}
.gingerbread {color: white; background-color: var(--color-gingerbread);}
.chocolate {color: white; background-color: var(--color-chocolate);}
.tortilla {color: white; background-color: var(--color-tortilla);}
.umber {color: white; background-color: var(--color-umber);}
.tawny {color: white; background-color: var(--color-tawny);}
.brunette {color: white; background-color: var(--color-brunette);}
.cinammon {color: white; background-color: var(--color-cinammon);}
.penny {color: white; background-color: var(--color-penny);}
/* greys */
.grey {color: white; background-color: var(--color-grey);}
.shadow {color: white; background-color: var(--color-shadow);}
.graphite {color: white; background-color: var(--color-graphite);}
.iron {color: white; background-color: var(--color-iron);}
.pewter {color: white; background-color: var(--color-pewter);}
.cloud {color: white; background-color: var(--color-cloud);}
.silver {color: white; background-color: var(--color-silver);}
.smoke {color: white; background-color: var(--color-smoke);}
.anchor {color: white; background-color: var(--color-anchor);}
.ash {color: white; background-color: var(--color-ash);}
.porpoise {color: white; background-color: var(--color-porpoise);}
.dove {color: white; background-color: var(--color-dove);}
.fog {color: white; background-color: var(--color-fog);}
.flint {color: white; background-color: var(--color-flint);}
.pebble {color: white; background-color: var(--color-pebble);}
.lead {color: white; background-color: var(--color-lead);}
.coin {color: white; background-color: var(--color-coin);}
.fossil {color: white; background-color: var(--color-fossil);}
/* blacks */
.black {color: white; background-color: var(--color-black);}
.ebony {color: white; background-color: var(--color-ebony);}
.crow {color: white; background-color: var(--color-crow);}
.charcoal {color: white; background-color: var(--color-charcoal);}
:root {
--color-hemi-orange: #f3782b;
--color-plum-crazy: #6600cc;
--color-cherry: #d2042d;
--color-black-cherry: #52253a;
--color-panther-pink: #be439d;
--color-green-go: #339a4b;
--color-sublime-green: #a0e03a;
--color-go-mango: #da5246;
--color-butterscotch: #d48827;
--color-bright-green: #66ff00;
--color-top-banana: #ffed4d;
--color-citron-yella: #9fa91f;
--color-rebeccapurple: #663399;
}
.hemi-orange { background-color: var(--color-hemi-orange); color: white; }
.plum-crazy { background-color: var(--color-plum-crazy); color: white; }
.cherry { background-color: var(--color-cherry:); color: white; }
.black-cherry { background-color: var(--color-black-cherry); color: white; }
.panther-pink { background-color: var(--color-panther-pink); color: white; }
.green-go { background-color: var(--color-green-go); color: white; }
.sublime-green { background-color: var(--color-sublime-green); color: white; }
.go-mango { background-color: var(--color-go-mango); color: white; }
.butterscotch: { background-color: var(--color-butterscotch); color: white; }
.bright-green { background-color: var(--color-bright-green); color: white; }
.top-banana { background-color: var(--color-top-banana); color: white; }
.citron-yella { background-color: var(--color-citron-yella); color: white; }
.panther-pink { background-color: var(--color-panther-pink); color: white; }
.rebeccapurple { background-color: var(--color-rebeccapurple); color: white; }
I’m still looking for one or two color palletes that I like. In the meantime I’ll just use this component to park drafts, in addition to what I already use for the blog and other projects.
A replacement for the standard CSS named color system. Provides more visually appealing hues for many CSS keywords; adds new colors with more relevant and easily remembered names. Inspired by Ingrid Sundberg’s color thesaurus and the work of Adam Morse. The original From Dudley Storey, is available from Github