colors.html

<!doctype html>
<!--[if IE 8]>
<html class="no-js lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js html" lang="en">
<!--<![endif]-->
<head>
  <meta charset="UTF-8">
  <title>Colors</title>
  <link rel="stylesheet" href="/assets/stylesheets/main.css">
</head>
<body>
    <div class="colortest">
     <div class="cell">
      <h2>$color-0</h2>
      <ul>
        <li><input type="text" value="$color-0" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>LIGHT</h2>
      <ul>
        <li><input type="text" value="color($color-0, l1)" /></li>
        <li><input type="text" value="color($color-0, l2)" /></li>
        <li><input type="text" value="color($color-0, l3)" /></li>
        <li><input type="text" value="color($color-0, l4)" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>DARK</h2>
      <ul>

        <li><input type="text" value="color($color-0, d1)" /></li>
        <li><input type="text" value="color($color-0, d2)" /></li>
        <li><input type="text" value="color($color-0, d3)" /></li>
        <li><input type="text" value="color($color-0, d4)" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>COMPLEMENTARY</h2>
      <ul>
        <li><input type="text" value="complementary($color-0, 1)" /></li>
        <li><input type="text" value="complementary($color-0, 2)" /></li>
        <li><input type="text" value="complementary($color-0, 3)" /></li>
        <li><input type="text" value="complementary($color-0, 4)" /></li>
      </ul>

    </div>
    <div class="cell">
      <h2>TRIAD</h2>
      <ul>

       <li><input type="text" value="triad($color-0, 1)" /></li>
       <li><input type="text" value="triad($color-0, 2)" /></li>
     </ul>
   </div>
   <div class="cell">
    <h2>ANALOGOUS</h2>
    <ul>

      <li><input type="text" value="analogous($color-0, 1)" /></li>
      <li><input type="text" value="analogous($color-0, 2)" /></li>
    </ul>
  </div>
  <div class="cell">
   <h2>SPLIT</h2>
   <ul>

     <li><input type="text" value="split($color-0, 1)" /></li>
     <li><input type="text" value="split($color-0, 2)" /></li>
   </ul>
 </div>
</div>

<div class="colortest">
     <div class="cell">
      <h2>$color-1</h2>
      <ul>
        <li><input type="text" value="$color-1" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>LIGHT</h2>
      <ul>
        <li><input type="text" value="color($color-1, l1)" /></li>
        <li><input type="text" value="color($color-1, l2)" /></li>
        <li><input type="text" value="color($color-1, l3)" /></li>
        <li><input type="text" value="color($color-1, l4)" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>DARK</h2>
      <ul>

        <li><input type="text" value="color($color-1, d1)" /></li>
        <li><input type="text" value="color($color-1, d2)" /></li>
        <li><input type="text" value="color($color-1, d3)" /></li>
        <li><input type="text" value="color($color-1, d4)" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>COMPLEMENTARY</h2>
      <ul>
        <li><input type="text" value="complementary($color-1, 1)" /></li>
        <li><input type="text" value="complementary($color-1, 2)" /></li>
        <li><input type="text" value="complementary($color-1, 3)" /></li>
        <li><input type="text" value="complementary($color-1, 4)" /></li>
      </ul>

    </div>
    <div class="cell">
      <h2>TRIAD</h2>
      <ul>

       <li><input type="text" value="triad($color-1, 1)" /></li>
       <li><input type="text" value="triad($color-1, 2)" /></li>
     </ul>
   </div>
   <div class="cell">
    <h2>ANALOGOUS</h2>
    <ul>

      <li><input type="text" value="analogous($color-1, 1)" /></li>
      <li><input type="text" value="analogous($color-1, 2)" /></li>
    </ul>
  </div>
  <div class="cell">
   <h2>SPLIT</h2>
   <ul>

     <li><input type="text" value="split($color-1, 1)" /></li>
     <li><input type="text" value="split($color-1, 2)" /></li>
   </ul>
 </div>
</div>

<div class="colortest">
     <div class="cell">
      <h2>$color-2</h2>
      <ul>
        <li><input type="text" value="$color-2" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>LIGHT</h2>
      <ul>
        <li><input type="text" value="color($color-2, l1)" /></li>
        <li><input type="text" value="color($color-2, l2)" /></li>
        <li><input type="text" value="color($color-2, l3)" /></li>
        <li><input type="text" value="color($color-2, l4)" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>DARK</h2>
      <ul>

        <li><input type="text" value="color($color-2, d1)" /></li>
        <li><input type="text" value="color($color-2, d2)" /></li>
        <li><input type="text" value="color($color-2, d3)" /></li>
        <li><input type="text" value="color($color-2, d4)" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>COMPLEMENTARY</h2>
      <ul>
        <li><input type="text" value="complementary($color-2, 1)" /></li>
        <li><input type="text" value="complementary($color-2, 2)" /></li>
        <li><input type="text" value="complementary($color-2, 3)" /></li>
        <li><input type="text" value="complementary($color-2, 4)" /></li>
      </ul>

    </div>
    <div class="cell">
      <h2>TRIAD</h2>
      <ul>

       <li><input type="text" value="triad($color-2, 1)" /></li>
       <li><input type="text" value="triad($color-2, 2)" /></li>
     </ul>
   </div>
   <div class="cell">
    <h2>ANALOGOUS</h2>
    <ul>

      <li><input type="text" value="analogous($color-2, 1)" /></li>
      <li><input type="text" value="analogous($color-2, 2)" /></li>
    </ul>
  </div>
  <div class="cell">
   <h2>SPLIT</h2>
   <ul>

     <li><input type="text" value="split($color-2, 1)" /></li>
     <li><input type="text" value="split($color-2, 2)" /></li>
   </ul>
 </div>
