Generated by SassMeister.com.

SassMeister-input-HTML.haml

- 4.times do |i|
  %div{:class => "box box-hilite-#{i + 1}"}
- 4.times do |i|
  %div{:class => "box box-primary-#{i + 1}"}
- 4.times do |i|
  %div{:class => "box box-shadow-#{i + 1}"}

SassMeister-input.scss

// ----
// Sass (v3.2.13)
// Compass (v0.12.2)
// ----

$colors: (
  turquoise     #1abc9c
  emerald       #2ecc71
  green_sea     #16a085
  nephritis     #27ae60
  peter_river   #3498db
  belize_hole   #2980b9
  amethyst      #9b59b6
  wisteria      #8e44ad
  wet_asphalt   #34495e
  midnight_blue #2c3e50
  sun_flower    #f1c40f
  carrot        #e67e22
  orange        #f39c12
  pumpkin       #d35400
  alizarin      #e74c3c
  pomegranate   #c0392b
  clouds        #ecf0f1
  silver        #bdc3c7
  concrete      #95a5a6
  asbestos      #7f8c8d

);

@function list($list, $item) {
  @return nth($list, index($list, $item) + 1);
}

$primary-color: list($colors, alizarin);
$hilite-color: list($colors, sun_flower);
//$hilite-color: white;
//$shadow-color: list($colors, pomegranate);
$shadow-color: #111;

body {
  background-color: $primary-color;
}

.box {
  background-color: black;
  float: left;
  width: (100%/12);
  height: 150px;
  margin-right: 0;
}

@mixin color-mix($class-name, $color1, $color2, $box-num) {
  @for $i from 1 through $box-num {
    .box-#{$class-name}-#{$i} {
      position: relative;
      $color: mix($color1, $color2, $i * 100% / $box-num );
      background-color: $color;
      &:after {
        font-size: 0.8em;
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        color: white;
        background-color: rgba(black, 0.5);
        display: block;
        content: "#{$color}";  
        text-align: center;
        padding: 10px 10px;
        //width: 50%;
        font-family: sans;
      }
    };
  }
}

@include color-mix(hilite, $hilite-color, $primary-color, 4);
@include color-mix(primary, white, $hilite-color, 4);
@include color-mix(shadow, $shadow-color, $primary-color, 4);

SassMeister-output.css

body {
  background-color: #e74c3c;
}

.box {
  background-color: black;
  float: left;
  width: 8.33333%;
  height: 150px;
  margin-right: 0;
}

.box-hilite-1 {
  position: relative;
  background-color: #e96a30;
}
.box-hilite-1:after {
  font-size: 0.8em;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  content: "#e96a30";
  text-align: center;
  padding: 10px 10px;
  font-family: sans;
}

.box-hilite-2 {
  position: relative;
  background-color: #ec8825;
}
.box-hilite-2:after {
  font-size: 0.8em;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  content: "#ec8825";
  text-align: center;
  padding: 10px 10px;
  font-family: sans;
}

.box-hilite-3 {
  position: relative;
  background-color: #eea61a;
}
.box-hilite-3:after {
  font-size: 0.8em;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  content: "#eea61a";
  text-align: center;
  padding: 10px 10px;
  font-family: sans;
}

.box-hilite-4 {
  position: relative;
  background-color: #f1c40f;
}
.box-hilite-4:after {
  font-size: 0.8em;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  content: "#f1c40f";
  text-align: center;
  padding: 10px 10px;
  font-family: sans;
}

.box-primary-1 {
  position: relative;
  background-color: #f4d24b;
}
.box-primary-1:after {
  font-size: 0.8em;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  content: "#f4d24b";
  text-align: center;
  padding: 10px 10px;
  font-family: sans;
}

.box-primary-2 {
  position: relative;
  background-color: #f8e187;
}
.box-primary-2:after {
  font-size: 0.8em;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  content: "#f8e187";
  text-align: center;
  padding: 10px 10px;
  font-family: sans;
}

.box-primary-3 {
  position: relative;
  background-color: #fbf0c3;
}
.box-primary-3:after {
  font-size: 0.8em;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  content: "#fbf0c3";
  text-align: center;
  padding: 10px 10px;
  font-family: sans;
}

.box-primary-4 {
  position: relative;
  background-color: white;
}
.box-primary-4:after {
  font-size: 0.8em;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  content: "white";
  text-align: center;
  padding: 10px 10px;
  font-family: sans;
}

.box-shadow-1 {
  position: relative;
  background-color: #b13d31;
}
.box-shadow-1:after {
  font-size: 0.8em;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  content: "#b13d31";
  text-align: center;
  padding: 10px 10px;
  font-family: sans;
}

.box-shadow-2 {
  position: relative;
  background-color: #7c2e26;
}
.box-shadow-2:after {
  font-size: 0.8em;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  content: "#7c2e26";
  text-align: center;
  padding: 10px 10px;
  font-family: sans;
}

.box-shadow-3 {
  position: relative;
  background-color: #461f1b;
}
.box-shadow-3:after {
  font-size: 0.8em;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  content: "#461f1b";
  text-align: center;
  padding: 10px 10px;
  font-family: sans;
}

.box-shadow-4 {
  position: relative;
  background-color: #111111;
}
.box-shadow-4:after {
  font-size: 0.8em;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  content: "#111111";
  text-align: center;
  padding: 10px 10px;
  font-family: sans;
}

SassMeister-rendered.html

<div class='box box-hilite-1'></div>
<div class='box box-hilite-2'></div>
<div class='box box-hilite-3'></div>
<div class='box box-hilite-4'></div>
<div class='box box-primary-1'></div>
<div class='box box-primary-2'></div>
<div class='box box-primary-3'></div>
<div class='box box-primary-4'></div>
<div class='box box-shadow-1'></div>
<div class='box box-shadow-2'></div>
<div class='box box-shadow-3'></div>
<div class='box box-shadow-4'></div>