Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="color">
  <div class="___blue-grey_light4"></div>
  <div class="___blue-grey_light3"></div>
  <div class="___blue-grey_light2"></div>
  <div class="___blue-grey_light1"></div>
  <div class="___blue-grey"></div>
  <div class="___blue-grey_dark1"></div>
  <div class="___blue-grey_dark2"></div>
  <div class="___blue-grey_dark3"></div>
  <div class="___blue-grey_dark4"></div>
</div>

<div class="color">
  <div class="___grey_light4"></div>
  <div class="___grey_light3"></div>
  <div class="___grey_light2"></div>
  <div class="___grey_light1"></div>
  <div class="___grey"></div>
  <div class="___grey_dark1"></div>
  <div class="___grey_dark2"></div>
  <div class="___grey_dark3"></div>
  <div class="___grey_dark4"></div>
</div>

<div class="color">
  <div class="___brown_light4"></div>
  <div class="___brown_light3"></div>
  <div class="___brown_light2"></div>
  <div class="___brown_light1"></div>
  <div class="___brown"></div>
  <div class="___brown_dark1"></div>
  <div class="___brown_dark2"></div>
  <div class="___brown_dark3"></div>
  <div class="___brown_dark4"></div>
</div>

<div class="color">
  <div class="___orange_light4"></div>
  <div class="___orange_light3"></div>
  <div class="___orange_light2"></div>
  <div class="___orange_light1"></div>
  <div class="___orange"></div>
  <div class="___orange_dark1"></div>
  <div class="___orange_dark2"></div>
  <div class="___orange_dark3"></div>
  <div class="___orange_dark4"></div>
</div>

<div class="color">
  <div class="___amber_light4"></div>
  <div class="___amber_light3"></div>
  <div class="___amber_light2"></div>
  <div class="___amber_light1"></div>
  <div class="___amber"></div>
  <div class="___amber_dark1"></div>
  <div class="___amber_dark2"></div>
  <div class="___amber_dark3"></div>
  <div class="___amber_dark4"></div>
</div>

<div class="color">
  <div class="___yellow_light4"></div>
  <div class="___yellow_light3"></div>
  <div class="___yellow_light2"></div>
  <div class="___yellow_light1"></div>
  <div class="___yellow"></div>
  <div class="___yellow_dark1"></div>
  <div class="___yellow_dark2"></div>
  <div class="___yellow_dark3"></div>
  <div class="___yellow_dark4"></div>
</div>

<div class="color">
  <div class="___lime_light4"></div>
  <div class="___lime_light3"></div>
  <div class="___lime_light2"></div>
  <div class="___lime_light1"></div>
  <div class="___lime"></div>
  <div class="___lime_dark1"></div>
  <div class="___lime_dark2"></div>
  <div class="___lime_dark3"></div>
  <div class="___lime_dark4"></div>
</div>

<div class="color">
  <div class="___light-green_light4"></div>
  <div class="___light-green_light3"></div>
  <div class="___light-green_light2"></div>
  <div class="___light-green_light1"></div>
  <div class="___light-green"></div>
  <div class="___light-green_dark1"></div>
  <div class="___light-green_dark2"></div>
  <div class="___light-green_dark3"></div>
  <div class="___light-green_dark4"></div>
</div>

<div class="color">
  <div class="___teal_light4"></div>
  <div class="___teal_light3"></div>
  <div class="___teal_light2"></div>
  <div class="___teal_light1"></div>
  <div class="___teal"></div>
  <div class="___teal_dark1"></div>
  <div class="___teal_dark2"></div>
  <div class="___teal_dark3"></div>
  <div class="___teal_dark4"></div>
</div>

<div class="color">
  <div class="___cyan_light4"></div>
  <div class="___cyan_light3"></div>
  <div class="___cyan_light2"></div>
  <div class="___cyan_light1"></div>
  <div class="___cyan"></div>
  <div class="___cyan_dark1"></div>
  <div class="___cyan_dark2"></div>
  <div class="___cyan_dark3"></div>
  <div class="___cyan_dark4"></div>
