<h1>Color Palettes</h1>
<h2>The New Defaults</h2>
<h3>Whites</h3>
<div class="color-container">
<div class="color-item white">white<br /><strong>oklch(1 0 326)</strong></div>
<div class="color-item alabaster">alabaster<br /><strong>oklch(0.99 0.01 88.7)</strong></div>
<div class="color-item snow">snow<br />oklch(0.99 0.01 190)</strong></div>
<div class="color-item ivory">ivory<br /><strong>oklch(0.98 0.02 89.2)</strong></div>
<div class="color-item cream">cream<br /><strong>oklch(0.98 0.04 101)</strong></div>
<div class="color-item eggshell">eggshell<br /><strong>oklch(0.98 0.03 96.4)</strong></div>
<div class="color-item cotton">cotton<br /><strong>oklch(0.99 0.01 116)</strong></div>
<div class="color-item chiffon">chiffon<br /><strong>oklch(0.98 0.01 107)</strong></div>
<div class="color-item salt">salt<br /><strong>oklch(0.96 0.01 39.4)</strong></div>
<div class="color-item lace">lace<br /><strong>oklch(0.97 0.01 74.4)</strong></div>
<div class="color-item coconut">coconut<br /><strong>oklch(0.97 0.02 60.8)</strong></div>
<div class="color-item linen">linen<br /><strong>oklch(0.94 0.03 93.5)</strong></div>
<div class="color-item bone">bone<br /><strong>oklch(0.9 0.03 87.9)</strong></div>
<div class="color-item porcelain">porcelain<br /><strong>oklch(1 0 106)</strong></div>
<div class="color-item parchment">parchment<br /><strong>oklch(0.97 0.03 94.9)</strong></div>
<div class="color-item rice">rice<br /><strong>oklch(0.98 0.01 76.6)</strong></div>
</div>
<h3>blues</h3>
<div class="color-container">
<div class="color-item blue">blue<br /><strong>oklch(0.56 0.18 254)</strong></div>
<div class="color-item navy">navy<br /><strong>oklch(0.24 0.07 252)</strong></div>
<div class="color-item aqua">aqua<br /><strong>oklch(0.85 0.1 225)</strong></div>
<div class="color-item sky">sky<br /><strong>oklch(0.73 0.16 238)</strong></div>
<div class="color-item teal">teal<br /><strong>oklch(0.77 0.12 195)</strong></div>
<div class="color-item slate">slate<br /><strong>oklch(0.58 0.02 264)</strong></div>
<div class="color-item indigo">indigo<br /><strong>oklch(0.29 0.11 285)</strong></div>
<div class="color-item cobalt">cobalt<br /><strong>oklch(0.42 0.21 265)</strong></div>
<div class="color-item ocean">ocean<br /><strong>oklch(0.44 0.07 199)</strong></div>
<div class="color-item peacock">peacock<br /><strong>oklch(0.27 0.05 217)</strong></div>
<div class="color-item azure">azure<br /><strong>oklch(0.36 0.2 268)</strong></div>
<div class="color-item cerulean">cerulean<br /><strong>oklch(0.62 0.12 231)</strong></div>
<div class="color-item lapis">lapis<br /><strong>oklch(0.42 0.22 269)</strong></div>
<div class="color-item spruce">spruce<br /><strong>oklch(0.35 0.03 240)</strong></div>
<div class="color-item stone">stone<br /><strong>oklch(0.56 0.05 238)</strong></div>
<div class="color-item aegean">aegean<br /><strong>oklch(0.38 0.08 252)</strong></div>
<div class="color-item berry">berry<br /><strong>oklch(0.29 0.14 280)</strong></div>
<div class="color-item denim">denim<br /><strong>oklch(0.24 0.06 268)</strong></div>
<div class="color-item admiral">admiral<br /><strong>oklch(0.31 0.2 265)</strong></div>
<div class="color-item sapphire">sapphire<br /><strong>oklch(0.71 0.09 208)</strong></div>
<div class="color-item arctic">arctic<br /><strong>oklch(0.89 0.1 208)</strong></div>
</div>
<h3>browns</h3>
<div class="color-container">
<div class="color-item tan">tan<br /><strong>oklch(0.89 0.06 97.4)</strong></div>
<div class="color-item beige">beige<br /><strong>oklch(0.89 0.09 96.3)</strong></div>
<div class="color-item macaroon">macaroon<br /><strong>oklch(0.9 0.13 96.8)</strong></div>
<div class="color-item hazelwood">hazelwood<br /><strong>oklch(0.79 0.06 94.2)</strong></div>
<div class="color-item granola">granola<br /><strong>oklch(0.79 0.12 91.1)</strong></div>
<div class="color-item oat">oat<br /><strong>oklch(0.84 0.08 91.8)</strong></div>
<div class="color-item eggnog">eggnog<br /><strong>oklch(0.92 0.09 90.4)</strong></div>
<div class="color-item fawn">fawn<br /><strong>oklch(0.74 0.11 90.6)</strong></div>
<div class="color-item sugarcookie">sugarcookie<br /><strong>oklch(0.93 0.08 102)</strong></div>
<div class="color-item sand">sand<br /><strong>oklch(0.79 0.11 90.5)</strong></div>
<div class="color-item sepia">sepia<br /><strong>oklch(0.8 0.09 74.7)</strong></div>
<div class="color-item latte">latte<br /><strong>oklch(0.83 0.1 80.7)</strong></div>
<div class="color-item oyster">oyster<br /><strong>oklch(0.87 0.07 103)</strong></div>
<div class="color-item biscotti">biscotti<br /><strong>oklch(0.83 0.12 92.3)</strong></div>
<div class="color-item parmesean">parmesean<br /><strong>oklch(0.93 0.11 96.1)</strong></div>
<div class="color-item hazelnut">hazelnut<br /><strong>oklch(0.73 0.1 91.5)</strong></div>
<div class="color-item sandcastle">sandcastle<br /><strong>oklch(0.82 0.09 90.3)</strong></div>
<div class="color-item buttermilk">buttermilk<br /><strong>oklch(0.95 0.08 96.7)</strong></div>
<div class="color-item sanddollar">sanddollar<br /><strong>oklch(0.92 0.06 103)</strong></div>
<div class="color-item shortbread">shortbread<br /><strong>oklch(0.93 0.11 96.1)</strong></div>
</div>
<h3>Yellows</h3>
<div class="color-container">
<div class="color-item yellow">yellow<br /><strong>oklch(0.9 0.19 97.4)</strong></div>
<div class="color-item canary">canary<br /><strong>oklch(0.85 0.17 90.4)</strong></div>
<div class="color-item gold">gold<br /><strong>oklch(0.79 0.17 73.3)</strong></div>
<div class="color-item daffodil">daffodil<br /><strong>oklch(0.94 0.12 101)</strong></div>
<div class="color-item flaxen">flaxen<br /><strong>oklch(0.78 0.12 90.9)</strong></div>
<div class="color-item butter">butter<br /><strong>oklch(0.91 0.18 99.7)</strong></div>
<div class="color-item lemon">lemon<br /><strong>oklch(0.96 0.18 114)</strong></div>
<div class="color-item mustard">mustard<br /><strong>oklch(0.8 0.15 87.8)</strong></div>
<div class="color-item corn">corn<br /><strong>oklch(0.84 0.18 101)</strong></div>
<div class="color-item medallion">medallion<br /><strong>oklch(0.78 0.16 87.6)</strong></div>
<div class="color-item dandelion">dandelion<br /><strong>oklch(0.87 0.17 91)</strong></div>
<div class="color-item bumblebee">bumblebee<br /><strong>oklch(0.91 0.19 101)</strong></div>
<div class="color-item banana">banana<br /><strong>oklch(0.96 0.1 103)</strong></div>
<div class="color-item butterscotch">butterscotch<br /><strong>oklch(0.83 0.17 84.9)</strong></div>
<div class="color-item dijon">dijon<br /><strong>oklch(0.69 0.14 85)</strong></div>
<div class="color-item honey">honey<br /><strong>oklch(0.75 0.16 69.6)</strong></div>
<div class="color-item blonde">blonde<br /><strong>oklch(0.93 0.14 101)</strong></div>
<div class="color-item pineapple">pineapple<br /><strong>oklch(0.91 0.18 99.8)</strong></div>
<div class="color-item tuscansun">tuscansun<br /><strong>oklch(0.87 0.17 92.8)</strong></div>
</div>
<h3>Oranges</h3>
<div class="color-container">
<div class="color-item orange">orange<br /><strong>oklch(0.74 0.18 53.5)</strong></div>
<div class="color-item tangerine">tangerine<br /><strong>oklch(0.73 0.17 51.9)</strong></div>
<div class="color-item merigold">merigold<br /><strong>oklch(0.81 0.16 74.9)</strong></div>
<div class="color-item cider">cider<br /><strong>oklch(0.59 0.13 56.2)</strong></div>
<div class="color-item rust">rust<br /><strong>oklch(0.46 0.12 49.7)</strong></div>
<div class="color-item ginger">ginger<br /><strong>oklch(0.57 0.15 49.7)</strong></div>
<div class="color-item tiger">tiger<br /><strong>oklch(0.7 0.2 45.6)</strong></div>
<div class="color-item bronze">bronze<br /><strong>oklch(0.56 0.14 50.9)</strong></div>
<div class="color-item cantaloupe">cantaloupe<br /><strong>oklch(0.79 0.13 47.7)</strong></div>
<div class="color-item apricot">apricot<br /><strong>oklch(0.71 0.17 57.1)</strong></div>
<div class="color-item carrot">carrot<br /><strong>oklch(0.68 0.18 49.1)</strong></div>
<div class="color-item squash">squash<br /><strong>oklch(0.6 0.16 48.5)</strong></div>
<div class="color-item spice">spice<br /><strong>oklch(0.42 0.11 52.4)</strong></div>
<div class="color-item marmalade">marmalade<br /><strong>oklch(0.62 0.16 49.6)</strong></div>
<div class="color-item amber">amber<br /><strong>oklch(0.44 0.13 42.7)</strong></div>
<div class="color-item sandstone">sandstone<br /><strong>oklch(0.65 0.15 52)</strong></div>
<div class="color-item yam">yam<br /><strong>oklch(0.6 0.17 46.7)</strong></div>
</div>
<h3>reds</h3>
<div class="color-container">
<div class="color-item red">red<br /><strong>oklch(0.66 0.23 28.4)</strong></div>
<div class="color-item cherry">cherry<br /><strong>oklch(0.44 0.17 30.4)</strong></div>
<div class="color-item rose">rose<br /><strong>oklch(0.59 0.22 26.5)</strong></div>
<div class="color-item jam">jam<br /><strong>oklch(0.32 0.11 28.5)</strong></div>
<div class="color-item merlot">merlot<br /><strong>oklch(0.32 0.08 26.9)</strong></div>
<div class="color-item garnet">garnet<br /><strong>oklch(0.31 0.12 30)</strong></div>
<div class="color-item crimson">crimson<br /><strong>oklch(0.5 0.2 29.2)</strong></div>
<div class="color-item ruby">ruby<br /><strong>oklch(0.41 0.17 29.2)</strong></div>
<div class="color-item scarlet">scarlet<br /><strong>oklch(0.42 0.16 29.1)</strong></div>
<div class="color-item redwine">redwine<br />oklch(0.27 0.1 29)</strong></div>
<div class="color-item redapple">redapple<br /><strong>oklch(0.47 0.18 30.2)</strong></div>
<div class="color-item mahogany">mahogany<br /><strong>oklch(0.25 0.08 28.6)</strong></div>
<div class="color-item blood">blood<br /><strong>oklch(0.35 0.13 30.2)</strong></div>
<div class="color-item sangria">sangria<br /><strong>oklch(0.33 0.1 28.1)</strong></div>
<div class="color-item currant">currant<br /><strong>oklch(0.33 0.12 29.2)</strong></div>
<div class="color-item blush">blush<br /><strong>oklch(0.57 0.14 27.7)</strong></div>
<div class="color-item candy">candy<br /><strong>oklch(0.55 0.22 30.2)</strong></div>
<div class="color-item lipstick">lipstick<br /><strong>oklch(0.44 0.17 30.4)</strong></div>
</div>
<h3>Pinks</h3>
<div class="color-container">
<div class="color-item pink">pink<br /><strong>oklch(0.79 0.13 346)</strong></div>
<div class="color-item fuchsia">fuchsia<br /><strong>oklch(0.65 0.27 341)</strong></div>
<div class="color-item punch">punch<br /><strong>oklch(0.67 0.2 10)</strong></div>
<div class="color-item watermelon">watermelon<br /><strong>oklch(0.75 0.15 7.5)</strong></div>
<div class="color-item flamingo">flamingo<br /><strong>oklch(0.81 0.11 5.11)</strong></div>
<div class="color-item rouge">rouge<br /><strong>oklch(0.7 0.17 7.51)</strong></div>
<div class="color-item salmon">salmon<br /><strong>oklch(0.82 0.1 28.6)</strong></div>
<div class="color-item coral">coral<br /><strong>oklch(0.73 0.16 31.2)</strong></div>
<div class="color-item peach">peach<br /><strong>oklch(0.77 0.13 30.2)</strong></div>
<div class="color-item strawberry">strawberry<br /><strong>oklch(0.67 0.21 24.5)</strong></div>
<div class="color-item rosewood">rosewood<br /><strong>oklch(0.51 0.13 22.7)</strong></div>
<div class="color-item lemonade">lemonade<br /><strong>oklch(0.85 0.08 1.31)</strong></div>
<div class="color-item taffy">taffy<br /><strong>oklch(0.76 0.16 348)</strong></div>
<div class="color-item bubblegum">bubblegum<br /><strong>oklch(0.71 0.21 355)</strong></div>
<div class="color-item balletslipper">balletslipper<br /><strong>oklch(0.79 0.12 354)</strong></div>
<div class="color-item crepe">crepe<br /><strong>oklch(0.84 0.07 1.58)</strong></div>
<div class="color-item maroon">maroon<br /><strong>oklch(0.41 0.15 358)</strong></div>
<div class="color-item hotpink">hotpink<br /><strong>oklch(0.66 0.26 356)</strong></div>
</div>
<h3>Purples</h3>
<div class="color-container">
<div class="color-item purple">purple<br /><strong>oklch(0.55 0.26 321)</strong></div>
<div class="color-item mauve">mauve<br /><strong>oklch(0.49 0.11 318)</strong></div>
<div class="color-item violet">violet<br /><strong>oklch(0.41 0.2 315)</strong></div>
<div class="color-item boysenberry">boysenberry<br /><strong>oklch(0.33 0.13 357)</strong></div>
<div class="color-item lavender">lavender<br /><strong>oklch(0.8 0.14 319)</strong></div>
<div class="color-item plum">plum<br /><strong>oklch(0.34 0.1 360)</strong></div>
<div class="color-item lilac">lilac<br /><strong>oklch(0.63 0.18 319)</strong></div>
<div class="color-item periwinkle">periwinkle<br /><strong>oklch(0.73 0.1 314)</strong></div>
<div class="color-item eggplant">eggplant<br /><strong>oklch(0.25 0.07 327)</strong></div>
<div class="color-item iris">iris<br /><strong>oklch(0.6 0.15 307)</strong></div>
<div class="color-item heather">heather<br /><strong>oklch(0.64 0.1 307)</strong></div>
<div class="color-item amethyst">amethyst<br /><strong>oklch(0.62 0.2 306)</strong></div>
<div class="color-item raisin">raisin<br /><strong>oklch(0.2 0.06 358)</strong></div>
<div class="color-item orchid">orchid<br /><strong>oklch(0.66 0.2 306)</strong></div>
<div class="color-item mulberry">mulberry<br /><strong>oklch(0.27 0.11 4.92)</strong></div>
</div>
<h3>greens</h3>
<div class="color-container">
<div class="color-item green">green<br /><strong>oklch(0.74 0.22 144)</strong></div>
<div class="color-item chartreuse">chartreuse<br /><strong>oklch(0.91 0.23 129)</strong></div>
<div class="color-item juniper">juniper<br /><strong>oklch(0.41 0.1 129)</strong></div>
<div class="color-item sage">sage<br /><strong>oklch(0.61 0.06 138)</strong></div>
<div class="color-item lime">lime<br /><strong>oklch(0.87 0.25 149)</strong></div>
<div class="color-item fern">fern<br /><strong>oklch(0.72 0.15 145)</strong></div>
<div class="color-item olive">olive<br /><strong>oklch(0.76 0.13 128)</strong></div>
<div class="color-item emerald">emerald<br /><strong>oklch(0.55 0.18 143)</strong></div>
<div class="color-item pear">pear<br /><strong>oklch(0.71 0.18 132)</strong></div>
<div class="color-item moss">moss<br /><strong>oklch(0.49 0.12 132)</strong></div>
<div class="color-item shamrock">shamrock<br /><strong>oklch(0.65 0.22 143)</strong></div>
<div class="color-item seafoam">seafoam<br /><strong>oklch(0.84 0.18 156)</strong></div>
<div class="color-item pine">pine<br /><strong>oklch(0.39 0.09 141)</strong></div>
<div class="color-item parakeet">parakeet<br /><strong>oklch(0.7 0.21 147)</strong></div>
<div class="color-item mint">mint<br /><strong>oklch(0.88 0.1 162)</strong></div>
<div class="color-item seaweed">seaweed<br /><strong>oklch(0.38 0.07 132)</strong></div>
<div class="color-item pickle">pickle<br /><strong>oklch(0.55 0.11 131)</strong></div>
<div class="color-item pistachio">pistachio<br /><strong>oklch(0.84 0.04 161)</strong></div>
<div class="color-item basil">basil<br /><strong>oklch(0.45 0.1 142)</strong></div>
<div class="color-item crocodile">crocodile<br /><strong>oklch(0.55 0.1 129)</strong></div>
</div>
<h3>Browns</h3>
<div class="color-container">
<div class="color-item brown">brown<br /><strong>oklch(0.22 0.03 66.9)</strong></div>
<div class="color-item coffee">coffee<br /><strong>oklch(0.35 0.05 73.3)</strong></div>
<div class="color-item mocha">mocha<br /><strong>oklch(0.3 0.05 74.1)</strong></div>
<div class="color-item peanut">peanut<br /><strong>oklch(0.5 0.07 74)</strong></div>
<div class="color-item carob">carob<br /><strong>oklch(0.28 0.04 76.2)</strong></div>
<div class="color-item hickory">hickory<br /><strong>oklch(0.26 0.05 46.6)</strong></div>
<div class="color-item pecan">pecan<br /><strong>oklch(0.31 0.06 46.5)</strong></div>
<div class="color-item walnut">walnut<br /><strong>oklch(0.3 0.05 56.9)</strong></div>
<div class="color-item caramel">caramel<br /><strong>oklch(0.39 0.08 55)</strong></div>
<div class="color-item gingerbread">gingerbread<br /><strong>oklch(0.35 0.09 52.9)</strong></div>
<div class="color-item chocolate">chocolate<br /><strong>oklch(0.23 0.05 59.9)</strong></div>
<div class="color-item tortilla">tortilla<br /><strong>oklch(0.6 0.07 75.4)</strong></div>
<div class="color-item umber">umber<br /><strong>oklch(0.28 0.04 61.9)</strong></div>
<div class="color-item tawny">tawny<br /><strong>oklch(0.46 0.09 56.9)</strong></div>
<div class="color-item brunette">brunette<br /><strong>oklch(0.27 0.05 57.6)</strong></div>
<div class="color-item cinammon">cinammon<br /><strong>oklch(0.36 0.09 44.9)</strong></div>
<div class="color-item penny">penny<br /><strong>oklch(0.33 0.07 45.4)</strong></div>
</div>
<h3>greys</h3>
<div class="color-container">
<div class="color-item grey">grey<br /><strong>oklch(0.74 0 0)</strong></div>
<div class="color-item shadow">shadow<br /><strong>oklch(0.34 0 0)</strong></div>
<div class="color-item graphite">graphite<br /><strong>oklch(0.44 0.03 319)</strong></div>
<div class="color-item iron">iron<br /><strong>oklch(0.31 0.01 338)</strong></div>
<div class="color-item pewter">pewter<br /><strong>oklch(0.53 0.04 289)</strong></div>
<div class="color-item cloud">cloud<br /><strong>oklch(0.83 0.02 286)</strong></div>
<div class="color-item silver">silver<br /><strong>oklch(0.9 0 0)</strong></div>
<div class="color-item smoke">smoke<br /><strong>oklch(0.45 0.02 311)</strong></div>
<div class="color-item anchor">anchor<br /><strong>oklch(0.38 0.02 286)</strong></div>
<div class="color-item ash">ash<br /><strong>oklch(0.43 0.01 9.96)</strong></div>
<div class="color-item porpoise">porpoise<br /><strong>oklch(0.42 0.03 288)</strong></div>
<div class="color-item dove">dove<br /><strong>oklch(0.56 0.03 320)</strong></div>
<div class="color-item fog">fog<br /><strong>oklch(0.48 0.02 326)</strong></div>
<div class="color-item flint">flint<br /><strong>oklch(0.6 0.05 286)</strong></div>
<div class="color-item pebble">pebble<br /><strong>oklch(0.32 0 0)</strong></div>
<div class="color-item lead">lead<br /><strong>oklch(0.37 0.03 288)</strong></div>
<div class="color-item coin">coin<br /><strong>oklch(0.68 0.03 288)</strong></div>
<div class="color-item fossil">fossil<br /><strong>oklch(0.56 0.01 338)</strong></div>
</div>
<h3>Blacks</h3>
<div class="color-container">
<div class="color-item black">black<br /><strong>oklch(0.18 0 0)</strong></div>
<div class="color-item ebony">ebony<br /><strong>oklch(0.11 0.02 71.8)</strong></div>
<div class="color-item crow">crow<br /><strong>oklch(0.25 0.01 67.5)</strong></div>
<div class="color-item charcoal">charcoal<br /><strong>oklch(0.25 0.01 315)</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>oklch(1 0 326)</strong></div>
<div class="color-item alabaster">alabaster<br /><strong>oklch(0.99 0.01 88.7)</strong></div>
<div class="color-item snow">snow<br />oklch(0.99 0.01 190)</strong></div>
<div class="color-item ivory">ivory<br /><strong>oklch(0.98 0.02 89.2)</strong></div>
<div class="color-item cream">cream<br /><strong>oklch(0.98 0.04 101)</strong></div>
<div class="color-item eggshell">eggshell<br /><strong>oklch(0.98 0.03 96.4)</strong></div>
<div class="color-item cotton">cotton<br /><strong>oklch(0.99 0.01 116)</strong></div>
<div class="color-item chiffon">chiffon<br /><strong>oklch(0.98 0.01 107)</strong></div>
<div class="color-item salt">salt<br /><strong>oklch(0.96 0.01 39.4)</strong></div>
<div class="color-item lace">lace<br /><strong>oklch(0.97 0.01 74.4)</strong></div>
<div class="color-item coconut">coconut<br /><strong>oklch(0.97 0.02 60.8)</strong></div>
<div class="color-item linen">linen<br /><strong>oklch(0.94 0.03 93.5)</strong></div>
<div class="color-item bone">bone<br /><strong>oklch(0.9 0.03 87.9)</strong></div>
<div class="color-item porcelain">porcelain<br /><strong>oklch(1 0 106)</strong></div>
<div class="color-item parchment">parchment<br /><strong>oklch(0.97 0.03 94.9)</strong></div>
<div class="color-item rice">rice<br /><strong>oklch(0.98 0.01 76.6)</strong></div>
</div>
<h3>blues</h3>
<div class="color-container">
<div class="color-item blue">blue<br /><strong>oklch(0.56 0.18 254)</strong></div>
<div class="color-item navy">navy<br /><strong>oklch(0.24 0.07 252)</strong></div>
<div class="color-item aqua">aqua<br /><strong>oklch(0.85 0.1 225)</strong></div>
<div class="color-item sky">sky<br /><strong>oklch(0.73 0.16 238)</strong></div>
<div class="color-item teal">teal<br /><strong>oklch(0.77 0.12 195)</strong></div>
<div class="color-item slate">slate<br /><strong>oklch(0.58 0.02 264)</strong></div>
<div class="color-item indigo">indigo<br /><strong>oklch(0.29 0.11 285)</strong></div>
<div class="color-item cobalt">cobalt<br /><strong>oklch(0.42 0.21 265)</strong></div>
<div class="color-item ocean">ocean<br /><strong>oklch(0.44 0.07 199)</strong></div>
<div class="color-item peacock">peacock<br /><strong>oklch(0.27 0.05 217)</strong></div>
<div class="color-item azure">azure<br /><strong>oklch(0.36 0.2 268)</strong></div>
<div class="color-item cerulean">cerulean<br /><strong>oklch(0.62 0.12 231)</strong></div>
<div class="color-item lapis">lapis<br /><strong>oklch(0.42 0.22 269)</strong></div>
<div class="color-item spruce">spruce<br /><strong>oklch(0.35 0.03 240)</strong></div>
<div class="color-item stone">stone<br /><strong>oklch(0.56 0.05 238)</strong></div>
<div class="color-item aegean">aegean<br /><strong>oklch(0.38 0.08 252)</strong></div>
<div class="color-item berry">berry<br /><strong>oklch(0.29 0.14 280)</strong></div>
<div class="color-item denim">denim<br /><strong>oklch(0.24 0.06 268)</strong></div>
<div class="color-item admiral">admiral<br /><strong>oklch(0.31 0.2 265)</strong></div>
<div class="color-item sapphire">sapphire<br /><strong>oklch(0.71 0.09 208)</strong></div>
<div class="color-item arctic">arctic<br /><strong>oklch(0.89 0.1 208)</strong></div>
</div>
<h3>browns</h3>
<div class="color-container">
<div class="color-item tan">tan<br /><strong>oklch(0.89 0.06 97.4)</strong></div>
<div class="color-item beige">beige<br /><strong>oklch(0.89 0.09 96.3)</strong></div>
<div class="color-item macaroon">macaroon<br /><strong>oklch(0.9 0.13 96.8)</strong></div>
<div class="color-item hazelwood">hazelwood<br /><strong>oklch(0.79 0.06 94.2)</strong></div>
<div class="color-item granola">granola<br /><strong>oklch(0.79 0.12 91.1)</strong></div>
<div class="color-item oat">oat<br /><strong>oklch(0.84 0.08 91.8)</strong></div>
<div class="color-item eggnog">eggnog<br /><strong>oklch(0.92 0.09 90.4)</strong></div>
<div class="color-item fawn">fawn<br /><strong>oklch(0.74 0.11 90.6)</strong></div>
<div class="color-item sugarcookie">sugarcookie<br /><strong>oklch(0.93 0.08 102)</strong></div>
<div class="color-item sand">sand<br /><strong>oklch(0.79 0.11 90.5)</strong></div>
<div class="color-item sepia">sepia<br /><strong>oklch(0.8 0.09 74.7)</strong></div>
<div class="color-item latte">latte<br /><strong>oklch(0.83 0.1 80.7)</strong></div>
<div class="color-item oyster">oyster<br /><strong>oklch(0.87 0.07 103)</strong></div>
<div class="color-item biscotti">biscotti<br /><strong>oklch(0.83 0.12 92.3)</strong></div>
<div class="color-item parmesean">parmesean<br /><strong>oklch(0.93 0.11 96.1)</strong></div>
<div class="color-item hazelnut">hazelnut<br /><strong>oklch(0.73 0.1 91.5)</strong></div>
<div class="color-item sandcastle">sandcastle<br /><strong>oklch(0.82 0.09 90.3)</strong></div>
<div class="color-item buttermilk">buttermilk<br /><strong>oklch(0.95 0.08 96.7)</strong></div>
<div class="color-item sanddollar">sanddollar<br /><strong>oklch(0.92 0.06 103)</strong></div>
<div class="color-item shortbread">shortbread<br /><strong>oklch(0.93 0.11 96.1)</strong></div>
</div>
<h3>Yellows</h3>
<div class="color-container">
<div class="color-item yellow">yellow<br /><strong>oklch(0.9 0.19 97.4)</strong></div>
<div class="color-item canary">canary<br /><strong>oklch(0.85 0.17 90.4)</strong></div>
<div class="color-item gold">gold<br /><strong>oklch(0.79 0.17 73.3)</strong></div>
<div class="color-item daffodil">daffodil<br /><strong>oklch(0.94 0.12 101)</strong></div>
<div class="color-item flaxen">flaxen<br /><strong>oklch(0.78 0.12 90.9)</strong></div>
<div class="color-item butter">butter<br /><strong>oklch(0.91 0.18 99.7)</strong></div>
<div class="color-item lemon">lemon<br /><strong>oklch(0.96 0.18 114)</strong></div>
<div class="color-item mustard">mustard<br /><strong>oklch(0.8 0.15 87.8)</strong></div>
<div class="color-item corn">corn<br /><strong>oklch(0.84 0.18 101)</strong></div>
<div class="color-item medallion">medallion<br /><strong>oklch(0.78 0.16 87.6)</strong></div>
<div class="color-item dandelion">dandelion<br /><strong>oklch(0.87 0.17 91)</strong></div>
<div class="color-item bumblebee">bumblebee<br /><strong>oklch(0.91 0.19 101)</strong></div>
<div class="color-item banana">banana<br /><strong>oklch(0.96 0.1 103)</strong></div>
<div class="color-item butterscotch">butterscotch<br /><strong>oklch(0.83 0.17 84.9)</strong></div>
<div class="color-item dijon">dijon<br /><strong>oklch(0.69 0.14 85)</strong></div>
<div class="color-item honey">honey<br /><strong>oklch(0.75 0.16 69.6)</strong></div>
<div class="color-item blonde">blonde<br /><strong>oklch(0.93 0.14 101)</strong></div>
<div class="color-item pineapple">pineapple<br /><strong>oklch(0.91 0.18 99.8)</strong></div>
<div class="color-item tuscansun">tuscansun<br /><strong>oklch(0.87 0.17 92.8)</strong></div>
</div>
<h3>Oranges</h3>
<div class="color-container">
<div class="color-item orange">orange<br /><strong>oklch(0.74 0.18 53.5)</strong></div>
<div class="color-item tangerine">tangerine<br /><strong>oklch(0.73 0.17 51.9)</strong></div>
<div class="color-item merigold">merigold<br /><strong>oklch(0.81 0.16 74.9)</strong></div>
<div class="color-item cider">cider<br /><strong>oklch(0.59 0.13 56.2)</strong></div>
<div class="color-item rust">rust<br /><strong>oklch(0.46 0.12 49.7)</strong></div>
<div class="color-item ginger">ginger<br /><strong>oklch(0.57 0.15 49.7)</strong></div>
<div class="color-item tiger">tiger<br /><strong>oklch(0.7 0.2 45.6)</strong></div>
<div class="color-item bronze">bronze<br /><strong>oklch(0.56 0.14 50.9)</strong></div>
<div class="color-item cantaloupe">cantaloupe<br /><strong>oklch(0.79 0.13 47.7)</strong></div>
<div class="color-item apricot">apricot<br /><strong>oklch(0.71 0.17 57.1)</strong></div>
<div class="color-item carrot">carrot<br /><strong>oklch(0.68 0.18 49.1)</strong></div>
<div class="color-item squash">squash<br /><strong>oklch(0.6 0.16 48.5)</strong></div>
<div class="color-item spice">spice<br /><strong>oklch(0.42 0.11 52.4)</strong></div>
<div class="color-item marmalade">marmalade<br /><strong>oklch(0.62 0.16 49.6)</strong></div>
<div class="color-item amber">amber<br /><strong>oklch(0.44 0.13 42.7)</strong></div>
<div class="color-item sandstone">sandstone<br /><strong>oklch(0.65 0.15 52)</strong></div>
<div class="color-item yam">yam<br /><strong>oklch(0.6 0.17 46.7)</strong></div>
</div>
<h3>reds</h3>
<div class="color-container">
<div class="color-item red">red<br /><strong>oklch(0.66 0.23 28.4)</strong></div>
<div class="color-item cherry">cherry<br /><strong>oklch(0.44 0.17 30.4)</strong></div>
<div class="color-item rose">rose<br /><strong>oklch(0.59 0.22 26.5)</strong></div>
<div class="color-item jam">jam<br /><strong>oklch(0.32 0.11 28.5)</strong></div>
<div class="color-item merlot">merlot<br /><strong>oklch(0.32 0.08 26.9)</strong></div>
<div class="color-item garnet">garnet<br /><strong>oklch(0.31 0.12 30)</strong></div>
<div class="color-item crimson">crimson<br /><strong>oklch(0.5 0.2 29.2)</strong></div>
<div class="color-item ruby">ruby<br /><strong>oklch(0.41 0.17 29.2)</strong></div>
<div class="color-item scarlet">scarlet<br /><strong>oklch(0.42 0.16 29.1)</strong></div>
<div class="color-item redwine">redwine<br />oklch(0.27 0.1 29)</strong></div>
<div class="color-item redapple">redapple<br /><strong>oklch(0.47 0.18 30.2)</strong></div>
<div class="color-item mahogany">mahogany<br /><strong>oklch(0.25 0.08 28.6)</strong></div>
<div class="color-item blood">blood<br /><strong>oklch(0.35 0.13 30.2)</strong></div>
<div class="color-item sangria">sangria<br /><strong>oklch(0.33 0.1 28.1)</strong></div>
<div class="color-item currant">currant<br /><strong>oklch(0.33 0.12 29.2)</strong></div>
<div class="color-item blush">blush<br /><strong>oklch(0.57 0.14 27.7)</strong></div>
<div class="color-item candy">candy<br /><strong>oklch(0.55 0.22 30.2)</strong></div>
<div class="color-item lipstick">lipstick<br /><strong>oklch(0.44 0.17 30.4)</strong></div>
</div>
<h3>Pinks</h3>
<div class="color-container">
<div class="color-item pink">pink<br /><strong>oklch(0.79 0.13 346)</strong></div>
<div class="color-item fuchsia">fuchsia<br /><strong>oklch(0.65 0.27 341)</strong></div>
<div class="color-item punch">punch<br /><strong>oklch(0.67 0.2 10)</strong></div>
<div class="color-item watermelon">watermelon<br /><strong>oklch(0.75 0.15 7.5)</strong></div>
<div class="color-item flamingo">flamingo<br /><strong>oklch(0.81 0.11 5.11)</strong></div>
<div class="color-item rouge">rouge<br /><strong>oklch(0.7 0.17 7.51)</strong></div>
<div class="color-item salmon">salmon<br /><strong>oklch(0.82 0.1 28.6)</strong></div>
<div class="color-item coral">coral<br /><strong>oklch(0.73 0.16 31.2)</strong></div>
<div class="color-item peach">peach<br /><strong>oklch(0.77 0.13 30.2)</strong></div>
<div class="color-item strawberry">strawberry<br /><strong>oklch(0.67 0.21 24.5)</strong></div>
<div class="color-item rosewood">rosewood<br /><strong>oklch(0.51 0.13 22.7)</strong></div>
<div class="color-item lemonade">lemonade<br /><strong>oklch(0.85 0.08 1.31)</strong></div>
<div class="color-item taffy">taffy<br /><strong>oklch(0.76 0.16 348)</strong></div>
<div class="color-item bubblegum">bubblegum<br /><strong>oklch(0.71 0.21 355)</strong></div>
<div class="color-item balletslipper">balletslipper<br /><strong>oklch(0.79 0.12 354)</strong></div>
<div class="color-item crepe">crepe<br /><strong>oklch(0.84 0.07 1.58)</strong></div>
<div class="color-item maroon">maroon<br /><strong>oklch(0.41 0.15 358)</strong></div>
<div class="color-item hotpink">hotpink<br /><strong>oklch(0.66 0.26 356)</strong></div>
</div>
<h3>Purples</h3>
<div class="color-container">
<div class="color-item purple">purple<br /><strong>oklch(0.55 0.26 321)</strong></div>
<div class="color-item mauve">mauve<br /><strong>oklch(0.49 0.11 318)</strong></div>
<div class="color-item violet">violet<br /><strong>oklch(0.41 0.2 315)</strong></div>
<div class="color-item boysenberry">boysenberry<br /><strong>oklch(0.33 0.13 357)</strong></div>
<div class="color-item lavender">lavender<br /><strong>oklch(0.8 0.14 319)</strong></div>
<div class="color-item plum">plum<br /><strong>oklch(0.34 0.1 360)</strong></div>
<div class="color-item lilac">lilac<br /><strong>oklch(0.63 0.18 319)</strong></div>
<div class="color-item periwinkle">periwinkle<br /><strong>oklch(0.73 0.1 314)</strong></div>
<div class="color-item eggplant">eggplant<br /><strong>oklch(0.25 0.07 327)</strong></div>
<div class="color-item iris">iris<br /><strong>oklch(0.6 0.15 307)</strong></div>
<div class="color-item heather">heather<br /><strong>oklch(0.64 0.1 307)</strong></div>
<div class="color-item amethyst">amethyst<br /><strong>oklch(0.62 0.2 306)</strong></div>
<div class="color-item raisin">raisin<br /><strong>oklch(0.2 0.06 358)</strong></div>
<div class="color-item orchid">orchid<br /><strong>oklch(0.66 0.2 306)</strong></div>
<div class="color-item mulberry">mulberry<br /><strong>oklch(0.27 0.11 4.92)</strong></div>
</div>
<h3>greens</h3>
<div class="color-container">
<div class="color-item green">green<br /><strong>oklch(0.74 0.22 144)</strong></div>
<div class="color-item chartreuse">chartreuse<br /><strong>oklch(0.91 0.23 129)</strong></div>
<div class="color-item juniper">juniper<br /><strong>oklch(0.41 0.1 129)</strong></div>
<div class="color-item sage">sage<br /><strong>oklch(0.61 0.06 138)</strong></div>
<div class="color-item lime">lime<br /><strong>oklch(0.87 0.25 149)</strong></div>
<div class="color-item fern">fern<br /><strong>oklch(0.72 0.15 145)</strong></div>
<div class="color-item olive">olive<br /><strong>oklch(0.76 0.13 128)</strong></div>
<div class="color-item emerald">emerald<br /><strong>oklch(0.55 0.18 143)</strong></div>
<div class="color-item pear">pear<br /><strong>oklch(0.71 0.18 132)</strong></div>
<div class="color-item moss">moss<br /><strong>oklch(0.49 0.12 132)</strong></div>
<div class="color-item shamrock">shamrock<br /><strong>oklch(0.65 0.22 143)</strong></div>
<div class="color-item seafoam">seafoam<br /><strong>oklch(0.84 0.18 156)</strong></div>
<div class="color-item pine">pine<br /><strong>oklch(0.39 0.09 141)</strong></div>
<div class="color-item parakeet">parakeet<br /><strong>oklch(0.7 0.21 147)</strong></div>
<div class="color-item mint">mint<br /><strong>oklch(0.88 0.1 162)</strong></div>
<div class="color-item seaweed">seaweed<br /><strong>oklch(0.38 0.07 132)</strong></div>
<div class="color-item pickle">pickle<br /><strong>oklch(0.55 0.11 131)</strong></div>
<div class="color-item pistachio">pistachio<br /><strong>oklch(0.84 0.04 161)</strong></div>
<div class="color-item basil">basil<br /><strong>oklch(0.45 0.1 142)</strong></div>
<div class="color-item crocodile">crocodile<br /><strong>oklch(0.55 0.1 129)</strong></div>
</div>
<h3>Browns</h3>
<div class="color-container">
<div class="color-item brown">brown<br /><strong>oklch(0.22 0.03 66.9)</strong></div>
<div class="color-item coffee">coffee<br /><strong>oklch(0.35 0.05 73.3)</strong></div>
<div class="color-item mocha">mocha<br /><strong>oklch(0.3 0.05 74.1)</strong></div>
<div class="color-item peanut">peanut<br /><strong>oklch(0.5 0.07 74)</strong></div>
<div class="color-item carob">carob<br /><strong>oklch(0.28 0.04 76.2)</strong></div>
<div class="color-item hickory">hickory<br /><strong>oklch(0.26 0.05 46.6)</strong></div>
<div class="color-item pecan">pecan<br /><strong>oklch(0.31 0.06 46.5)</strong></div>
<div class="color-item walnut">walnut<br /><strong>oklch(0.3 0.05 56.9)</strong></div>
<div class="color-item caramel">caramel<br /><strong>oklch(0.39 0.08 55)</strong></div>
<div class="color-item gingerbread">gingerbread<br /><strong>oklch(0.35 0.09 52.9)</strong></div>
<div class="color-item chocolate">chocolate<br /><strong>oklch(0.23 0.05 59.9)</strong></div>
<div class="color-item tortilla">tortilla<br /><strong>oklch(0.6 0.07 75.4)</strong></div>
<div class="color-item umber">umber<br /><strong>oklch(0.28 0.04 61.9)</strong></div>
<div class="color-item tawny">tawny<br /><strong>oklch(0.46 0.09 56.9)</strong></div>
<div class="color-item brunette">brunette<br /><strong>oklch(0.27 0.05 57.6)</strong></div>
<div class="color-item cinammon">cinammon<br /><strong>oklch(0.36 0.09 44.9)</strong></div>
<div class="color-item penny">penny<br /><strong>oklch(0.33 0.07 45.4)</strong></div>
</div>
<h3>greys</h3>
<div class="color-container">
<div class="color-item grey">grey<br /><strong>oklch(0.74 0 0)</strong></div>
<div class="color-item shadow">shadow<br /><strong>oklch(0.34 0 0)</strong></div>
<div class="color-item graphite">graphite<br /><strong>oklch(0.44 0.03 319)</strong></div>
<div class="color-item iron">iron<br /><strong>oklch(0.31 0.01 338)</strong></div>
<div class="color-item pewter">pewter<br /><strong>oklch(0.53 0.04 289)</strong></div>
<div class="color-item cloud">cloud<br /><strong>oklch(0.83 0.02 286)</strong></div>
<div class="color-item silver">silver<br /><strong>oklch(0.9 0 0)</strong></div>
<div class="color-item smoke">smoke<br /><strong>oklch(0.45 0.02 311)</strong></div>
<div class="color-item anchor">anchor<br /><strong>oklch(0.38 0.02 286)</strong></div>
<div class="color-item ash">ash<br /><strong>oklch(0.43 0.01 9.96)</strong></div>
<div class="color-item porpoise">porpoise<br /><strong>oklch(0.42 0.03 288)</strong></div>
<div class="color-item dove">dove<br /><strong>oklch(0.56 0.03 320)</strong></div>
<div class="color-item fog">fog<br /><strong>oklch(0.48 0.02 326)</strong></div>
<div class="color-item flint">flint<br /><strong>oklch(0.6 0.05 286)</strong></div>
<div class="color-item pebble">pebble<br /><strong>oklch(0.32 0 0)</strong></div>
<div class="color-item lead">lead<br /><strong>oklch(0.37 0.03 288)</strong></div>
<div class="color-item coin">coin<br /><strong>oklch(0.68 0.03 288)</strong></div>
<div class="color-item fossil">fossil<br /><strong>oklch(0.56 0.01 338)</strong></div>
</div>
<h3>Blacks</h3>
<div class="color-container">
<div class="color-item black">black<br /><strong>oklch(0.18 0 0)</strong></div>
<div class="color-item ebony">ebony<br /><strong>oklch(0.11 0.02 71.8)</strong></div>
<div class="color-item crow">crow<br /><strong>oklch(0.25 0.01 67.5)</strong></div>
<div class="color-item charcoal">charcoal<br /><strong>oklch(0.25 0.01 315)</strong></div>
</div>
/* No context defined. */
/* color-mix() experiment: lighten a charcoal black */
:root {
/* lightening charcoal */
--oklch-text1: color-mix(in oklch, var(--oklch-color-charcoal) 10%, white);
--oklch-text2: color-mix(in oklch, var(--oklch-color-charcoal) 20%, white);
--oklch-text3: color-mix(in oklch, var(--oklch-color-charcoal) 30%, white);
--oklch-text4: color-mix(in oklch, var(--oklch-color-charcoal) 40%, white);
--oklch-text5: color-mix(in oklch, var(--oklch-color-charcoal) 50%, white);
--oklch-text6: color-mix(in oklch, var(--oklch-color-charcoal) 60%, white);
--oklch-text7: color-mix(in oklch, var(--oklch-color-charcoal) 70%, white);
--oklch-text8: color-mix(in oklch, var(--oklch-color-charcoal) 80%, white);
--oklch-text9: color-mix(in oklch, var(--oklch-color-charcoal) 90%, white);
}
.lch-light-text1 {
background-color: var(--text1);
}
.lch-light-text2 {
background-color: var(--text2);
}
.lch-light-text3 {
background-color: var(--text3);
}
.lch-light-text4 {
background-color: var(--text4);
}
.lch-light-text5 {
background-color: var(--text5);
}
.lch-light-text6 {
background-color: var(--text6);
}
.lch-light-text7 {
background-color: var(--text7);
}
.lch-light-text8 {
background-color: var(--text8);
}
.lch-light-text9 {
background-color: var(--text9);
color: #fff;
}
/* color-mix() experiment: darken a dark green mint color */
:root {
--lch-dark-text1: color-mix(in lab, var(--lab-color-mint) 10%, black);
--lch-dark-text2: color-mix(in lab, var(--lab-color-mint) 20%, black);
--lch-dark-text3: color-mix(in lab, var(--lab-color-mint) 30%, black);
--lch-dark-text4: color-mix(in lab, var(--lab-color-mint) 40%, black);
--lch-dark-text5: color-mix(in lab, var(--lab-color-mint) 50%, black);
--lch-dark-text6: color-mix(in lab, var(--lab-color-mint) 60%, black);
--lch-dark-text7: color-mix(in lab, var(--lab-color-mint) 70%, black);
--lch-dark-text8: color-mix(in lab, var(--lab-color-mint) 80%, black);
--lch-dark-text9: color-mix(in lab, var(--lab-color-mint) 90%, black);
}
.lch-dark-text1 {
background-color: var(--lch-dark-text1);
color: #fff;
}
.lch-dark-text2 {
background-color: var(--lch-dark-text2);
color: #fff;
}
.lch-dark-text3 {
background-color: var(--lch-dark-text3);
color: #fff;
}
.lch-dark-text4 {
background-color: var(--lch-dark-text4);
color: #fff;
}
.lch-dark-text5 {
background-color: var(--lch-dark-text5);
color: #fff;
}
.lch-dark-text6 {
background-color: var(--lch-dark-text6);
color: #fff;
}
.lch-dark-text7 {
background-color: var(--lch-dark-text7);
color: #fff;
}
.lch-dark-text8 {
background-color: var(--lch-dark-text8);
color: #fff;
}
.lch-dark-text9 {
background-color: var(--lch-dark-text9);
color: #fff;
}
:root {
--oklch-color-white: oklch(1 0 326);
--oklch-color-alabaster: oklch(0.99 0.01 88.7);
--oklch-color-snow: oklch(0.99 0.01 190);
--oklch-color-ivory: oklch(0.98 0.02 89.2);
--oklch-color-cream: oklch(0.98 0.04 101);
--oklch-color-eggshell: oklch(0.98 0.03 96.4);
--oklch-color-cotton: oklch(0.99 0.01 116);
--oklch-color-chiffon: oklch(0.98 0.01 107);
--oklch-color-salt: oklch(0.96 0.01 39.4);
--oklch-color-lace: oklch(0.97 0.01 74.4);
--oklch-color-coconut: oklch(0.97 0.02 60.8);
--oklch-color-linen: oklch(0.94 0.03 93.5);
--oklch-color-bone: oklch(0.9 0.03 87.9);
--oklch-color-porcelain: oklch(1 0 106);
--oklch-color-parchment: oklch(0.97 0.03 94.9);
--oklch-color-rice: oklch(0.98 0.01 76.6);
--oklch-color-blue: oklch(0.56 0.18 254);
--oklch-color-navy: oklch(0.24 0.07 252);
--oklch-color-aqua: oklch(0.85 0.1 225);
--oklch-color-sky: oklch(0.73 0.16 238);
--oklch-color-teal: oklch(0.77 0.12 195);
--oklch-color-slate: oklch(0.58 0.02 264);
--oklch-color-indigo: oklch(0.29 0.11 285);
--oklch-color-cobalt: oklch(0.42 0.21 265);
--oklch-color-ocean: oklch(0.44 0.07 199);
--oklch-color-peacock: oklch(0.27 0.05 217);
--oklch-color-azure: oklch(0.36 0.2 268);
--oklch-color-cerulean: oklch(0.62 0.12 231);
--oklch-color-lapis: oklch(0.42 0.22 269);
--oklch-color-spruce: oklch(0.35 0.03 240);
--oklch-color-stone: oklch(0.56 0.05 238);
--oklch-color-aegean: oklch(0.38 0.08 252);
--oklch-color-berry: oklch(0.29 0.14 280);
--oklch-color-denim: oklch(0.24 0.06 268);
--oklch-color-admiral: oklch(0.31 0.2 265);
--oklch-color-sapphire: oklch(0.71 0.09 208);
--oklch-color-arctic: oklch(0.89 0.1 208);
--oklch-color-tan: oklch(0.89 0.06 97.4);
--oklch-color-beige: oklch(0.89 0.09 96.3);
--oklch-color-macaroon: oklch(0.9 0.13 96.8);
--oklch-color-hazelwood: oklch(0.79 0.06 94.2);
--oklch-color-granola: oklch(0.79 0.12 91.1);
--oklch-color-oat: oklch(0.84 0.08 91.8);
--oklch-color-eggnog: oklch(0.92 0.09 90.4);
--oklch-color-fawn: oklch(0.74 0.11 90.6);
--oklch-color-sugarcookie: oklch(0.93 0.08 102);
--oklch-color-sand: oklch(0.79 0.11 90.5);
--oklch-color-sepia: oklch(0.8 0.09 74.7);
--oklch-color-latte: oklch(0.83 0.1 80.7);
--oklch-color-oyster: oklch(0.87 0.07 103);
--oklch-color-biscotti: oklch(0.83 0.12 92.3);
--oklch-color-parmesean: oklch(0.93 0.11 96.1);
--oklch-color-hazelnut: oklch(0.73 0.1 91.5);
--oklch-color-sandcastle: oklch(0.82 0.09 90.3);
--oklch-color-buttermilk: oklch(0.95 0.08 96.7);
--oklch-color-sanddollar: oklch(0.92 0.06 103);
--oklch-color-shortbread: oklch(0.93 0.11 96.1);
--oklch-color-yellow: oklch(0.9 0.19 97.4);
--oklch-color-canary: oklch(0.85 0.17 90.4);
--oklch-color-gold: oklch(0.79 0.17 73.3);
--oklch-color-daffodil: oklch(0.94 0.12 101);
--oklch-color-flaxen: oklch(0.78 0.12 90.9);
--oklch-color-butter: oklch(0.91 0.18 99.7);
--oklch-color-lemon: oklch(0.96 0.18 114);
--oklch-color-mustard: oklch(0.8 0.15 87.8);
--oklch-color-corn: oklch(0.84 0.18 101);
--oklch-color-medallion: oklch(0.78 0.16 87.6);
--oklch-color-dandelion: oklch(0.87 0.17 91);
--oklch-color-bumblebee: oklch(0.91 0.19 101);
--oklch-color-banana: oklch(0.96 0.1 103);
--oklch-color-butterscotch: oklch(0.83 0.17 84.9);
--oklch-color-dijon: oklch(0.69 0.14 85);
--oklch-color-honey: oklch(0.75 0.16 69.6);
--oklch-color-blonde: oklch(0.93 0.14 101);
--oklch-color-pineapple: oklch(0.91 0.18 99.8);
--oklch-color-tuscansun: oklch(0.87 0.17 92.8);
--oklch-color-orange: oklch(0.74 0.18 53.5);
--oklch-color-tangerine: oklch(0.73 0.17 51.9);
--oklch-color-merigold: oklch(0.81 0.16 74.9);
--oklch-color-cider: oklch(0.59 0.13 56.2);
--oklch-color-rust: oklch(0.46 0.12 49.7);
--oklch-color-ginger: oklch(0.57 0.15 49.7);
--oklch-color-tiger: oklch(0.7 0.2 45.6);
--oklch-color-bronze: oklch(0.56 0.14 50.9);
--oklch-color-cantaloupe: oklch(0.79 0.13 47.7);
--oklch-color-apricot: oklch(0.71 0.17 57.1);
--oklch-color-carrot: oklch(0.68 0.18 49.1);
--oklch-color-squash: oklch(0.6 0.16 48.5);
--oklch-color-spice: oklch(0.42 0.11 52.4);
--oklch-color-marmalade: oklch(0.62 0.16 49.6);
--oklch-color-amber: oklch(0.44 0.13 42.7);
--oklch-color-sandstone: oklch(0.65 0.15 52);
--oklch-color-yam: oklch(0.6 0.17 46.7);
--oklch-color-red: oklch(0.66 0.23 28.4);
--oklch-color-cherry: oklch(0.44 0.17 30.4);
--oklch-color-rose: oklch(0.59 0.22 26.5);
--oklch-color-jam: oklch(0.32 0.11 28.5);
--oklch-color-merlot: oklch(0.32 0.08 26.9);
--oklch-color-garnet: oklch(0.31 0.12 30);
--oklch-color-crimson: oklch(0.5 0.2 29.2);
--oklch-color-ruby: oklch(0.41 0.17 29.2);
--oklch-color-scarlet: oklch(0.42 0.16 29.1);
--oklch-color-redwine: oklch(0.27 0.1 29);
--oklch-color-redapple: oklch(0.47 0.18 30.2);
--oklch-color-mahogany: oklch(0.25 0.08 28.6);
--oklch-color-blood: oklch(0.35 0.13 30.2);
--oklch-color-sangria: oklch(0.33 0.1 28.1);
--oklch-color-currant: oklch(0.33 0.12 29.2);
--oklch-color-blush: oklch(0.57 0.14 27.7);
--oklch-color-candy: oklch(0.55 0.22 30.2);
--oklch-color-lipstick: oklch(0.44 0.17 30.4);
--oklch-color-pink: oklch(0.79 0.13 346);
--oklch-color-fuchsia: oklch(0.65 0.27 341);
--oklch-color-punch: oklch(0.67 0.2 10);
--oklch-color-watermelon: oklch(0.75 0.15 7.5);
--oklch-color-flamingo: oklch(0.81 0.11 5.11);
--oklch-color-rouge: oklch(0.7 0.17 7.51);
--oklch-color-salmon: oklch(0.82 0.1 28.6);
--oklch-color-coral: oklch(0.73 0.16 31.2);
--oklch-color-peach: oklch(0.77 0.13 30.2);
--oklch-color-strawberry: oklch(0.67 0.21 24.5);
--oklch-color-rosewood: oklch(0.51 0.13 22.7);
--oklch-color-lemonade: oklch(0.85 0.08 1.31);
--oklch-color-taffy: oklch(0.76 0.16 348);
--oklch-color-bubblegum: oklch(0.71 0.21 355);
--oklch-color-balletslipper: oklch(0.79 0.12 354);
--oklch-color-crepe: oklch(0.84 0.07 1.58);
--oklch-color-maroon: oklch(0.41 0.15 358);
--oklch-color-hotpink: oklch(0.66 0.26 356);
--oklch-color-purple: oklch(0.55 0.26 321);
--oklch-color-mauve: oklch(0.49 0.11 318);
--oklch-color-violet: oklch(0.41 0.2 315);
--oklch-color-boysenberry: oklch(0.33 0.13 357);
--oklch-color-lavender: oklch(0.8 0.14 319);
--oklch-color-plum: oklch(0.34 0.1 360);
--oklch-color-lilac: oklch(0.63 0.18 319);
--oklch-color-periwinkle: oklch(0.73 0.1 314);
--oklch-color-eggplant: oklch(0.25 0.07 327);
--oklch-color-iris: oklch(0.6 0.15 307);
--oklch-color-heather: oklch(0.64 0.1 307);
--oklch-color-amethyst: oklch(0.62 0.2 306);
--oklch-color-raisin: oklch(0.2 0.06 358);
--oklch-color-orchid: oklch(0.66 0.2 306);
--oklch-color-mulberry: oklch(0.27 0.11 4.92);
--oklch-color-green: oklch(0.74 0.22 144);
--oklch-color-chartreuse: oklch(0.91 0.23 129);
--oklch-color-juniper: oklch(0.41 0.1 129);
--oklch-color-sage: oklch(0.61 0.06 138);
--oklch-color-lime: oklch(0.87 0.25 149);
--oklch-color-fern: oklch(0.72 0.15 145);
--oklch-color-olive: oklch(0.76 0.13 128);
--oklch-color-emerald: oklch(0.55 0.18 143);
--oklch-color-pear: oklch(0.71 0.18 132);
--oklch-color-moss: oklch(0.49 0.12 132);
--oklch-color-shamrock: oklch(0.65 0.22 143);
--oklch-color-seafoam: oklch(0.84 0.18 156);
--oklch-color-pine: oklch(0.39 0.09 141);
--oklch-color-parakeet: oklch(0.7 0.21 147);
--oklch-color-mint: oklch(0.88 0.1 162);
--oklch-color-seaweed: oklch(0.38 0.07 132);
--oklch-color-pickle: oklch(0.55 0.11 131);
--oklch-color-pistachio: oklch(0.84 0.04 161);
--oklch-color-basil: oklch(0.45 0.1 142);
--oklch-color-crocodile: oklch(0.55 0.1 129);
--oklch-color-brown: oklch(0.22 0.03 66.9);
--oklch-color-coffee: oklch(0.35 0.05 73.3);
--oklch-color-mocha: oklch(0.3 0.05 74.1);
--oklch-color-peanut: oklch(0.5 0.07 74);
--oklch-color-carob: oklch(0.28 0.04 76.2);
--oklch-color-hickory: oklch(0.26 0.05 46.6);
--oklch-color-pecan: oklch(0.31 0.06 46.5);
--oklch-color-walnut: oklch(0.3 0.05 56.9);
--oklch-color-caramel: oklch(0.39 0.08 55);
--oklch-color-gingerbread: oklch(0.35 0.09 52.9);
--oklch-color-chocolate: oklch(0.23 0.05 59.9);
--oklch-color-tortilla: oklch(0.6 0.07 75.4);
--oklch-color-umber: oklch(0.28 0.04 61.9);
--oklch-color-tawny: oklch(0.46 0.09 56.9);
--oklch-color-brunette: oklch(0.27 0.05 57.6);
--oklch-color-cinammon: oklch(0.36 0.09 44.9);
--oklch-color-penny: oklch(0.33 0.07 45.4);
--oklch-color-grey: oklch(0.74 0 0);
--oklch-color-shadow: oklch(0.34 0 0);
--oklch-color-graphite: oklch(0.44 0.03 319);
--oklch-color-iron: oklch(0.31 0.01 338);
--oklch-color-pewter: oklch(0.53 0.04 289);
--oklch-color-cloud: oklch(0.83 0.02 286);
--oklch-color-silver: oklch(0.9 0 0);
--oklch-color-smoke: oklch(0.45 0.02 311);
--oklch-color-anchor: oklch(0.38 0.02 286);
--oklch-color-ash: oklch(0.43 0.01 9.96);
--oklch-color-porpoise: oklch(0.42 0.03 288);
--oklch-color-dove: oklch(0.56 0.03 320);
--oklch-color-fog: oklch(0.48 0.02 326);
--oklch-color-flint: oklch(0.6 0.05 286);
--oklch-color-pebble: oklch(0.32 0 0);
--oklch-color-lead: oklch(0.37 0.03 288);
--oklch-color-coin: oklch(0.68 0.03 288);
--oklch-color-fossil: oklch(0.56 0.01 338);
--oklch-color-black: oklch(0.18 0 0);
--oklch-color-ebony: oklch(0.11 0.02 71.8);
--oklch-color-crow: oklch(0.25 0.01 67.5);
--oklch-color-charcoal: oklch(0.25 0.01 315);
}
.color-container {
display: flex;
flex-flow: row wrap;
gap: 1em;
}
.color-item {
border: 2px solid var(--oklch-color-black);
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
}
.white {background-color: var(--oklch-color-white);}
.pearl {background-color: var(--oklch-color-pearl);}
.alabaster {background-color: var(--oklch-color-alabaster);}
.snow {background-color: var(--oklch-color-snow);}
.ivory {background-color: var(--oklch-color-ivory);}
.cream {background-color: var(--oklch-color-cream);}
.eggshell {background-color: var(--oklch-color-eggshell);}
.cotton {background-color: var(--oklch-color-cotton);}
.chiffon {background-color: var(--oklch-color-chiffon);}
.salt {background-color: var(--oklch-color-salt);}
.lace {background-color: var(--oklch-color-lace);}
.coconut {background-color: var(--oklch-color-coconut);}
.linen {background-color: var(--oklch-color-linen);}
.bone {background-color: var(--oklch-color-bone);}
.porcelain {background-color: var(--oklch-color-porcelain);}
.parchment {background-color: var(--oklch-color-parchment);}
.rice {background-color: var(--oklch-color-rice);}
/* blues */
.blue {color: white; background-color: var(--oklch-color-blue);}
.navy {color: white; background-color: var(--oklch-color-navy);}
.aqua {color: white; background-color: var(--oklch-color-aqua);}
.sky {color: white; background-color: var(--oklch-color-sky);}
.teal {color: white; background-color: var(--oklch-color-teal);}
.slate {color: white; background-color: var(--oklch-color-slate);}
.indigo {color: white; background-color: var(--oklch-color-indigo);}
.cobalt {color: white; background-color: var(--oklch-color-cobalt);}
.ocean {color: white; background-color: var(--oklch-color-ocean);}
.peacock {color: white; background-color: var(--oklch-color-peacock);}
.azure {color: white; background-color: var(--oklch-color-azure);}
.cerulean {color: white; background-color: var(--oklch-color-cerulean);}
.lapis {color: white; background-color: var(--oklch-color-lapis);}
.spruce {color: white; background-color: var(--oklch-color-spruce);}
.stone {color: white; background-color: var(--oklch-color-stone);}
.aegean {color: white; background-color: var(--oklch-color-aegean);}
.berry {color: white; background-color: var(--oklch-color-berry);}
.denim {color: white; background-color: var(--oklch-color-denim);}
.admiral {color: white; background-color: var(--oklch-color-admiral);}
.sapphire {color: white; background-color: var(--oklch-color-sapphire);}
.arctic {color: white; background-color: var(--oklch-color-arctic);}
/* browns */
.tan {background-color: var(--oklch-color-tan);}
.beige {background-color: var(--oklch-color-beige);}
.macaroon {background-color: var(--oklch-color-macaroon);}
.hazelwood {background-color: var(--oklch-color-hazelwood);}
.granola {background-color: var(--oklch-color-granola);}
.oat {background-color: var(--oklch-color-oat);}
.eggnog {background-color: var(--oklch-color-eggnog);}
.fawn {background-color: var(--oklch-color-fawn);}
.sugarcookie {background-color: var(--oklch-color-sugarcookie);}
.sand {background-color: var(--oklch-color-sand);}
.sepia {background-color: var(--oklch-color-sepia);}
.latte {background-color: var(--oklch-color-latte);}
.oyster {background-color: var(--oklch-color-oyster);}
.biscotti {background-color: var(--oklch-color-biscotti);}
.parmesean {background-color: var(--oklch-color-parmesean);}
.hazelnut {background-color: var(--oklch-color-hazelnut);}
.sandcastle {background-color: var(--oklch-color-sandcastle);}
.buttermilk {background-color: var(--oklch-color-buttermilk);}
.sanddollar {background-color: var(--oklch-color-sanddollar);}
.shortbread {background-color: var(--oklch-color-shortbread);}
/* yellows */
.yellow {background-color: var(--oklch-color-yellow);}
.canary {background-color: var(--oklch-color-canary);}
.gold {background-color: var(--oklch-color-gold);}
.daffodil {background-color: var(--oklch-color-daffodil);}
.flaxen {background-color: var(--oklch-color-flaxen);}
.butter {background-color: var(--oklch-color-butter);}
.lemon {background-color: var(--oklch-color-lemon);}
.mustard {background-color: var(--oklch-color-mustard);}
.corn {background-color: var(--oklch-color-corn);}
.medallion {background-color: var(--oklch-color-medallion);}
.dandelion {background-color: var(--oklch-color-dandelion);}
.bumblebee {background-color: var(--oklch-color-bumblebee);}
.banana {background-color: var(--oklch-color-banana);}
.butterscotch {background-color: var(--oklch-color-butterscotch);}
.dijon {background-color: var(--oklch-color-dijon);}
.honey {background-color: var(--oklch-color-honey);}
.blonde {background-color: var(--oklch-color-blonde);}
.pineapple {background-color: var(--oklch-color-pineapple);}
.tuscansun {background-color: var(--oklch-color-tuscansun);}
/* oranges */
.orange {background-color: var(--oklch-color-orange);}
.tangerine {background-color: var(--oklch-color-tangerine);}
.merigold {background-color: var(--oklch-color-merigold);}
.cider {background-color: var(--oklch-color-cider);}
.rust {background-color: var(--oklch-color-rust);}
.ginger {background-color: var(--oklch-color-ginger);}
.tiger {background-color: var(--oklch-color-tiger);}
.bronze {background-color: var(--oklch-color-bronze);}
.cantaloupe {background-color: var(--oklch-color-cantaloupe);}
.apricot {background-color: var(--oklch-color-apricot);}
.carrot {background-color: var(--oklch-color-carrot);}
.squash {background-color: var(--oklch-color-squash);}
.spice {background-color: var(--oklch-color-spice);}
.marmalade {background-color: var(--oklch-color-marmalade);}
.amber {background-color: var(--oklch-color-amber);}
.sandstone {background-color: var(--oklch-color-sandstone);}
.yam {background-color: var(--oklch-color-yam);}
/* reds */
.red {color: white;background-color: var(--oklch-color-red);}
.cherry {color: white;background-color: var(--oklch-color-cherry);}
.rose {color: white;background-color: var(--oklch-color-rose);}
.jam {color: white;background-color: var(--oklch-color-jam);}
.merlot {color: white;background-color: var(--oklch-color-merlot);}
.garnet {color: white;background-color: var(--oklch-color-garnet);}
.crimson {color: white;background-color: var(--oklch-color-crimson);}
.ruby {color: white;background-color: var(--oklch-color-ruby);}
.scarlet {color: white;background-color: var(--oklch-color-scarlet);}
.redwine {color: white;background-color: var(--oklch-color-redwine);}
.redapple {color: white;background-color: var(--oklch-color-redapple);}
.mahogany {color: white;background-color: var(--oklch-color-mahogany);}
.blood {color: white;background-color: var(--oklch-color-blood);}
.sangria {color: white;background-color: var(--oklch-color-sangria);}
.currant {color: white;background-color: var(--oklch-color-currant);}
.blush {color: white;background-color: var(--oklch-color-blush);}
.candy {color: white;background-color: var(--oklch-color-candy);}
.lipstick {color: white;background-color: var(--oklch-color-lipstick);}
/* pinks */
.pink {color: white; background-color: var(--oklch-color-pink);}
.fuchsia {color: white; background-color: var(--oklch-color-fuchsia);}
.punch {color: white; background-color: var(--oklch-color-punch);}
.watermelon {color: white; background-color: var(--oklch-color-watermelon);}
.flamingo {color: white; background-color: var(--oklch-color-flamingo);}
.rouge {color: white; background-color: var(--oklch-color-rouge);}
.salmon {color: white; background-color: var(--oklch-color-salmon);}
.coral {color: white; background-color: var(--oklch-color-coral);}
.peach {color: white; background-color: var(--oklch-color-peach);}
.strawberry {color: white; background-color: var(--oklch-color-strawberry);}
.rosewood {color: white; background-color: var(--oklch-color-rosewood);}
.lemonade {color: white; background-color: var(--oklch-color-lemonade);}
.taffy {color: white; background-color: var(--oklch-color-taffy);}
.bubblegum {color: white; background-color: var(--oklch-color-bubblegum);}
.balletslipper {color: white; background-color: var(--oklch-color-balletslipper);}
.crepe {color: white; background-color: var(--oklch-color-crepe);}
.maroon {color: white; background-color: var(--oklch-color-maroon);}
.hotpink {color: white; background-color: var(--oklch-color-hotpink);}
/* purples */
.purple {color: white; background-color: var(--oklch-color-purple);}
.mauve {color: white; background-color: var(--oklch-color-mauve);}
.violet {color: white; background-color: var(--oklch-color-violet);}
.boysenberry {color: white; background-color: var(--oklch-color-boysenberry);}
.lavender {color: white; background-color: var(--oklch-color-lavender);}
.plum {color: white; background-color: var(--oklch-color-plum);}
.lilac {color: white; background-color: var(--oklch-color-lilac);}
.periwinkle {color: white; background-color: var(--oklch-color-periwinkle);}
.eggplant {color: white; background-color: var(--oklch-color-eggplant);}
.iris {color: white; background-color: var(--oklch-color-iris);}
.heather {color: white; background-color: var(--oklch-color-heather);}
.amethyst {color: white; background-color: var(--oklch-color-amethyst);}
.raisin {color: white; background-color: var(--oklch-color-raisin);}
.orchid {color: white; background-color: var(--oklch-color-orchid);}
.mulberry {color: white; background-color: var(--oklch-color-mulberry);}
/* greens */
.green {color: white; background-color: var(--oklch-color-green);}
.chartreuse {color: white; background-color: var(--oklch-color-chartreuse);}
.juniper {color: white; background-color: var(--oklch-color-juniper);}
.sage {color: white; background-color: var(--oklch-color-sage);}
.lime {color: white; background-color: var(--oklch-color-lime);}
.fern {color: white; background-color: var(--oklch-color-fern);}
.olive {color: white; background-color: var(--oklch-color-olive);}
.emerald {color: white; background-color: var(--oklch-color-emerald);}
.pear {color: white; background-color: var(--oklch-color-pear);}
.moss {color: white; background-color: var(--oklch-color-moss);}
.shamrock {color: white; background-color: var(--oklch-color-shamrock);}
.seafoam {color: white; background-color: var(--oklch-color-seafoam);}
.pine {color: white; background-color: var(--oklch-color-pine);}
.parakeet {color: white; background-color: var(--oklch-color-parakeet);}
.mint {color: white; background-color: var(--oklch-color-mint);}
.seaweed {color: white; background-color: var(--oklch-color-seaweed);}
.pickle {color: white; background-color: var(--oklch-color-pickle);}
.pistachio {color: white; background-color: var(--oklch-color-pistachio);}
.basil {color: white; background-color: var(--oklch-color-basil);}
.crocodile {color: white; background-color: var(--oklch-color-crocodile);}
/* browns */
.brown {color: white; background-color: var(--oklch-color-brown);}
.coffee {color: white; background-color: var(--oklch-color-coffee);}
.mocha {color: white; background-color: var(--oklch-color-mocha);}
.peanut {color: white; background-color: var(--oklch-color-peanut);}
.carob {color: white; background-color: var(--oklch-color-carob);}
.hickory {color: white; background-color: var(--oklch-color-hickory);}
.pecan {color: white; background-color: var(--oklch-color-pecan);}
.walnut {color: white; background-color: var(--oklch-color-walnut);}
.caramel {color: white; background-color: var(--oklch-color-caramel);}
.gingerbread {color: white; background-color: var(--oklch-color-gingerbread);}
.chocolate {color: white; background-color: var(--oklch-color-chocolate);}
.tortilla {color: white; background-color: var(--oklch-color-tortilla);}
.umber {color: white; background-color: var(--oklch-color-umber);}
.tawny {color: white; background-color: var(--oklch-color-tawny);}
.brunette {color: white; background-color: var(--oklch-color-brunette);}
.cinammon {color: white; background-color: var(--oklch-color-cinammon);}
.penny {color: white; background-color: var(--oklch-color-penny);}
/* greys */
.grey {color: white; background-color: var(--oklch-color-grey);}
.shadow {color: white; background-color: var(--oklch-color-shadow);}
.graphite {color: white; background-color: var(--oklch-color-graphite);}
.iron {color: white; background-color: var(--oklch-color-iron);}
.pewter {color: white; background-color: var(--oklch-color-pewter);}
.cloud {color: white; background-color: var(--oklch-color-cloud);}
.silver {color: white; background-color: var(--oklch-color-silver);}
.smoke {color: white; background-color: var(--oklch-color-smoke);}
.anchor {color: white; background-color: var(--oklch-color-anchor);}
.ash {color: white; background-color: var(--oklch-color-ash);}
.porpoise {color: white; background-color: var(--oklch-color-porpoise);}
.dove {color: white; background-color: var(--oklch-color-dove);}
.fog {color: white; background-color: var(--oklch-color-fog);}
.flint {color: white; background-color: var(--oklch-color-flint);}
.pebble {color: white; background-color: var(--oklch-color-pebble);}
.lead {color: white; background-color: var(--oklch-color-lead);}
.coin {color: white; background-color: var(--oklch-color-coin);}
.fossil {color: white; background-color: var(--oklch-color-fossil);}
/* blacks */
.black {color: white; background-color: var(--oklch-color-black);}
.ebony {color: white; background-color: var(--oklch-color-ebony);}
.crow {color: white; background-color: var(--oklch-color-crow);}
.charcoal {color: white; background-color: var(--oklch-color-charcoal);}
:root {
--oklch-color-plum-crazy: oklch(0.45 0.25 294);
--oklch-color-cherry: oklch(0.55 0.22 22.6);
--oklch-color-black-cherry: oklch(0.33 0.07 352);
--oklch-color-panther-pink: oklch(0.58 0.19 340);
--oklch-color-green-go: oklch(0.61 0.15 148);
--oklch-color-sublime-green: oklch(0.83 0.2 129);
--oklch-color-go-mango: oklch(0.62 0.17 28.2);
--oklch-color-butterscotch: oklch(0.69 0.14 67);
--oklch-color-bright-green: oklch(0.88 0.28 138);
--oklch-color-top-banana: oklch(0.93 0.17 103);
--oklch-color-citron-yella: oklch(0.7 0.15 114);
--oklch-color-rebeccapurple: oklch(0.44 0.16 303);
}
.hemi-orange { background-color: var(--oklch-color-hemi-orange); color: white; }
.plum-crazy { background-color: var(--oklch-color-plum-crazy); color: white; }
.cherry { background-color: var(--oklch-color-cherry:); color: white; }
.black-cherry { background-color: var(--oklch-color-black-cherry); color: white; }
.panther-pink { background-color: var(--oklch-color-panther-pink); color: white; }
.green-go { background-color: var(--oklch-color-green-go); color: white; }
.sublime-green { background-color: var(--oklch-color-sublime-green); color: white; }
.go-mango { background-color: var(--oklch-color-go-mango); color: white; }
.butterscotch: { background-color: var(--oklch-color-butterscotch); color: white; }
.bright-green { background-color: var(--oklch-color-bright-green); color: white; }
.top-banana { background-color: var(--oklch-color-top-banana); color: white; }
.citron-yella { background-color: var(--oklch-color-citron-yella); color: white; }
.panther-pink { background-color: var(--oklch-color-panther-pink); color: white; }
.rebeccapurple { background-color: var(--oklch-color-rebeccapurple); color: white; }
.lch-hemi-orange { background-color: var(--oklch-color-hemi-orange); color: white; }
.lch-plum-crazy { background-color: var(--oklch-color-plum-crazy); color: white; }
.lch-cherry { background-color: var(--oklch-color-cherry:); color: white; }
.lch-black-cherry { background-color: var(--oklch-color-black-cherry); color: white; }
.lch-panther-pink { background-color: var(--oklch-color-panther-pink); color: white; }
.lch-green-go { background-color: var(--oklch-color-green-go); color: white; }
.lch-sublime-green { background-color: var(--oklch-color-sublime-green); color: white; }
.lch-go-mango { background-color: var(--oklch-color-go-mango); color: white; }
.lch-butterscotch: { background-color: var(--oklch-color-butterscotch); color: white; }
.lch-bright-green { background-color: var(--oklch-color-bright-green); color: white; }
.lch-top-banana { background-color: var(--oklch-color-top-banana); color: white; }
.lch-citron-yella { background-color: var(--oklch-color-citron-yella); color: white; }
.lch-panther-pink { background-color: var(--oklch-color-panther-pink); color: white; }
.lch-rebeccapurple { background-color: var(--oklch-color-rebeccapurple); color: white; }
:root {
--theme-primary: #663399;
--theme-primary-900: lab(from var(--theme-primary) 10% a b);
--theme-primary-800: lab(from var(--theme-primary) 20% a b);
--theme-primary-700: lab(from var(--theme-primary) 30% a b);
--theme-primary-600: lab(from var(--theme-primary) 40% a b);
--theme-primary-500: lab(from var(--theme-primary) 50% a b);
--theme-primary-400: lab(from var(--theme-primary) 60% a b);
--theme-primary-300: lab(from var(--theme-primary) 70% a b);
--theme-primary-200: lab(from var(--theme-primary) 80% a b);
--theme-primary-100: lab(from var(--theme-primary) 90% a b);
--theme-secondary: #2632c2;
--theme-secondary-900: lab(from var(--theme-secondary) 10% a b);
--theme-secondary-800: lab(from var(--theme-secondary) 20% a b);
--theme-secondary-700: lab(from var(--theme-secondary) 30% a b);
--theme-secondary-600: lab(from var(--theme-secondary) 40% a b);
--theme-secondary-500: lab(from var(--theme-secondary) 50% a b);
--theme-secondary-400: lab(from var(--theme-secondary) 60% a b);
--theme-secondary-300: lab(from var(--theme-secondary) 70% a b);
--theme-secondary-200: lab(from var(--theme-secondary) 80% a b);
--theme-secondary-100: lab(from var(--theme-secondary) 90% a b);
--theme-tertiary: #d2042d;
--theme-tertiary-100: lab(from var(--theme-tertiary) 90% a b);
--theme-tertiary-200: lab(from var(--theme-tertiary) 80% a b);
--theme-tertiary-300: lab(from var(--theme-tertiary) 70% a b);
--theme-tertiary-400: lab(from var(--theme-tertiary) 60% a b);
--theme-tertiary-500: lab(from var(--theme-tertiary) 50% a b);
--theme-tertiary-600: lab(from var(--theme-tertiary) 40% a b);
--theme-tertiary-700: lab(from var(--theme-tertiary) 30% a b);
--theme-tertiary-800: lab(from var(--theme-tertiary) 20% a b);
--theme-tertiary-900: lab(from var(--theme-tertiary) 10% a b);
}
html {
font-family: Raleway, sans-serif;
}
.outside-container {
margin-inline: 10rem;
margin-block-start: 4rem;
}
.explainer {
width: 80ch;
font-size: 1.5rem;
margin-block-end: 2rem;
}
.container {
display: flex;
flex-flow: row;
}
.box {
border: 4px solid black;
margin-inline-end: 5px;
margin-block: 10px;
height: 100px;
width: 100px;
display: flex;
place-content: center;
place-items: center;
font-size: 2rem;
}
.warning {
color: red;
}
/* Classes for themes */
/* Primary theme */
.theme-900 {
background: var(--theme-primary-900);
color: color-contrast(var(--theme-primary-900) vs black, white);
}
.theme-800 {
background: var(--theme-primary-800);
color: color-contrast(var(--theme-primary-800) vs white, black);
}
.theme-700 {
background: var(--theme-primary-700);
color: color-contrast(var(--theme-primary-700) vs white, black);
}
.theme-600 {
background: var(--theme-primary-600);
color: color-contrast(var(--theme-primary-600) vs white, black);
}
.theme-500 {
background: var(--theme-primary-500);
color: color-contrast(var(--theme-primary-500) vs white, black);
}
.theme-400 {
background: var(--theme-primary-400);
color: color-contrast(var(--theme-primary-400) vs white, black);
}
.theme-300 {
background: var(--theme-primary-300);
color: color-contrast(var(--theme-primary-300) vs white, black);
}
.theme-200 {
background: var(--theme-primary-200);
color: color-contrast(var(--theme-primary-200) vs white, black);
}
.theme-100 {
background: var(--theme-primary-100);
color: color-contrast(var(--theme-primary-100) vs white, black);
}
/* Secondary theme */
.theme-secondary-900 {
background: var(--theme-secondary-900);
color: color-contrast(var(--theme-secondary-900) vs black, white);
}
.theme-secondary-800 {
background: var(--theme-secondary-800);
color: color-contrast(var(--theme-secondary-800) vs white, black);
}
.theme-secondary-700 {
background: var(--theme-secondary-700);
color: color-contrast(var(--theme-secondary-700) vs white, black);
}
.theme-secondary-600 {
background: var(--theme-secondary-600);
color: color-contrast(var(--theme-secondary-600) vs white, black);
}
.theme-secondary-500 {
background: var(--theme-secondary-500);
color: color-contrast(var(--theme-secondary-500) vs white, black);
}
.theme-secondary-400 {
background: var(--theme-secondary-400);
color: color-contrast(var(--theme-secondary-400) vs white, black);
}
.theme-secondary-300 {
background: var(--theme-secondary-300);
color: color-contrast(var(--theme-secondary-300) vs white, black);
}
.theme-secondary-200 {
background: var(--theme-secondary-200);
color: color-contrast(var(--theme-secondary-200) vs white, black);
}
.theme-secondary-100 {
background: var(--theme-secondary-100);
color: color-contrast(var(--theme-secondary-100) vs white, black);
}
/* Tertiary theme */
.theme-tertiary-900 {
background: var(--theme-tertiary-900);
color: color-contrast(var(--theme-tertiary-900) vs black, white);
}
.theme-tertiary-800 {
background: var(--theme-tertiary-800);
color: color-contrast(var(--theme-tertiary-800) vs white, black);
}
.theme-tertiary-700 {
background: var(--theme-tertiary-700);
color: color-contrast(var(--theme-tertiary-700) vs white, black);
}
.theme-tertiary-600 {
background: var(--theme-tertiary-600);
color: color-contrast(var(--theme-tertiary-600) vs white, black);
}
.theme-tertiary-500 {
background: var(--theme-tertiary-500);
color: color-contrast(var(--theme-tertiary-500) vs white, black);
}
.theme-tertiary-400 {
background: var(--theme-tertiary-400);
color: color-contrast(var(--theme-tertiary-400) vs white, black);
}
.theme-tertiary-300 {
background: var(--theme-tertiary-300);
color: color-contrast(var(--theme-tertiary-300) vs white, black);
}
.theme-tertiary-200 {
background: var(--theme-tertiary-200);
color: color-contrast(var(--theme-tertiary-200) vs white, black);
}
.theme-tertiary-100 {
background: var(--theme-tertiary-100);
color: color-contrast(var(--theme-tertiary-100) vs white, black);
}
No notes defined.