<main>
  <div class="wrapper">
    <article class="flow">
      <h1>All CSS named colors</h1>
      <ul class="auto-grid" role="list">
        <li class="swatch">
          <div class="swatch__sample" style="background: aliceblue" aria-hidden="true"></div>
          <code>aliceblue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: antiquewhite" aria-hidden="true"></div>
          <code>antiquewhite</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: aqua" aria-hidden="true"></div>
          <code>aqua</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: aquamarine" aria-hidden="true"></div>
          <code>aquamarine</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: azure" aria-hidden="true"></div>
          <code>azure</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: beige" aria-hidden="true"></div>
          <code>beige</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: bisque" aria-hidden="true"></div>
          <code>bisque</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: black" aria-hidden="true"></div>
          <code>black</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: blanchedalmond" aria-hidden="true"></div>
          <code>blanchedalmond</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: blue" aria-hidden="true"></div>
          <code>blue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: blueviolet" aria-hidden="true"></div>
          <code>blueviolet</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: brown" aria-hidden="true"></div>
          <code>brown</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: burlywood" aria-hidden="true"></div>
          <code>burlywood</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: cadetblue" aria-hidden="true"></div>
          <code>cadetblue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: chartreuse" aria-hidden="true"></div>
          <code>chartreuse</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: chocolate" aria-hidden="true"></div>
          <code>chocolate</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: coral" aria-hidden="true"></div>
          <code>coral</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: cornflowerblue" aria-hidden="true"></div>
          <code>cornflowerblue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: cornsilk" aria-hidden="true"></div>
          <code>cornsilk</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: crimson" aria-hidden="true"></div>
          <code>crimson</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: cyan" aria-hidden="true"></div>
          <code>cyan</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darkblue" aria-hidden="true"></div>
          <code>darkblue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darkcyan" aria-hidden="true"></div>
          <code>darkcyan</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darkgoldenrod" aria-hidden="true"></div>
          <code>darkgoldenrod</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darkgray" aria-hidden="true"></div>
          <code>darkgray</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darkgreen" aria-hidden="true"></div>
          <code>darkgreen</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darkgrey" aria-hidden="true"></div>
          <code>darkgrey</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darkkhaki" aria-hidden="true"></div>
          <code>darkkhaki</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darkmagenta" aria-hidden="true"></div>
          <code>darkmagenta</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darkolivegreen" aria-hidden="true"></div>
          <code>darkolivegreen</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darkorange" aria-hidden="true"></div>
          <code>darkorange</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darkorchid" aria-hidden="true"></div>
          <code>darkorchid</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darkred" aria-hidden="true"></div>
          <code>darkred</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darksalmon" aria-hidden="true"></div>
          <code>darksalmon</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darkseagreen" aria-hidden="true"></div>
          <code>darkseagreen</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darkslateblue" aria-hidden="true"></div>
          <code>darkslateblue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darkslategray" aria-hidden="true"></div>
          <code>darkslategray</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darkslategrey" aria-hidden="true"></div>
          <code>darkslategrey</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darkturquoise" aria-hidden="true"></div>
          <code>darkturquoise</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: darkviolet" aria-hidden="true"></div>
          <code>darkviolet</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: deeppink" aria-hidden="true"></div>
          <code>deeppink</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: deepskyblue" aria-hidden="true"></div>
          <code>deepskyblue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: dimgray" aria-hidden="true"></div>
          <code>dimgray</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: dimgrey" aria-hidden="true"></div>
          <code>dimgrey</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: dodgerblue" aria-hidden="true"></div>
          <code>dodgerblue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: firebrick" aria-hidden="true"></div>
          <code>firebrick</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: floralwhite" aria-hidden="true"></div>
          <code>floralwhite</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: forestgreen" aria-hidden="true"></div>
          <code>forestgreen</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: fuchsia" aria-hidden="true"></div>
          <code>fuchsia</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: gainsboro" aria-hidden="true"></div>
          <code>gainsboro</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: ghostwhite" aria-hidden="true"></div>
          <code>ghostwhite</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: goldenrod" aria-hidden="true"></div>
          <code>goldenrod</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: gold" aria-hidden="true"></div>
          <code>gold</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: gray" aria-hidden="true"></div>
          <code>gray</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: green" aria-hidden="true"></div>
          <code>green</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: greenyellow" aria-hidden="true"></div>
          <code>greenyellow</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: grey" aria-hidden="true"></div>
          <code>grey</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: honeydew" aria-hidden="true"></div>
          <code>honeydew</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: hotpink" aria-hidden="true"></div>
          <code>hotpink</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: indianred" aria-hidden="true"></div>
          <code>indianred</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: indigo" aria-hidden="true"></div>
          <code>indigo</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: ivory" aria-hidden="true"></div>
          <code>ivory</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: khaki" aria-hidden="true"></div>
          <code>khaki</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lavenderblush" aria-hidden="true"></div>
          <code>lavenderblush</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lavender" aria-hidden="true"></div>
          <code>lavender</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lawngreen" aria-hidden="true"></div>
          <code>lawngreen</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lemonchiffon" aria-hidden="true"></div>
          <code>lemonchiffon</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lightblue" aria-hidden="true"></div>
          <code>lightblue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lightcoral" aria-hidden="true"></div>
          <code>lightcoral</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lightcyan" aria-hidden="true"></div>
          <code>lightcyan</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lightgoldenrodyellow" aria-hidden="true"></div>
          <code>lightgoldenrodyellow</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lightgray" aria-hidden="true"></div>
          <code>lightgray</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lightgreen" aria-hidden="true"></div>
          <code>lightgreen</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lightgrey" aria-hidden="true"></div>
          <code>lightgrey</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lightpink" aria-hidden="true"></div>
          <code>lightpink</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lightsalmon" aria-hidden="true"></div>
          <code>lightsalmon</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lightseagreen" aria-hidden="true"></div>
          <code>lightseagreen</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lightskyblue" aria-hidden="true"></div>
          <code>lightskyblue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lightslategray" aria-hidden="true"></div>
          <code>lightslategray</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lightslategrey" aria-hidden="true"></div>
          <code>lightslategrey</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lightsteelblue" aria-hidden="true"></div>
          <code>lightsteelblue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lightyellow" aria-hidden="true"></div>
          <code>lightyellow</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: lime" aria-hidden="true"></div>
          <code>lime</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: limegreen" aria-hidden="true"></div>
          <code>limegreen</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: linen" aria-hidden="true"></div>
          <code>linen</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: magenta" aria-hidden="true"></div>
          <code>magenta</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: maroon" aria-hidden="true"></div>
          <code>maroon</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: mediumaquamarine" aria-hidden="true"></div>
          <code>mediumaquamarine</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: mediumblue" aria-hidden="true"></div>
          <code>mediumblue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: mediumorchid" aria-hidden="true"></div>
          <code>mediumorchid</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: mediumpurple" aria-hidden="true"></div>
          <code>mediumpurple</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: mediumseagreen" aria-hidden="true"></div>
          <code>mediumseagreen</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: mediumslateblue" aria-hidden="true"></div>
          <code>mediumslateblue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: mediumspringgreen" aria-hidden="true"></div>
          <code>mediumspringgreen</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: mediumturquoise" aria-hidden="true"></div>
          <code>mediumturquoise</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: mediumvioletred" aria-hidden="true"></div>
          <code>mediumvioletred</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: midnightblue" aria-hidden="true"></div>
          <code>midnightblue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: mintcream" aria-hidden="true"></div>
          <code>mintcream</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: mistyrose" aria-hidden="true"></div>
          <code>mistyrose</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: moccasin" aria-hidden="true"></div>
          <code>moccasin</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: navajowhite" aria-hidden="true"></div>
          <code>navajowhite</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: navy" aria-hidden="true"></div>
          <code>navy</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: oldlace" aria-hidden="true"></div>
          <code>oldlace</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: olive" aria-hidden="true"></div>
          <code>olive</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: olivedrab" aria-hidden="true"></div>
          <code>olivedrab</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: orange" aria-hidden="true"></div>
          <code>orange</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: orangered" aria-hidden="true"></div>
          <code>orangered</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: orchid" aria-hidden="true"></div>
          <code>orchid</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: palegoldenrod" aria-hidden="true"></div>
          <code>palegoldenrod</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: palegreen" aria-hidden="true"></div>
          <code>palegreen</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: paleturquoise" aria-hidden="true"></div>
          <code>paleturquoise</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: palevioletred" aria-hidden="true"></div>
          <code>palevioletred</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: papayawhip" aria-hidden="true"></div>
          <code>papayawhip</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: peachpuff" aria-hidden="true"></div>
          <code>peachpuff</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: peru" aria-hidden="true"></div>
          <code>peru</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: pink" aria-hidden="true"></div>
          <code>pink</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: plum" aria-hidden="true"></div>
          <code>plum</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: powderblue" aria-hidden="true"></div>
          <code>powderblue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: purple" aria-hidden="true"></div>
          <code>purple</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: rebeccapurple" aria-hidden="true"></div>
          <code>rebeccapurple</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: red" aria-hidden="true"></div>
          <code>red</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: rosybrown" aria-hidden="true"></div>
          <code>rosybrown</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: royalblue" aria-hidden="true"></div>
          <code>royalblue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: saddlebrown" aria-hidden="true"></div>
          <code>saddlebrown</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: salmon" aria-hidden="true"></div>
          <code>salmon</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: sandybrown" aria-hidden="true"></div>
          <code>sandybrown</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: seagreen" aria-hidden="true"></div>
          <code>seagreen</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: seashell" aria-hidden="true"></div>
          <code>seashell</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: sienna" aria-hidden="true"></div>
          <code>sienna</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: silver" aria-hidden="true"></div>
          <code>silver</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: skyblue" aria-hidden="true"></div>
          <code>skyblue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: slateblue" aria-hidden="true"></div>
          <code>slateblue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: slategray" aria-hidden="true"></div>
          <code>slategray</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: slategrey" aria-hidden="true"></div>
          <code>slategrey</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: snow" aria-hidden="true"></div>
          <code>snow</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: springgreen" aria-hidden="true"></div>
          <code>springgreen</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: steelblue" aria-hidden="true"></div>
          <code>steelblue</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: tan" aria-hidden="true"></div>
          <code>tan</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: teal" aria-hidden="true"></div>
          <code>teal</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: thistle" aria-hidden="true"></div>
          <code>thistle</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: tomato" aria-hidden="true"></div>
          <code>tomato</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: turquoise" aria-hidden="true"></div>
          <code>turquoise</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: violet" aria-hidden="true"></div>
          <code>violet</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: wheat" aria-hidden="true"></div>
          <code>wheat</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: white" aria-hidden="true"></div>
          <code>white</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: whitesmoke" aria-hidden="true"></div>
          <code>whitesmoke</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: yellow" aria-hidden="true"></div>
          <code>yellow</code>
        </li>

        <li class="swatch">
          <div class="swatch__sample" style="background: yellowgreen" aria-hidden="true"></div>
          <code>yellowgreen</code>
        </li>
      </ul>
    </article>
  </div>
</main>