</div>

<div class="colortest">
     <div class="cell">
      <h2>$color-3</h2>
      <ul>
        <li><input type="text" value="$color-3" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>LIGHT</h2>
      <ul>
        <li><input type="text" value="color($color-3, l1)" /></li>
        <li><input type="text" value="color($color-3, l2)" /></li>
        <li><input type="text" value="color($color-3, l3)" /></li>
        <li><input type="text" value="color($color-3, l4)" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>DARK</h2>
      <ul>

        <li><input type="text" value="color($color-3, d1)" /></li>
        <li><input type="text" value="color($color-3, d2)" /></li>
        <li><input type="text" value="color($color-3, d3)" /></li>
        <li><input type="text" value="color($color-3, d4)" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>COMPLEMENTARY</h2>
      <ul>
        <li><input type="text" value="complementary($color-3, 1)" /></li>
        <li><input type="text" value="complementary($color-3, 2)" /></li>
        <li><input type="text" value="complementary($color-3, 3)" /></li>
        <li><input type="text" value="complementary($color-3, 4)" /></li>
      </ul>

    </div>
    <div class="cell">
      <h2>TRIAD</h2>
      <ul>

       <li><input type="text" value="triad($color-3, 1)" /></li>
       <li><input type="text" value="triad($color-3, 2)" /></li>
     </ul>
   </div>
   <div class="cell">
    <h2>ANALOGOUS</h2>
    <ul>

      <li><input type="text" value="analogous($color-3, 1)" /></li>
      <li><input type="text" value="analogous($color-3, 2)" /></li>
    </ul>
  </div>
  <div class="cell">
   <h2>SPLIT</h2>
   <ul>

     <li><input type="text" value="split($color-3, 1)" /></li>
     <li><input type="text" value="split($color-3, 2)" /></li>
   </ul>
 </div>
</div>

<div class="colortest">
     <div class="cell">
      <h2>$color-4</h2>
      <ul>
        <li><input type="text" value="$color-4" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>LIGHT</h2>
      <ul>
        <li><input type="text" value="color($color-4, l1)" /></li>
        <li><input type="text" value="color($color-4, l2)" /></li>
        <li><input type="text" value="color($color-4, l3)" /></li>
        <li><input type="text" value="color($color-4, l4)" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>DARK</h2>
      <ul>

        <li><input type="text" value="color($color-4, d1)" /></li>
        <li><input type="text" value="color($color-4, d2)" /></li>
        <li><input type="text" value="color($color-4, d3)" /></li>
        <li><input type="text" value="color($color-4, d4)" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>COMPLEMENTARY</h2>
      <ul>
        <li><input type="text" value="complementary($color-4, 1)" /></li>
        <li><input type="text" value="complementary($color-4, 2)" /></li>
        <li><input type="text" value="complementary($color-4, 3)" /></li>
        <li><input type="text" value="complementary($color-4, 4)" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>TRIAD</h2>
      <ul>
       <li><input type="text" value="triad($color-4, 1)" /></li>
       <li><input type="text" value="triad($color-4, 2)" /></li>
     </ul>
   </div>
   <div class="cell">
    <h2>ANALOGOUS</h2>
    <ul>
      <li><input type="text" value="analogous($color-4, 1)" /></li>
      <li><input type="text" value="analogous($color-4, 2)" /></li>
    </ul>
  </div>
  <div class="cell">
   <h2>SPLIT</h2>
   <ul>
     <li><input type="text" value="split($color-4, 1)" /></li>
     <li><input type="text" value="split($color-4, 2)" /></li>
   </ul>
 </div>
</div>
<div class="colortest">
     <div class="cell">
      <h2>$color-5</h2>
      <ul>
        <li><input type="text" value="$color-5" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>LIGHT</h2>
      <ul>
        <li><input type="text" value="color($color-5, l1)" /></li>
        <li><input type="text" value="color($color-5, l2)" /></li>
        <li><input type="text" value="color($color-5, l3)" /></li>
        <li><input type="text" value="color($color-5, l4)" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>DARK</h2>
      <ul>
        <li><input type="text" value="color($color-5, d1)" /></li>
        <li><input type="text" value="color($color-5, d2)" /></li>
        <li><input type="text" value="color($color-5, d3)" /></li>
        <li><input type="text" value="color($color-5, d4)" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>COMPLEMENTARY</h2>
      <ul>
        <li><input type="text" value="complementary($color-5, 1)" /></li>
        <li><input type="text" value="complementary($color-5, 2)" /></li>
        <li><input type="text" value="complementary($color-5, 3)" /></li>
        <li><input type="text" value="complementary($color-5, 4)" /></li>
      </ul>
    </div>
    <div class="cell">
      <h2>TRIAD</h2>
      <ul>
       <li><input type="text" value="triad($color-5, 1)" /></li>
       <li><input type="text" value="triad($color-5, 2)" /></li>
     </ul>
   </div>
   <div class="cell">
    <h2>ANALOGOUS</h2>
    <ul>
      <li><input type="text" value="analogous($color-5, 1)" /></li>
      <li><input type="text" value="analogous($color-5, 2)" /></li>
    </ul>
  </div>
  <div class="cell">
   <h2>SPLIT</h2>
   <ul>
     <li><input type="text" value="split($color-5, 1)" /></li>
     <li><input type="text" value="split($color-5, 2)" /></li>
   </ul>
 </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/javascript/detectizr.js"></script>
</body>
</html>