A CodePen by Christopher Webb. Sass Color Helper

index.html

<table>
  <tr>
    <td class="a1"></td>
    <td class="b1"></td>
    <td class="c1"></td>
  </tr>
  <tr>
    <td class="a2"></td>
    <td class="b2"></td>
    <td class="c2"></td>
  </tr>
  <tr>
    <td class="a3"></td>
    <td class="b3"></td>
    <td class="c3"></td>
  </tr>
  <tr>
    <td class="a4"></td>
    <td class="b4"></td>
    <td class="c4"></td>
  </tr>
  <tr>
    <td class="a5"></td>
    <td class="b5"></td>
    <td class="c5"></td>
  </tr>
  <tr>
    <td class="a6"></td>
    <td class="b6"></td>
    <td class="c6"></td>
  </tr>
  <tr>
    <td class="a7"></td>
    <td class="b7"></td>
    <td class="c7"></td>
  </tr>
  <tr>
    <td class="a8"></td>
    <td class="b8"></td>
    <td class="c8"></td>
  </tr>
  <tr>
    <td class="a9"></td>
    <td class="b9"></td>
    <td class="c9"></td>
  </tr>
  <tr>
    <td class="a10"></td>
    <td class="b10"></td>
    <td class="c10"></td>
  </tr>
  <tr>
    <td class="a11"></td>
    <td class="b11"></td>
    <td class="c11"></td>
  </tr>
  <tr>
    <td class="a12"></td>
    <td class="b12"></td>
    <td class="c12"></td>
  </tr>
  <tr>
    <td class="a13"></td>
    <td class="b13"></td>
    <td class="c13"></td>
  </tr>
  <tr>
    <td class="a14"></td>
    <td class="b14"></td>
    <td class="c14"></td>
  </tr>
  <tr>
    <td class="a15"></td>
    <td class="b15"></td>
    <td class="c15"></td>
  </tr>
  <tr>
    <td class="a16"></td>
    <td class="b16"></td>
    <td class="c16"></td>
  </tr>
  <tr>
    <td class="a17"></td>
    <td class="b17"></td>
    <td class="c17"></td>
  </tr>
  <tr>
    <td class="a18"></td>
    <td class="b18"></td>
    <td class="c18"></td>
  </tr>
  <tr>
    <td class="a19"></td>
    <td class="b19"></td>
    <td class="c19"></td>
  </tr>
  <tr>
    <td class="a20"></td>
    <td class="b20"></td>
    <td class="c20"></td>
  </tr>
</table>

style.sass

@import "compass"
$color: blue
$text-color: red


table
  width: 100%
  td
    height: 50px
    width: 33.333%
@for $i from 1 through 20
  $x: 5 * ($i - 1)
  .a#{$i}
    $z: lighten($color, $x)
    background: $z
    &:after
      color: $text-color
      content: "#{$z}"
      display: block
      text-align: center
  .b#{$i}
    $z: darken($color, $x)
    background: $z
    &:after
      color: $text-color
      content: "#{$z}"
      display: block
      text-align: center
  .c#{$i}
    $z: opacify($color, $x/100)
    background: $z
    &:after
      color: $text-color
      content: "#{$z}"
      display: block
      text-align: center