Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="box  box___blue-grey">blue-grey</div>
<div class="box  box___grey">grey</div>
<div class="box  box___brown">brown</div>
<div class="box  box___deep-orange">deep-orange</div>
<div class="box  box___orange">orange</div>
<div class="box  box___amber">amber</div>
<div class="box  box___yellow">yellow</div>
<div class="box  box___lime">lime</div>
<div class="box  box___light-green">light-green</div>
<div class="box  box___green">green</div>
<div class="box  box___teal">teal</div>
<div class="box  box___cyan">cyan</div>
<div class="box  box___light-blue">light-blue</div>
<div class="box  box___blue">blue</div>
<div class="box  box___indigo">indigo</div>
<div class="box  box___deep-purple">deep-purple</div>
<div class="box  box___purple">purple</div>
<div class="box  box___pink">pink</div>
<div class="box  box___red">red</div>

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

$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: #e51c23
);

@mixin colour($name: #999, $shade: .6) {
  $background: map-get($colours, $name);
  $color: if( lightness($background) > 50 , #000, #fff);
  background-color: $background;
  color: rgba($color, $shade);
}

@each $name, $value in $colours {
  [class$="___#{$name}"]{
    @include colour($name);
  }
}

.box {
  font-family: sans-serif;
  font-size: 2em;
  padding: 1em;
}

SassMeister-output.css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.box {
  font-family: sans-serif;
  font-size: 2em;
  padding: 1em;
}

SassMeister-rendered.html

<div class="box  box___blue-grey">blue-grey</div>
<div class="box  box___grey">grey</div>
<div class="box  box___brown">brown</div>
<div class="box  box___deep-orange">deep-orange</div>
<div class="box  box___orange">orange</div>
<div class="box  box___amber">amber</div>
<div class="box  box___yellow">yellow</div>
<div class="box  box___lime">lime</div>
<div class="box  box___light-green">light-green</div>
<div class="box  box___green">green</div>
<div class="box  box___teal">teal</div>
<div class="box  box___cyan">cyan</div>
<div class="box  box___light-blue">light-blue</div>
<div class="box  box___blue">blue</div>
<div class="box  box___indigo">indigo</div>
<div class="box  box___deep-purple">deep-purple</div>
<div class="box  box___purple">purple</div>
<div class="box  box___pink">pink</div>
<div class="box  box___red">red</div>