</div>

<div class="color">
  <div class="___light-blue_light4"></div>
  <div class="___light-blue_light3"></div>
  <div class="___light-blue_light2"></div>
  <div class="___light-blue_light1"></div>
  <div class="___light-blue"></div>
  <div class="___light-blue_dark1"></div>
  <div class="___light-blue_dark2"></div>
  <div class="___light-blue_dark3"></div>
  <div class="___light-blue_dark4"></div>
</div>

<div class="color">
  <div class="___blue_light4"></div>
  <div class="___blue_light3"></div>
  <div class="___blue_light2"></div>
  <div class="___blue_light1"></div>
  <div class="___blue"></div>
  <div class="___blue_dark1"></div>
  <div class="___blue_dark2"></div>
  <div class="___blue_dark3"></div>
  <div class="___blue_dark4"></div>
</div>

<div class="color">
  <div class="___indigo_light4"></div>
  <div class="___indigo_light3"></div>
  <div class="___indigo_light2"></div>
  <div class="___indigo_light1"></div>
  <div class="___indigo"></div>
  <div class="___indigo_dark1"></div>
  <div class="___indigo_dark2"></div>
  <div class="___indigo_dark3"></div>
  <div class="___indigo_dark4"></div>
</div>

<div class="color">
  <div class="___deep-purple_light4"></div>
  <div class="___deep-purple_light3"></div>
  <div class="___deep-purple_light2"></div>
  <div class="___deep-purple_light1"></div>
  <div class="___deep-purple"></div>
  <div class="___deep-purple_dark1"></div>
  <div class="___deep-purple_dark2"></div>
  <div class="___deep-purple_dark3"></div>
  <div class="___deep-purple_dark4"></div>
</div>

<div class="color">
  <div class="___purple_light4"></div>
  <div class="___purple_light3"></div>
  <div class="___purple_light2"></div>
  <div class="___purple_light1"></div>
  <div class="___purple"></div>
  <div class="___purple_dark1"></div>
  <div class="___purple_dark2"></div>
  <div class="___purple_dark3"></div>
  <div class="___purple_dark4"></div>
</div>

<div class="color">
  <div class="___pink_light4"></div>
  <div class="___pink_light3"></div>
  <div class="___pink_light2"></div>
  <div class="___pink_light1"></div>
  <div class="___pink"></div>
  <div class="___pink_dark1"></div>
  <div class="___pink_dark2"></div>
  <div class="___pink_dark3"></div>
  <div class="___pink_dark4"></div>
</div>

<div class="color">
  <div class="___red_light4"></div>
  <div class="___red_light3"></div>
  <div class="___red_light2"></div>
  <div class="___red_light1"></div>
  <div class="___red"></div>
  <div class="___red_dark1"></div>
  <div class="___red_dark2"></div>
  <div class="___red_dark3"></div>
  <div class="___red_dark4"></div>
</div>

<div class="color">
  <div class="___legend_light4"></div>
  <div class="___legend_light3"></div>
  <div class="___legend_light2"></div>
  <div class="___legend_light1"></div>
  <div class="___legend"></div>
  <div class="___legend_dark1"></div>
  <div class="___legend_dark2"></div>
  <div class="___legend_dark3"></div>
  <div class="___legend_dark4"></div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.2)
// ----

$colours: (
  blue-grey: #607d8b,
  'grey': #9e9e9e,
  brown: #795548,
  deep-orange: #ff5722,
  orange: #ff9800,
  amber: #ffc107,
  yellow: #ffeb3b,
  lime: #cddc39,
  light-green: #8bc34a,
  green: #259b24,
  teal: #009688,
  cyan: #00bcd4,
  light-blue: #03a9f4,
  blue: #5677fc,
  indigo: #3f51b5,
  deep-purple: #673ab7,
  purple: #9c27b0,
  pink: #e91e63,
  red: #F44336,
  legend: #99cc00
);
 
