rem
/
c1rs


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- require-sri-for style -->
    <meta http-equiv="Content-Security-Policy"
      content="require-sri-for style
                      default-src 'none';
                      connect-src 'none';
                      frame-src 'none';
                      img-src 'none';
                      script-src 'none';
                      style-src 'self'">
    <title>C1rs</title>
    <!-- <link integrity="sha512-" -->
    <link integrity="sha512-ffjJQFzDiwJrvZWSb30g2sQcZwNyaq1RTnmhGIJCAK96JKx7MYV1T28zq7GoPgm0nHTokCRG6iFNDB4kHrMnBA=="
      href="./styles/clrs-demo.css"
      rel="stylesheet">
  </head>
  <body>
    <main>

      <table>
        <thead>
          <h1>clrs cool</h1>
        </thead>
        <tbody>
          <tr>
            <td class="clrs-cool bg-navy"></td>
            <td class="clrs-cool navy">Ah</td>
            <td>navy</td>
          </tr>
          <tr>
            <td class="clrs-cool bg-blue"></td>
            <td class="clrs-cool blue">Ah</td>
            <td>blue</td>
          </tr>
          <tr>
            <td class="clrs-cool bg-aqua"></td>
            <td class="clrs-cool aqua">Ah</td>
            <td>aqua</td>
          </tr>
          <tr>
            <td class="clrs-cool bg-teal"></td>
            <td class="clrs-cool teal">Ah</td>
            <td>teal</td>
          </tr>
          <tr>
            <td class="clrs-cool bg-olive"></td>
            <td class="clrs-cool olive">Ah</td>
            <td>olive</td>
          </tr>
          <tr>
            <td class="clrs-cool bg-green"></td>
            <td class="clrs-cool green">Ah</td>
            <td>green</td>
          </tr>
          <tr>
            <td class="clrs-cool bg-lime"></td>
            <td class="clrs-cool lime">Ah</td>
            <td>lime</td>
          </tr>
        </tbody>
      </table>

      <table>
        <thead>
          <h1>clrs warm</h1>
        </thead>
        <tbody>
          <tr>
            <td class="clrs-warm bg-yellow"></td>
            <td class="clrs-warm yellow">Ah</td>
            <td>yellow</td>
          </tr>
          <tr>
            <td class="clrs-warm bg-orange"></td>
            <td class="clrs-warm orange">Ah</td>
            <td>orange</td>
          </tr>
          <tr>
            <td class="clrs-warm bg-red"></td>
            <td class="clrs-warm red">Ah</td>
            <td>red</td>
          </tr>
          <tr>
            <td class="clrs-warm bg-fuchsia"></td>
            <td class="clrs-warm fuchsia">Ah</td>
            <td>fuschia</td>
          </tr>
          <tr>
            <td class="clrs-warm bg-purple"></td>
            <td class="clrs-warm purple">Ah</td>
            <td>purple</td>
          </tr>
          <tr>
            <td class="clrs-warm bg-maroon"></td>
            <td class="clrs-warm maroon">Ah</td>
            <td>marron</td>
          </tr>
        </tbody>
      </table>

      <table>
        <thead>
          <h1>clrs grayscale</h1>
        </thead>
        <tbody>
          <tr>
            <td class="clrs-grayscale bg-black"></td>
            <td class="clrs-grayscale black">Ah</td>
            <td>black</td>
          </tr>
          <tr>
            <td class="clrs-grayscale bg-gray"></td>
            <td class="clrs-grayscale gray">Ah</td>
            <td>gray</td>
          </tr>
          <tr>
            <td class="clrs-grayscale bg-silver"></td>
            <td class="clrs-grayscale silver">Ah</td>
            <td>silver</td>
          </tr>
          <tr>
            <td class="clrs-grayscale bg-white"></td>
            <td class="clrs-grayscale white">Ah</td>
            <td>white</td>
          </tr>
        </tbody>
      </table>


      <table>
        <thead>
          <h1>
            clrs palette
          </h1>
        </thead>
        <tbody>
          <tr>
            <td class="clrs-palette bg-dark-red"></td>
            <td class="clrs-palette dark-red">Ah</td>
            <td>dark-red</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-red"></td>
            <td class="clrs-palette red">Ah</td>
            <td>red</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-light-red"></td>
            <td class="clrs-palette light-red">Ah</td>
            <td>light-red</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-orange"></td>
            <td class="clrs-palette orange">Ah</td>
            <td>orange</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-gold"></td>
            <td class="clrs-palette gold">Ah</td>
            <td>gold</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-yellow"></td>
            <td class="clrs-palette yellow">Ah</td>
            <td>yellow</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-light-yellow"></td>
            <td class="clrs-palette light-yellow">Ah</td>
            <td>light-yellow</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-purple"></td>
            <td class="clrs-palette purple">Ah</td>
            <td>purple</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-light-purple"></td>
            <td class="clrs-palette light-purple">Ah</td>
            <td>light-purple</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-dark-pink"></td>
            <td class="clrs-palette dark-pink">Ah</td>
            <td>dark-pink</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-hot-pink"></td>
            <td class="clrs-palette hot-pink">Ah</td>
            <td>hot-pink</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-pink"></td>
            <td class="clrs-palette pink">Ah</td>
            <td>pink</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-light-pink"></td>
            <td class="clrs-palette light-pink">Ah</td>
            <td>light-pink</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-dark-green"></td>
            <td class="clrs-palette dark-green">Ah</td>
            <td>dark-green</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-green"></td>
            <td class="clrs-palette green">Ah</td>
            <td>green</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-light-green"></td>
            <td class="clrs-palette light-green">Ah</td>
            <td>light-green</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-navy"></td>
            <td class="clrs-palette navy">Ah</td>
            <td>navy</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-dark-blue"></td>
            <td class="clrs-palette dark-blue">Ah</td>
            <td>dark-blue</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-blue"></td>
            <td class="clrs-palette blue">Ah</td>
            <td>blue</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-light-blue"></td>
            <td class="clrs-palette light-blue">Ah</td>
            <td>light-blue</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-lightest-blue"></td>
            <td class="clrs-palette lightest-blue">Ah</td>
            <td>lightest-blue</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-washed-blue"></td>
            <td class="clrs-palette washed-blue">Ah</td>
            <td>washed-blue</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-washed-green"></td>
            <td class="clrs-palette washed-green">Ah</td>
            <td>washed-green</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-washed-yellow"></td>
            <td class="clrs-palette washed-yellow">Ah</td>
            <td>washed-yellow</td>
          </tr>
          <tr>
            <td class="clrs-palette bg-washed-red"></td>
            <td class="clrs-palette washed-red">Ah</td>
            <td>washed-red</td>
          </tr>
        </tbody>
      </table>
    </main>
  </body>
</html>