这是我参与11月更文挑战的第5天，活动详情查看：11月更文挑战
<ul class="swatches">
<li style="background: var(--ambrosia)"><span> ambrosia<br> #FCDBBA</span></li>
<li style="background: var(--apricot)"><span> apricot<br> #FF8652</span></li>
<li style="background: var(--aubergine)"><span> aubergine<br> #6A2352</span></li>
<li style="background: var(--auburn)"><span> auburn<br> #A12F2F</span></li>
<li style="background: var(--banana)"><span> banana<br> #FEE694</span></li>
<li style="background: var(--beetroot)"><span> beetroot<br> #7F0421</span></li>
<li style="background: var(--berry)"><span> berry<br> #461234</span></li>
<li style="background: var(--blue-tack)"><span> blue tack<br> #82BFE0</span></li>
<li style="background: var(--blue-gray)"><span> blue gray<br> #91A2C2</span></li>
<li style="background: var(--blush)"><span> blush<br> #D67B71</span></li>
<li style="background: var(--bronze)"><span> bronze<br> #C27940</span></li>
<li style="background: var(--bud)"><span> bud<br> #94C15C</span></li>
<li style="background: var(--burnt-orange)"><span> burnt orange<br> #FF5F00</span></li>
<li style="background: var(--butter)"><span> butter<br> #F2C94C</span></li>
<li style="background: var(--camo)"><span> camo<br> #AAA843</span></li>
<li style="background: var(--cappuccino)"><span> cappuccino<br> #C9B092</span></li>
<li style="background: var(--carmine)"><span> carmine<br> #9A133E</span></li>
<li style="background: var(--cerise)"><span> cerise<br> #FF0F63</span></li>
<li style="background: var(--champagne)"><span> champagne<br> #FCEBD5</span></li>
<li style="background: var(--charcoal)"><span> charcoal<br> #4F4450</span></li>
<li style="background: var(--chestnut)"><span> chestnut<br> #81291F</span></li>
<li style="background: var(--chocolate)"><span> chocolate<br> #8F5D38</span></li>
<li style="background: var(--clay)"><span> clay<br> #7D6050</span></li>
<li style="background: var(--cloud)"><span> cloud<br> #F2EFE3</span></li>
<li style="background: var(--coffee)"><span> coffee<br> #624739</span></li>
<li style="background: var(--conker)"><span> conker<br> #6F3131</span></li>
<li style="background: var(--coral)"><span> coral<br> #EB4444</span></li>
<li style="background: var(--dove)"><span> dove<br> #C9C5CB</span></li>
<li style="background: var(--dusty-purple)"><span> dusty purple<br> #7D6391</span></li>
<li style="background: var(--dusty-pink)"><span> dusty pink<br> #E4ADAD</span></li>
<li style="background: var(--emerald)"><span> emerald<br> #55B95F</span></li>
<li style="background: var(--eucalyptus)"><span> eucalyptus<br> #688461</span></li>
<li style="background: var(--fern)"><span> fern<br> #4F8D08</span></li>
<li style="background: var(--forest)"><span> forest<br> #2E644A</span></li>
<li style="background: var(--forget-me-not)"><span> forget me not<br> #91A7FA</span></li>
<li style="background: var(--fudge)"><span> fudge<br> #C28742</span></li>
<li style="background: var(--grassy)"><span> grassy<br> #A8D363</span></li>
<li style="background: var(--gray)"><span> gray<br> #98919F</span></li>
<li style="background: var(--green)"><span> green<br> #62B90A</span></li>
<li style="background: var(--hazelnut)"><span> hazelnut<br> #D08E5A</span></li>
<li style="background: var(--hot-pink)"><span> hot pink<br> #FF3263</span></li>
<li style="background: var(--ice)"><span> ice<br> #E1EFF8</span></li>
<li style="background: var(--ink)"><span> ink<br> #292C31</span></li>
<li style="background: var(--iron)"><span> iron<br> #6B5C6C</span></li>
<li style="background: var(--lapis)"><span> lapis<br> #2B4D8D</span></li>
<li style="background: var(--latte)"><span> latte<br> #A38468</span></li>
<li style="background: var(--leafy)"><span> leafy<br> #318553</span></li>
<li style="background: var(--lemon)"><span> lemon<br> #EAFC7E</span></li>
<li style="background: var(--lilac)"><span> lilac<br> #8E8ADE</span></li>
<li style="background: var(--lime)"><span> lime<br> #73D645</span></li>
<li style="background: var(--limestone)"><span> limestone<br> #C9C5B5</span></li>
<li style="background: var(--magenta)"><span> magenta<br> #BC2767</span></li>
<li style="background: var(--meadow)"><span> meadow<br> #7A9A3E</span></li>
<li style="background: var(--melon)"><span> melon<br> #F2994A</span></li>
<li style="background: var(--midnight)"><span> midnight<br> #1B3955</span></li>
<li style="background: var(--mink)"><span> mink<br> #E8C9A1</span></li>
<li style="background: var(--mint)"><span> mint<br> #C4EA70</span></li>
<li style="background: var(--moss)"><span> moss<br> #83A944</span></li>
<li style="background: var(--mushroom)"><span> mushroom<br> #EDE8D5</span></li>
<li style="background: var(--mustard)"><span> mustard<br> #CC9E08</span></li>
<li style="background: var(--navy)"><span> navy<br> #363A57</span></li>
<li style="background: var(--ocean)"><span> ocean<br> #206777</span></li>
<li style="background: var(--orange)"><span> orange<br> #FD8A04</span></li>
<li style="background: var(--orchid)"><span> orchid<br> #7945BF</span></li>
<li style="background: var(--pale-lemon)"><span> pale lemon<br> #F4FFDC</span></li>
<li style="background: var(--peach)"><span> peach<br> #FFB190</span></li>
<li style="background: var(--pebble)"><span> pebble<br> #B8B4BE</span></li>
<li style="background: var(--petal)"><span> petal<br> #F4E9F3</span></li>
<li style="background: var(--pink)"><span> pink<br> #FFC9D8</span></li>
<li style="background: var(--pond-bottom)"><span> pond bottom<br> #264A46</span></li>
<li style="background: var(--posy)"><span> posy<br> #DED7EC</span></li>
<li style="background: var(--powder-blue)"><span> powder blue<br> #B5D0E0</span></li>
<li style="background: var(--powder-pink)"><span> powder pink<br> #FBD1D1</span></li>
<li style="background: var(--primrose)"><span> primrose<br> #E1F7B0</span></li>
<li style="background: var(--punch)"><span> punch<br> #FF5563</span></li>
<li style="background: var(--purple)"><span> purple<br> #A95AF3</span></li>
<li style="background: var(--purple-slate)"><span> purple slate<br> #545375</span></li>
<li style="background: var(--rainforest)"><span> rainforest<br> #25422E</span></li>
<li style="background: var(--raspberry-jam)"><span> raspberry jam<br> #3C0D2B</span></li>
<li style="background: var(--robins-egg)"><span> robins egg<br> #B8DEE0</span></li>
<li style="background: var(--rouge)"><span> rouge<br> #CC3737</span></li>
<li style="background: var(--royal)"><span> royal<br> #4169E1</span></li>
<li style="background: var(--ruby)"><span> ruby<br> #D1314B</span></li>
<li style="background: var(--sage)"><span> sage<br> #87A376</span></li>
<li style="background: var(--sakura)"><span> sakura<br> #FFE4E4</span></li>
<li style="background: var(--salmon)"><span> salmon<br> #FF7863</span></li>
<li style="background: var(--sand)"><span> sand<br> #E1BE7C</span></li>
<li style="background: var(--squash)"><span> squash<br> #E96310</span></li>
<li style="background: var(--sea-glass)"><span> sea glass<br> #7FD1AE</span></li>
<li style="background: var(--sea-foam)"><span> sea foam<br> #5D998B</span></li>
<li style="background: var(--sea-fog)"><span> sea fog<br> #758C92</span></li>
<li style="background: var(--slate)"><span> slate<br> #7184A5</span></li>
<li style="background: var(--spearmint)"><span> spearmint<br> #94E0CF</span></li>
<li style="background: var(--spice)"><span> spice<br> #B54E16</span></li>
<li style="background: var(--spring)"><span> spring<br> #5ACB65</span></li>
<li style="background: var(--strawberry-yogurt)"><span> strawberry yogurt<br> #E4BCAD</span></li>
<li style="background: var(--sun)"><span> sun<br> #FEC305</span></li>
<li style="background: var(--teal)"><span> teal<br> #29879C</span></li>
<li style="background: var(--terracotta)"><span> terracotta<br> #B76A61</span></li>
<li style="background: var(--twilight)"><span> twilight<br> #203763</span></li>
<li style="background: var(--vavavoom)"><span> vavavoom<br> #BF0D0D</span></li>
<li style="background: var(--walnut)"><span> walnut<br> #381F19</span></li>
<li style="background: var(--white)"><span> white<br> #FFFFFF</span></li>
<li style="background: var(--yellow)"><span> yellow<br> #FFE03D</span></li>
</ul>
:root {
/* light, use dark text */
--ambrosia: #FCDBBA;
--banana: #FEE694;
--blue-tack: #82BFE0;
--bud: #94C15C;
--butter: #F2C94C;
--camo: #AAA843;
--cappuccino: #C9B092;
--champagne: #FCEBD5;
--dusty-pink: #E4ADAD;
--forget-me-not: #91A7FA;
--ice: #E1EFF8;
--strawberry-yogurt: #E4BCAD;
--sun: #FEC305;
--grassy: #A8D363;
--lemon: #EAFC7E;
--lime: #73D645;
--limestone: #C9C5B5;
--melon: #F2994A;
--mink: #E8C9A1;
--spearmint: #94E0CF;
--mint: #C4EA70;
--mushroom: #EDE8D5;
--mustard: #CC9E08;
--pale-lemon: #F4FFDC;
--peach: #FFB190;
--petal: #F4E9F3;
--pebble: #B8B4BE;
--pink: #FFC9D8;
--posy: #DED7EC;
--powder-blue: #B5D0E0;
--powder-pink: #FBD1D1;
--primrose: #E1F7B0;
--robins-egg: #B8DEE0;
--sakura: #FFE4E4;
--salmon: #FF7863;
--sand: #E1BE7C;
--sea-glass: #7FD1AE;
--yellow: #FFE03D;
/* medium, difficult the accessibility guys will hate use, maybe we can use text with shadow */
--apricot: #FF8652;
--blue-gray: #91A2C2;
--blush: #D67B71;
--bronze: #C27940;
--emerald: #55B95F;
--lilac: #8E8ADE;
--hazelnut: #D08E5A;
--sage: #87A376;
/* dark use light text */
--rouge: #CC3737;
--punch: #FF5563;
--aubergine: #6A2352;
--auburn: #A12F2F;
--beetroot: #7F0421;
--berry: #461234;
--carmine: #9A133E;
--charcoal: #4F4450;
--chestnut: #81291F;
--chocolate: #8F5D38;
--clay: #7D6050;
--burnt-orange: #FF5F00;
--cerise: #FF0F63;
--coffee: #624739;
--conker: #6F3131;
--coral: #EB4444;
--dusty-purple: #7D6391;
--eucalyptus: #688461;
--fern: #4F8D08;
--forest: #2E644A;
--hot-pink: #FF3263;
--ink: #292C31;
--iron: #6B5C6C;
--lapis: #2B4D8D;
--leafy: #318553;
--magenta: #BC2767;
--meadow: #7A9A3E;
--midnight: #1B3955;
--moss: #83A944;
--navy: #363A57;
--ocean: #206777;
--orange: #FD8A04;
--orchid: #7945BF;
--pond-bottom: #264A46;
--purple: #A95AF3;
--purple-slate: #545375;
--rainforest: #25422E;
--raspberry-jam: #3C0D2B;
--royal: #4169E1;
--ruby: #D1314B;
--squash: #E96310;
--sea-foam: #5D998B;
--sea-fog: #758C92;
--slate: #7184A5;
--spice: #B54E16;
--spring: #5ACB65;
--teal: #29879C;
--terracotta: #B76A61;
--twilight: #203763;
--vavavoom: #BF0D0D;
--walnut: #381F19;
}
/* Palette only styles */
body {
background: #ddd;
}
.swatches {
list-style: none;
font: 0.9em calibri, san-serif;
color: #333;
}
.swatches li {
border-radius: 2em;
display: inline-block;
height: 6rem;
position: relative;
width: 6rem;
margin: 2rem 1rem;
text-align: center;
vertical-align: middle;
}
.swatches li span {
position: relative;
top: 6.2rem;
display: inline-block;
height: 2rem;
}
