Generated by SassMeister.com.

SassMeister-input-HTML.html

<table>
  <tr>
    <td class="hulk1">70% highlight</td>
    <td class="hulk2">50% highlight</td>
    <td class="hulk3">30% highlight</td>
    <td class="hulk4">$hulk</td>
    <td class="hulk5">30% shadow</td>
    <td class="hulk6">50% shadow</td>
    <td class="hulk7">70% shadow</td>
  </tr>
  <tr>
    <td class="berry1">70% highlight</td>
    <td class="berry2">50% highlight</td>
    <td class="berry3">30% highlight</td>
    <td class="berry4">$berry</td>
    <td class="berry5">30% shadow</td>
    <td class="berry6">50% shadow</td>
    <td class="berry7">70% shadow</td>
  </tr>
  <tr>
    <td class="crunch1">70% highlight</td>
    <td class="crunch2">50% highlight</td>
    <td class="crunch3">30% highlight</td>
    <td class="crunch4">$crunch</td>
    <td class="crunch5">30% shadow</td>
    <td class="crunch6">50% shadow</td>
    <td class="crunch7">70% shadow</td>
  </tr>
</table>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

$hulk: hsl(113, 100%, 70%);
$berry: hsl(267, 100%, 35%);
$crunch: hsl(38, 100%, 50%);
$highlight: hsl(335, 100%, 78%);
$shadow: hsl(282, 35%, 26%);

.hulk1 { background-color: mix($highlight, $hulk, 70%); }
.hulk2 { background-color: mix($highlight, $hulk, 50%); }
.hulk3 { background-color: mix($highlight, $hulk, 30%); }
.hulk4 { background-color: $hulk; }
.hulk5 { background-color: mix($shadow, $hulk, 30%); }
.hulk6 { background-color: mix($shadow, $hulk, 50%); }
.hulk7 { background-color: mix($shadow, $hulk, 70%); }

.berry1 { background-color: mix($highlight, $berry, 70%); }
.berry2 { background-color: mix($highlight, $berry, 50%); }
.berry3 { background-color: mix($highlight, $berry, 30%); }
.berry4 { background-color: $berry; }
.berry5 { background-color: mix($shadow, $berry, 30%); }
.berry6 { background-color: mix($shadow, $berry, 50%); }
.berry7 { background-color: mix($shadow, $berry, 70%); }

.crunch1 { background-color: mix($highlight, $crunch, 70%); }
.crunch2 { background-color: mix($highlight, $crunch, 50%); }
.crunch3 { background-color: mix($highlight, $crunch, 30%); }
.crunch4 { background-color: $crunch; }
.crunch5 { background-color: mix($shadow, $crunch, 30%); }
.crunch6 { background-color: mix($shadow, $crunch, 50%); }
.crunch7 { background-color: mix($shadow, $crunch, 70%); }

td {
  height: 100px;
  width: 100px;
  text-align: center;
  font-weight: bold;

}

SassMeister-output.css

.hulk1 { background-color: #d6b0a3; }

.hulk2 { background-color: #bbc792; }

.hulk3 { background-color: #a0dd80; }

.hulk4 { background-color: #78ff66; }

.hulk5 { background-color: #6abf62; }

.hulk6 { background-color: #629560; }

.hulk7 { background-color: #596a5d; }

.berry1 { background-color: #ca64ba; }

.berry2 { background-color: #a747b8; }

.berry3 { background-color: #842ab6; }

.berry4 { background-color: #5000b3; }

.berry5 { background-color: #4e0c98; }

.berry6 { background-color: #4e1586; }

.berry7 { background-color: #4d1e74; }

.crunch1 { background-color: #ff9485; }

.crunch2 { background-color: #ff985f; }

.crunch3 { background-color: #ff9c39; }

.crunch4 { background-color: #ffa200; }

.crunch5 { background-color: #c97e1b; }

.crunch6 { background-color: #a5662d; }

.crunch7 { background-color: #814e3e; }

td { height: 100px; width: 100px; text-align: center; font-weight: bold; }

SassMeister-rendered.html

<table>
  <tr>
    <td class="hulk1">70% highlight</td>
    <td class="hulk2">50% highlight</td>
    <td class="hulk3">30% highlight</td>
    <td class="hulk4">$hulk</td>
    <td class="hulk5">30% shadow</td>
    <td class="hulk6">50% shadow</td>
    <td class="hulk7">70% shadow</td>
  </tr>
  <tr>
    <td class="berry1">70% highlight</td>
    <td class="berry2">50% highlight</td>
    <td class="berry3">30% highlight</td>
    <td class="berry4">$berry</td>
    <td class="berry5">30% shadow</td>
    <td class="berry6">50% shadow</td>
    <td class="berry7">70% shadow</td>
  </tr>
  <tr>
    <td class="crunch1">70% highlight</td>
    <td class="crunch2">50% highlight</td>
    <td class="crunch3">30% highlight</td>
    <td class="crunch4">$crunch</td>
    <td class="crunch5">30% shadow</td>
    <td class="crunch6">50% shadow</td>
    <td class="crunch7">70% shadow</td>
  </tr>
</table>