%div.container
  - ["red","pink","purple","deep-purple","indigo","blue","light-blue","cyan","teal","green","light-green","lime","yellow","amber","orange","deep-orange","brown","grey","blue-grey"].each do |color|
    %div.swatches
      %div.swatch-title{:class => "#{color}-500"}
        %h3 #{color}
      %span.color-swatch{:class => "#{color}-50"} 50
      - (1..9).each do |i|
        %span.color-swatch{:class => "#{color}-#{i * 100}"} #{i * 100}

$baseColors: (
  red: #F44336,
  pink: #E91E63,
  purple: #9C27B0,
  deep-purple: #673AB7,
  indigo: #3F51B5,
  blue: #2196F3,
  light-blue: #03A9F4,
  cyan: #00BCD4,
  teal: #009688,
  green: #4CAF50,
  light-green: #8BC34A,
  lime: #CDDC39,
  yellow: #FFEB3B,
  amber: #FFC107,
  orange: #FF9800,
  deep-orange: #FF5722,
  brown: #795548,
  grey: #9E9E9E,
  blue-grey: #607D8B
);

@function colorMap($baseColors, $variations) {
  $colors:();
  
  @each $color, $value in $baseColors {
    $maxVar: 36;
    $mid: $variations / 2;
    $dist: $mid - 1;
    $step: $maxVar / $dist;
    
    // lighten and darken
    @for $i from 1 through $dist {
      $percent: $maxVar - ($step * ($i - 1));
      $darken: ($variations - $i) * 100;
      $lighten: $i * 100;

      $colors: map-merge($colors, (
         #{$color}-#{$lighten}: lighten($value, $percent),
         #{$color}-#{$darken}:  darken($value, $percent)
      ));
    }

    // middle eg 500
    $colors: map-merge($colors, (#{$color}-50: lighten($value, 38.7)));
    $colors: map-merge($colors, (#{$color}-#{$variations/2*100}: $value));
  }
  @return $colors;
}

@each $color, $value in colorMap($baseColors, 10) {
  .#{$color} { 
    &::before {
      content: '#{$value}';
      font-family: monospace;
      float: right;
      text-transform: uppercase;
    }
    background-color: $value;
  }
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.swatches {
  flex: auto;
  margin: 20px;
}

.swatch-title {
  padding: 12px;
  margin-bottom: 5px;
  text-transform: capitalize;
  
  h3 {
    margin: 0 0 50px;
    font-size: inherit;
  }
}

.color-swatch:nth-child(n+7) {
  color: #fff;
}

.color-swatch {
  box-sizing: border-box;
  min-width: 360px;
  padding: 12px;
  display: block;
  font-weight: bold;
}