Generated by SassMeister.com.

SassMeister-input-HTML.haml

-#
.monochrome
 %h1 Monochrome
 .chip
 .chip
 .chip
 .chip
 .chip
.analogous
 %h1 Analogous
 .chip
 .chip
 .chip
 .chip
 .chip
.complimentary
 %h1 Complimentary
 .chip
 .chip
 .chip
 .chip
 .chip

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

//VARS
$color-base: #696;
$color-background: lighten($color-base, 40);
$color-dark: darken($color-base, 20);
$color-accent: saturate($color-base, 20);
$color-highlight: lighten(saturate($color-base, 40), 20);
$color-analogous-base: #966;
$color-analogous-background: lighten($color-analogous-base, 40);
$color-analogous-dark: darken($color-analogous-base, 20);
$color-analogous-accent: saturate(adjust-color($color-analogous-base, $hue:60), 20);
$color-analogous-highlight: lighten(saturate(adjust-color($color-analogous-base, $hue:30), 40),20);
$color-complimentary-base: #fb564b;
$color-complimentary-background: lighten($color-complimentary-base, 15);
$color-complimentary-dark: darken($color-complimentary-base, 15);
$color-complimentary-accent: saturate(adjust-color($color-complimentary-base, $hue:180), 15);
$color-complimentary-highlight: lighten(saturate(adjust-color($color-complimentary-base, $hue:180), 15),20);



//STYLES
 .chip {
  width: 4rem;
  height: 4rem;
  border: 1px solid #000;
  display: inline-block;
  background: $color-base;
  &:nth-of-type(2) {
    background: $color-background;
  }
  &:nth-of-type(3) {
    background: $color-dark;
  }
  &:nth-of-type(4) {
    background: $color-accent;
  }
  &:nth-of-type(5) {
    background: $color-highlight;
  }
 }
.analogous {
  .chip {
    background: $color-analogous-base;
    &:nth-of-type(2) {
      background: $color-analogous-background;
    }
    &:nth-of-type(3) {
      background: $color-analogous-dark;
   }
    &:nth-of-type(4) {
      background: $color-analogous-accent;
    }
    &:nth-of-type(5) {
      background: $color-analogous-highlight;
    }
  }
}
.complimentary {
  .chip {
    background: $color-complimentary-base;
    &:nth-of-type(2) {
      background: $color-complimentary-background;
    }
    &:nth-of-type(3) {
      background: $color-complimentary-dark;
   }
    &:nth-of-type(4) {
      background: $color-complimentary-accent;
    }
    &:nth-of-type(5) {
      background: $color-complimentary-highlight;
    }
  }
}

SassMeister-output.css

.chip {
  width: 4rem;
  height: 4rem;
  border: 1px solid #000;
  display: inline-block;
  background: #696;
}

.chip:nth-of-type(2) {
  background: #e0ebe0;
}

.chip:nth-of-type(3) {
  background: #3d5c3d;
}

.chip:nth-of-type(4) {
  background: #4db34d;
}

.chip:nth-of-type(5) {
  background: #85e085;
}

.analogous .chip {
  background: #966;
}

.analogous .chip:nth-of-type(2) {
  background: #ebe0e0;
}

.analogous .chip:nth-of-type(3) {
  background: #5c3d3d;
}

.analogous .chip:nth-of-type(4) {
  background: #b2b34d;
}

.analogous .chip:nth-of-type(5) {
  background: #e0b385;
}

.complimentary .chip {
  background: #fb564b;
}

.complimentary .chip:nth-of-type(2) {
  background: #fd9c96;
}

.complimentary .chip:nth-of-type(3) {
  background: #f41405;
}

.complimentary .chip:nth-of-type(4) {
  background: #47f3ff;
}

.complimentary .chip:nth-of-type(5) {
  background: #adfaff;
}

SassMeister-rendered.html

<div class='monochrome'>
  <h1>Monochrome</h1>
  <div class='chip'></div>
  <div class='chip'></div>
  <div class='chip'></div>
  <div class='chip'></div>
  <div class='chip'></div>
</div>
<div class='analogous'>
  <h1>Analogous</h1>
  <div class='chip'></div>
  <div class='chip'></div>
  <div class='chip'></div>
  <div class='chip'></div>
  <div class='chip'></div>
</div>
<div class='complimentary'>
  <h1>Complimentary</h1>
  <div class='chip'></div>
  <div class='chip'></div>
  <div class='chip'></div>
  <div class='chip'></div>
  <div class='chip'></div>
</div>