@mixin colour($name: #999, $shade: .6) {
  $background: map-get($colours, $name);
  $color: if( lightness($background) > 50 , #000, #fff);
    
  [class$="___#{$name}"]{
    background-color: $background;
    color: rgba($color, $shade);
  }
  
  @for $i from 1 through 4 {
    $percent: $i * 4;
    
    [class$="___#{$name}_light#{$i}"] { 
      background-color: lighten($background, $percent);
      color: rgba( lighten($color, $percent), $shade);
    }
    
    [class$="___#{$name}_dark#{$i}"]{
      background-color: darken($background, $percent);
      color: rgba( darken($color, $percent), $shade);
    }
  }
  
}
 
@each $name, $value in $colours {
  @include colour($name);
}

[class*="___"] {
  height: 20px;
}

.color {
  float: left;
  width: 50px;
}

SassMeister-output.css

[class$="___blue-grey"] {
  background-color: #607d8b;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___blue-grey_light1"] {
  background-color: #688897;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___blue-grey_dark1"] {
  background-color: #58727f;
  color: rgba(245, 245, 245, 0.6);
}

[class$="___blue-grey_light2"] {
  background-color: #74919f;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___blue-grey_dark2"] {
  background-color: #4f6773;
  color: rgba(235, 235, 235, 0.6);
}

[class$="___blue-grey_light3"] {
  background-color: #819ba8;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___blue-grey_dark3"] {
  background-color: #475c67;
  color: rgba(224, 224, 224, 0.6);
}

[class$="___blue-grey_light4"] {
  background-color: #8da4b0;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___blue-grey_dark4"] {
  background-color: #3f525b;
  color: rgba(214, 214, 214, 0.6);
}

[class$="___grey"] {
  background-color: #9e9e9e;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___grey_light1"] {
  background-color: #a8a8a8;
  color: rgba(10, 10, 10, 0.6);
}

[class$="___grey_dark1"] {
  background-color: #949494;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___grey_light2"] {
  background-color: #b2b2b2;
  color: rgba(20, 20, 20, 0.6);
}

[class$="___grey_dark2"] {
  background-color: #8a8a8a;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___grey_light3"] {
  background-color: #bdbdbd;
  color: rgba(31, 31, 31, 0.6);
}

[class$="___grey_dark3"] {
  background-color: #7f7f7f;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___grey_light4"] {
  background-color: #c7c7c7;
  color: rgba(41, 41, 41, 0.6);
}

[class$="___grey_dark4"] {
  background-color: #757575;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___brown"] {
  background-color: #795548;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___brown_light1"] {
  background-color: #865e50;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___brown_dark1"] {
  background-color: #6c4c40;
  color: rgba(245, 245, 245, 0.6);
}

[class$="___brown_light2"] {
  background-color: #936757;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___brown_dark2"] {
  background-color: #5f4339;
  color: rgba(235, 235, 235, 0.6);
}

[class$="___brown_light3"] {
  background-color: #9f705f;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___brown_dark3"] {
  background-color: #533a31;
  color: rgba(224, 224, 224, 0.6);
}

[class$="___brown_light4"] {
  background-color: #a77b6b;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___brown_dark4"] {
  background-color: #46312a;
  color: rgba(214, 214, 214, 0.6);
}

[class$="___deep-orange"] {
  background-color: #ff5722;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___deep-orange_light1"] {
  background-color: #ff6736;
  color: rgba(10, 10, 10, 0.6);
}

[class$="___deep-orange_dark1"] {
  background-color: #ff470e;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___deep-orange_light2"] {
  background-color: #ff764b;
  color: rgba(20, 20, 20, 0.6);
}

[class$="___deep-orange_dark2"] {
  background-color: #f83c00;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___deep-orange_light3"] {
  background-color: #ff865f;
  color: rgba(31, 31, 31, 0.6);
}

[class$="___deep-orange_dark3"] {
  background-color: #e43700;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___deep-orange_light4"] {
  background-color: #ff9574;
  color: rgba(41, 41, 41, 0.6);
}

[class$="___deep-orange_dark4"] {
  background-color: #cf3200;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___orange"] {
  background-color: #ff9800;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___orange_light1"] {
  background-color: #ffa014;
  color: rgba(10, 10, 10, 0.6);
}

[class$="___orange_dark1"] {
  background-color: #eb8c00;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___orange_light2"] {
  background-color: #ffa829;
  color: rgba(20, 20, 20, 0.6);
}

[class$="___orange_dark2"] {
  background-color: #d68000;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___orange_light3"] {
  background-color: #ffb13d;
  color: rgba(31, 31, 31, 0.6);
}

[class$="___orange_dark3"] {
  background-color: #c27400;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___orange_light4"] {
  background-color: #ffb952;
  color: rgba(41, 41, 41, 0.6);
}

[class$="___orange_dark4"] {
  background-color: #ad6700;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___amber"] {
  background-color: #ffc107;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___amber_light1"] {
  background-color: #ffc61b;
  color: rgba(10, 10, 10, 0.6);
}

[class$="___amber_dark1"] {
  background-color: #f2b500;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___amber_light2"] {
  background-color: #ffcb30;
  color: rgba(20, 20, 20, 0.6);
}

[class$="___amber_dark2"] {
  background-color: #dda600;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___amber_light3"] {
  background-color: #ffd044;
  color: rgba(31, 31, 31, 0.6);
}

[class$="___amber_dark3"] {
  background-color: #c99700;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___amber_light4"] {
  background-color: #ffd559;
  color: rgba(41, 41, 41, 0.6);
}

[class$="___amber_dark4"] {
  background-color: #b48700;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___yellow"] {
  background-color: #ffeb3b;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___yellow_light1"] {
  background-color: #ffed4f;
  color: rgba(10, 10, 10, 0.6);
}

[class$="___yellow_dark1"] {
  background-color: #ffe927;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___yellow_light2"] {
  background-color: #ffef64;
  color: rgba(20, 20, 20, 0.6);
}

[class$="___yellow_dark2"] {
  background-color: #ffe712;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___yellow_light3"] {
  background-color: #fff178;
  color: rgba(31, 31, 31, 0.6);
}

[class$="___yellow_dark3"] {
  background-color: #fde300;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___yellow_light4"] {
  background-color: #fff38d;
  color: rgba(41, 41, 41, 0.6);
}

[class$="___yellow_dark4"] {
  background-color: #e8d100;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___lime"] {
  background-color: #cddc39;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___lime_light1"] {
  background-color: #d1df4a;
  color: rgba(10, 10, 10, 0.6);
}

[class$="___lime_dark1"] {
  background-color: #c9d928;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___lime_light2"] {
  background-color: #d6e25c;
  color: rgba(20, 20, 20, 0.6);
}

[class$="___lime_dark2"] {
  background-color: #bac923;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___lime_light3"] {
  background-color: #dae56d;
  color: rgba(31, 31, 31, 0.6);
}

[class$="___lime_dark3"] {
  background-color: #a9b720;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___lime_light4"] {
  background-color: #dfe87e;
  color: rgba(41, 41, 41, 0.6);
}

[class$="___lime_dark4"] {
  background-color: #99a61d;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___light-green"] {
  background-color: #8bc34a;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___light-green_light1"] {
  background-color: #95c859;
  color: rgba(10, 10, 10, 0.6);
}

[class$="___light-green_dark1"] {
  background-color: #81bb3e;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___light-green_light2"] {
  background-color: #9fcd69;
  color: rgba(20, 20, 20, 0.6);
}

[class$="___light-green_dark2"] {
  background-color: #76ab39;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___light-green_light3"] {
  background-color: #a8d278;
  color: rgba(31, 31, 31, 0.6);
}

[class$="___light-green_dark3"] {
  background-color: #6c9c34;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___light-green_light4"] {
  background-color: #b2d787;
  color: rgba(41, 41, 41, 0.6);
}

[class$="___light-green_dark4"] {
  background-color: #618d2f;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___green"] {
  background-color: #259b24;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___green_light1"] {
  background-color: #29ac28;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___green_dark1"] {
  background-color: #218a20;
  color: rgba(245, 245, 245, 0.6);
}

[class$="___green_light2"] {
  background-color: #2dbc2c;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___green_dark2"] {
  background-color: #1d7a1c;
  color: rgba(235, 235, 235, 0.6);
}

[class$="___green_light3"] {
  background-color: #31cd30;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___green_dark3"] {
  background-color: #196918;
  color: rgba(224, 224, 224, 0.6);
}

[class$="___green_light4"] {
  background-color: #40d23e;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___green_dark4"] {
  background-color: #155915;
  color: rgba(214, 214, 214, 0.6);
}

[class$="___teal"] {
  background-color: #009688;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___teal_light1"] {
  background-color: #00aa9a;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___teal_dark1"] {
  background-color: #008276;
  color: rgba(245, 245, 245, 0.6);
}

[class$="___teal_light2"] {
  background-color: #00bfad;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___teal_dark2"] {
  background-color: #006d63;
  color: rgba(235, 235, 235, 0.6);
}

[class$="___teal_light3"] {
  background-color: #00d3bf;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___teal_dark3"] {
  background-color: #005951;
  color: rgba(224, 224, 224, 0.6);
}

[class$="___teal_light4"] {
  background-color: #00e8d2;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___teal_dark4"] {
  background-color: #00443e;
  color: rgba(214, 214, 214, 0.6);
}

[class$="___cyan"] {
  background-color: #00bcd4;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___cyan_light1"] {
  background-color: #00cee8;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___cyan_dark1"] {
  background-color: #00aac0;
  color: rgba(245, 245, 245, 0.6);
}

[class$="___cyan_light2"] {
  background-color: #00e0fd;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___cyan_dark2"] {
  background-color: #0098ab;
  color: rgba(235, 235, 235, 0.6);
}

[class$="___cyan_light3"] {
  background-color: #12e4ff;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___cyan_dark3"] {
  background-color: #008697;
  color: rgba(224, 224, 224, 0.6);
}

[class$="___cyan_light4"] {
  background-color: #27e7ff;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___cyan_dark4"] {
  background-color: #007482;
  color: rgba(214, 214, 214, 0.6);
}

[class$="___light-blue"] {
  background-color: #03a9f4;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___light-blue_light1"] {
  background-color: #0fb2fc;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___light-blue_dark1"] {
  background-color: #039be0;
  color: rgba(245, 245, 245, 0.6);
}

[class$="___light-blue_light2"] {
  background-color: #23b9fc;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___light-blue_dark2"] {
  background-color: #038dcc;
  color: rgba(235, 235, 235, 0.6);
}

[class$="___light-blue_light3"] {
  background-color: #38bffd;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___light-blue_dark3"] {
  background-color: #027fb8;
  color: rgba(224, 224, 224, 0.6);
}

[class$="___light-blue_light4"] {
  background-color: #4cc6fd;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___light-blue_dark4"] {
  background-color: #0271a3;
  color: rgba(214, 214, 214, 0.6);
}

[class$="___blue"] {
  background-color: #5677fc;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___blue_light1"] {
  background-color: #6a87fc;
  color: rgba(10, 10, 10, 0.6);
}

[class$="___blue_dark1"] {
  background-color: #4267fc;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___blue_light2"] {
  background-color: #7e97fd;
  color: rgba(20, 20, 20, 0.6);
}

[class$="___blue_dark2"] {
  background-color: #2e57fb;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___blue_light3"] {
  background-color: #92a7fd;
  color: rgba(31, 31, 31, 0.6);
}

[class$="___blue_dark3"] {
  background-color: #1a47fb;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___blue_light4"] {
  background-color: #a6b8fd;
  color: rgba(41, 41, 41, 0.6);
}

[class$="___blue_dark4"] {
  background-color: #0636fb;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___indigo"] {
  background-color: #3f51b5;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___indigo_light1"] {
  background-color: #495bc0;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___indigo_dark1"] {
  background-color: #3a4aa6;
  color: rgba(245, 245, 245, 0.6);
}

[class$="___indigo_light2"] {
  background-color: #5869c5;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___indigo_dark2"] {
  background-color: #344397;
  color: rgba(235, 235, 235, 0.6);
}

[class$="___indigo_light3"] {
  background-color: #6776ca;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___indigo_dark3"] {
  background-color: #2f3d88;
  color: rgba(224, 224, 224, 0.6);
}

[class$="___indigo_light4"] {
  background-color: #7684cf;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___indigo_dark4"] {
  background-color: #2a3678;
  color: rgba(214, 214, 214, 0.6);
}

[class$="___deep-purple"] {
  background-color: #673ab7;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___deep-purple_light1"] {
  background-color: #7142c3;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___deep-purple_dark1"] {
  background-color: #5e35a8;
  color: rgba(245, 245, 245, 0.6);
}

[class$="___deep-purple_light2"] {
  background-color: #7c52c8;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___deep-purple_dark2"] {
  background-color: #563098;
  color: rgba(235, 235, 235, 0.6);
}

[class$="___deep-purple_light3"] {
  background-color: #8861cd;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___deep-purple_dark3"] {
  background-color: #4d2b89;
  color: rgba(224, 224, 224, 0.6);
}

[class$="___deep-purple_light4"] {
  background-color: #9471d2;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___deep-purple_dark4"] {
  background-color: #442679;
  color: rgba(214, 214, 214, 0.6);
}

[class$="___purple"] {
  background-color: #9c27b0;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___purple_light1"] {
  background-color: #ab2bc1;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___purple_dark1"] {
  background-color: #8d239f;
  color: rgba(245, 245, 245, 0.6);
}

[class$="___purple_light2"] {
  background-color: #b92fd1;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___purple_dark2"] {
  background-color: #7e208f;
  color: rgba(235, 235, 235, 0.6);
}

[class$="___purple_light3"] {
  background-color: #bf40d5;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___purple_dark3"] {
  background-color: #701c7e;
  color: rgba(224, 224, 224, 0.6);
}

[class$="___purple_light4"] {
  background-color: #c450d8;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___purple_dark4"] {
  background-color: #61186d;
  color: rgba(214, 214, 214, 0.6);
}

[class$="___pink"] {
  background-color: #e91e63;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___pink_light1"] {
  background-color: #eb3170;
  color: rgba(10, 10, 10, 0.6);
}

[class$="___pink_dark1"] {
  background-color: #dd1659;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___pink_light2"] {
  background-color: #ed437d;
  color: rgba(20, 20, 20, 0.6);
}

[class$="___pink_dark2"] {
  background-color: #ca1452;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___pink_light3"] {
  background-color: #ee568a;
  color: rgba(31, 31, 31, 0.6);
}

[class$="___pink_dark3"] {
  background-color: #b8124a;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___pink_light4"] {
  background-color: #f06897;
  color: rgba(41, 41, 41, 0.6);
}

[class$="___pink_dark4"] {
  background-color: #a51043;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___red"] {
  background-color: #F44336;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___red_light1"] {
  background-color: #f55549;
  color: rgba(10, 10, 10, 0.6);
}

[class$="___red_dark1"] {
  background-color: #f33123;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___red_light2"] {
  background-color: #f6675d;
  color: rgba(20, 20, 20, 0.6);
}

[class$="___red_dark2"] {
  background-color: #f21f0f;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___red_light3"] {
  background-color: #f77970;
  color: rgba(31, 31, 31, 0.6);
}

[class$="___red_dark3"] {
  background-color: #e11b0c;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___red_light4"] {
  background-color: #f88b83;
  color: rgba(41, 41, 41, 0.6);
}

[class$="___red_dark4"] {
  background-color: #cd180b;
  color: rgba(0, 0, 0, 0.6);
}

[class$="___legend"] {
  background-color: #99cc00;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___legend_light1"] {
  background-color: #a8e000;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___legend_dark1"] {
  background-color: #8ab800;
  color: rgba(245, 245, 245, 0.6);
}

[class$="___legend_light2"] {
  background-color: #b8f500;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___legend_dark2"] {
  background-color: #7aa300;
  color: rgba(235, 235, 235, 0.6);
}

[class$="___legend_light3"] {
  background-color: #c2ff0a;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___legend_dark3"] {
  background-color: #6b8f00;
  color: rgba(224, 224, 224, 0.6);
}

[class$="___legend_light4"] {
  background-color: #c7ff1f;
  color: rgba(255, 255, 255, 0.6);
}

[class$="___legend_dark4"] {
  background-color: #5c7a00;
  color: rgba(214, 214, 214, 0.6);
}

[class*="___"] {
  height: 20px;
}

.color {
  float: left;
  width: 50px;
}

SassMeister-rendered.html

<div class="color">
  <div class="___blue-grey_light4"></div>
  <div class="___blue-grey_light3"></div>
  <div class="___blue-grey_light2"></div>
  <div class="___blue-grey_light1"></div>
  <div class="___blue-grey"></div>
  <div class="___blue-grey_dark1"></div>
  <div class="___blue-grey_dark2"></div>
  <div class="___blue-grey_dark3"></div>
  <div class="___blue-grey_dark4"></div>
</div>

<div class="color">
  <div class="___grey_light4"></div>
  <div class="___grey_light3"></div>
  <div class="___grey_light2"></div>
  <div class="___grey_light1"></div>
  <div class="___grey"></div>
  <div class="___grey_dark1"></div>
  <div class="___grey_dark2"></div>
  <div class="___grey_dark3"></div>
  <div class="___grey_dark4"></div>
</div>

<div class="color">
  <div class="___brown_light4"></div>
  <div class="___brown_light3"></div>
  <div class="___brown_light2"></div>
  <div class="___brown_light1"></div>
  <div class="___brown"></div>
  <div class="___brown_dark1"></div>
  <div class="___brown_dark2"></div>
  <div class="___brown_dark3"></div>
  <div class="___brown_dark4"></div>
</div>

<div class="color">
  <div class="___orange_light4"></div>
  <div class="___orange_light3"></div>
  <div class="___orange_light2"></div>
  <div class="___orange_light1"></div>
  <div class="___orange"></div>
  <div class="___orange_dark1"></div>
  <div class="___orange_dark2"></div>
  <div class="___orange_dark3"></div>
  <div class="___orange_dark4"></div>
</div>

<div class="color">
  <div class="___amber_light4"></div>
  <div class="___amber_light3"></div>
  <div class="___amber_light2"></div>
  <div class="___amber_light1"></div>
  <div class="___amber"></div>
  <div class="___amber_dark1"></div>
  <div class="___amber_dark2"></div>
  <div class="___amber_dark3"></div>
  <div class="___amber_dark4"></div>
</div>

<div class="color">
  <div class="___yellow_light4"></div>
  <div class="___yellow_light3"></div>
  <div class="___yellow_light2"></div>
  <div class="___yellow_light1"></div>
  <div class="___yellow"></div>
  <div class="___yellow_dark1"></div>
  <div class="___yellow_dark2"></div>
  <div class="___yellow_dark3"></div>
  <div class="___yellow_dark4"></div>
</div>

<div class="color">
  <div class="___lime_light4"></div>
  <div class="___lime_light3"></div>
  <div class="___lime_light2"></div>
  <div class="___lime_light1"></div>
  <div class="___lime"></div>
  <div class="___lime_dark1"></div>
  <div class="___lime_dark2"></div>
  <div class="___lime_dark3"></div>
  <div class="___lime_dark4"></div>
</div>

<div class="color">
  <div class="___light-green_light4"></div>
  <div class="___light-green_light3"></div>
  <div class="___light-green_light2"></div>
  <div class="___light-green_light1"></div>
  <div class="___light-green"></div>
  <div class="___light-green_dark1"></div>
  <div class="___light-green_dark2"></div>
  <div class="___light-green_dark3"></div>
  <div class="___light-green_dark4"></div>
</div>

<div class="color">
  <div class="___teal_light4"></div>
  <div class="___teal_light3"></div>
  <div class="___teal_light2"></div>
  <div class="___teal_light1"></div>
  <div class="___teal"></div>
  <div class="___teal_dark1"></div>
  <div class="___teal_dark2"></div>
  <div class="___teal_dark3"></div>
  <div class="___teal_dark4"></div>
</div>

<div class="color">
  <div class="___cyan_light4"></div>
  <div class="___cyan_light3"></div>
  <div class="___cyan_light2"></div>
  <div class="___cyan_light1"></div>
  <div class="___cyan"></div>
  <div class="___cyan_dark1"></div>
  <div class="___cyan_dark2"></div>
  <div class="___cyan_dark3"></div>
  <div class="___cyan_dark4"></div>
</div>

<div class="color">
  <div class="___light-blue_light4"></div>
  <div class="___light-blue_light3"></div>
  <div class="___light-blue_light2"></div>
  <div class="___light-blue_light1"></div>
  <div class="___light-blue"></div>
  <div class="___light-blue_dark1"></div>
  <div class="___light-blue_dark2"></div>
  <div class="___light-blue_dark3"></div>
  <div class="___light-blue_dark4"></div>
</div>

<div class="color">
  <div class="___blue_light4"></div>
  <div class="___blue_light3"></div>
  <div class="___blue_light2"></div>
  <div class="___blue_light1"></div>
  <div class="___blue"></div>
  <div class="___blue_dark1"></div>
  <div class="___blue_dark2"></div>
  <div class="___blue_dark3"></div>
  <div class="___blue_dark4"></div>
</div>

<div class="color">
  <div class="___indigo_light4"></div>
  <div class="___indigo_light3"></div>
  <div class="___indigo_light2"></div>
  <div class="___indigo_light1"></div>
  <div class="___indigo"></div>
  <div class="___indigo_dark1"></div>
  <div class="___indigo_dark2"></div>
  <div class="___indigo_dark3"></div>
  <div class="___indigo_dark4"></div>
</div>

<div class="color">
  <div class="___deep-purple_light4"></div>
  <div class="___deep-purple_light3"></div>
  <div class="___deep-purple_light2"></div>
  <div class="___deep-purple_light1"></div>
  <div class="___deep-purple"></div>
  <div class="___deep-purple_dark1"></div>
  <div class="___deep-purple_dark2"></div>
  <div class="___deep-purple_dark3"></div>
  <div class="___deep-purple_dark4"></div>
</div>

<div class="color">
  <div class="___purple_light4"></div>
  <div class="___purple_light3"></div>
  <div class="___purple_light2"></div>
  <div class="___purple_light1"></div>
  <div class="___purple"></div>
  <div class="___purple_dark1"></div>
  <div class="___purple_dark2"></div>
  <div class="___purple_dark3"></div>
  <div class="___purple_dark4"></div>
</div>

<div class="color">
  <div class="___pink_light4"></div>
  <div class="___pink_light3"></div>
  <div class="___pink_light2"></div>
  <div class="___pink_light1"></div>
  <div class="___pink"></div>
  <div class="___pink_dark1"></div>
  <div class="___pink_dark2"></div>
  <div class="___pink_dark3"></div>
  <div class="___pink_dark4"></div>
</div>

<div class="color">
  <div class="___red_light4"></div>
  <div class="___red_light3"></div>
  <div class="___red_light2"></div>
  <div class="___red_light1"></div>
  <div class="___red"></div>
  <div class="___red_dark1"></div>
  <div class="___red_dark2"></div>
  <div class="___red_dark3"></div>
  <div class="___red_dark4"></div>
</div>

<div class="color">
  <div class="___legend_light4"></div>
  <div class="___legend_light3"></div>
  <div class="___legend_light2"></div>
  <div class="___legend_light1"></div>
  <div class="___legend"></div>
  <div class="___legend_dark1"></div>
  <div class="___legend_dark2"></div>
  <div class="___legend_dark3"></div>
  <div class="___legend_dark4"></div>
</div>