Material Design Sass Color Palette

codeswing.json

{
  "scripts": [],
  "styles": []
}

index.html

<div class='container'>
  <div class='swatches'>
    <div class='red-500 swatch-title'>
      <h3>red</h3>
    </div>
    <span class='color-swatch red-50'>50</span>
    <span class='color-swatch red-100'>100</span>
    <span class='color-swatch red-200'>200</span>
    <span class='color-swatch red-300'>300</span>
    <span class='color-swatch red-400'>400</span>
    <span class='color-swatch red-500'>500</span>
    <span class='color-swatch red-600'>600</span>
    <span class='color-swatch red-700'>700</span>
    <span class='color-swatch red-800'>800</span>
    <span class='color-swatch red-900'>900</span>
  </div>
  <div class='swatches'>
    <div class='pink-500 swatch-title'>
      <h3>pink</h3>
    </div>
    <span class='color-swatch pink-50'>50</span>
    <span class='color-swatch pink-100'>100</span>
    <span class='color-swatch pink-200'>200</span>
    <span class='color-swatch pink-300'>300</span>
    <span class='color-swatch pink-400'>400</span>
    <span class='color-swatch pink-500'>500</span>
    <span class='color-swatch pink-600'>600</span>
    <span class='color-swatch pink-700'>700</span>
    <span class='color-swatch pink-800'>800</span>
    <span class='color-swatch pink-900'>900</span>
  </div>
  <div class='swatches'>
    <div class='purple-500 swatch-title'>
      <h3>purple</h3>
    </div>
    <span class='color-swatch purple-50'>50</span>
    <span class='color-swatch purple-100'>100</span>
    <span class='color-swatch purple-200'>200</span>
    <span class='color-swatch purple-300'>300</span>
    <span class='color-swatch purple-400'>400</span>
    <span class='color-swatch purple-500'>500</span>
    <span class='color-swatch purple-600'>600</span>
    <span class='color-swatch purple-700'>700</span>
    <span class='color-swatch purple-800'>800</span>
    <span class='color-swatch purple-900'>900</span>
  </div>
  <div class='swatches'>
    <div class='deep-purple-500 swatch-title'>
      <h3>deep-purple</h3>
    </div>
    <span class='color-swatch deep-purple-50'>50</span>
    <span class='color-swatch deep-purple-100'>100</span>
    <span class='color-swatch deep-purple-200'>200</span>
    <span class='color-swatch deep-purple-300'>300</span>
    <span class='color-swatch deep-purple-400'>400</span>
    <span class='color-swatch deep-purple-500'>500</span>
    <span class='color-swatch deep-purple-600'>600</span>
    <span class='color-swatch deep-purple-700'>700</span>
    <span class='color-swatch deep-purple-800'>800</span>
    <span class='color-swatch deep-purple-900'>900</span>
  </div>
  <div class='swatches'>
    <div class='indigo-500 swatch-title'>
      <h3>indigo</h3>
    </div>
    <span class='color-swatch indigo-50'>50</span>
    <span class='color-swatch indigo-100'>100</span>
    <span class='color-swatch indigo-200'>200</span>
    <span class='color-swatch indigo-300'>300</span>
    <span class='color-swatch indigo-400'>400</span>
    <span class='color-swatch indigo-500'>500</span>
    <span class='color-swatch indigo-600'>600</span>
    <span class='color-swatch indigo-700'>700</span>
    <span class='color-swatch indigo-800'>800</span>
    <span class='color-swatch indigo-900'>900</span>
  </div>
  <div class='swatches'>
    <div class='blue-500 swatch-title'>
      <h3>blue</h3>
    </div>
    <span class='blue-50 color-swatch'>50</span>
    <span class='blue-100 color-swatch'>100</span>
    <span class='blue-200 color-swatch'>200</span>
    <span class='blue-300 color-swatch'>300</span>
    <span class='blue-400 color-swatch'>400</span>
    <span class='blue-500 color-swatch'>500</span>
    <span class='blue-600 color-swatch'>600</span>
    <span class='blue-700 color-swatch'>700</span>
    <span class='blue-800 color-swatch'>800</span>
    <span class='blue-900 color-swatch'>900</span>
  </div>
  <div class='swatches'>
    <div class='light-blue-500 swatch-title'>
      <h3>light-blue</h3>
    </div>
    <span class='color-swatch light-blue-50'>50</span>
    <span class='color-swatch light-blue-100'>100</span>
    <span class='color-swatch light-blue-200'>200</span>
    <span class='color-swatch light-blue-300'>300</span>
    <span class='color-swatch light-blue-400'>400</span>
    <span class='color-swatch light-blue-500'>500</span>
    <span class='color-swatch light-blue-600'>600</span>
    <span class='color-swatch light-blue-700'>700</span>
    <span class='color-swatch light-blue-800'>800</span>
    <span class='color-swatch light-blue-900'>900</span>
  </div>
  <div class='swatches'>
    <div class='cyan-500 swatch-title'>
      <h3>cyan</h3>
    </div>
    <span class='color-swatch cyan-50'>50</span>
    <span class='color-swatch cyan-100'>100</span>
    <span class='color-swatch cyan-200'>200</span>
    <span class='color-swatch cyan-300'>300</span>
    <span class='color-swatch cyan-400'>400</span>
    <span class='color-swatch cyan-500'>500</span>
    <span class='color-swatch cyan-600'>600</span>
    <span class='color-swatch cyan-700'>700</span>
    <span class='color-swatch cyan-800'>800</span>
    <span class='color-swatch cyan-900'>900</span>
  </div>
  <div class='swatches'>
    <div class='swatch-title teal-500'>
      <h3>teal</h3>
    </div>
    <span class='color-swatch teal-50'>50</span>
    <span class='color-swatch teal-100'>100</span>
    <span class='color-swatch teal-200'>200</span>
    <span class='color-swatch teal-300'>300</span>
    <span class='color-swatch teal-400'>400</span>
    <span class='color-swatch teal-500'>500</span>
    <span class='color-swatch teal-600'>600</span>
    <span class='color-swatch teal-700'>700</span>
    <span class='color-swatch teal-800'>800</span>
    <span class='color-swatch teal-900'>900</span>
  </div>
  <div class='swatches'>
    <div class='green-500 swatch-title'>
      <h3>green</h3>
    </div>
    <span class='color-swatch green-50'>50</span>
    <span class='color-swatch green-100'>100</span>
    <span class='color-swatch green-200'>200</span>
    <span class='color-swatch green-300'>300</span>
    <span class='color-swatch green-400'>400</span>
    <span class='color-swatch green-500'>500</span>
    <span class='color-swatch green-600'>600</span>
    <span class='color-swatch green-700'>700</span>
    <span class='color-swatch green-800'>800</span>
    <span class='color-swatch green-900'>900</span>
  </div>
  <div class='swatches'>
    <div class='light-green-500 swatch-title'>
      <h3>light-green</h3>
    </div>
    <span class='color-swatch light-green-50'>50</span>
    <span class='color-swatch light-green-100'>100</span>
    <span class='color-swatch light-green-200'>200</span>
    <span class='color-swatch light-green-300'>300</span>
    <span class='color-swatch light-green-400'>400</span>
    <span class='color-swatch light-green-500'>500</span>
    <span class='color-swatch light-green-600'>600</span>
    <span class='color-swatch light-green-700'>700</span>
    <span class='color-swatch light-green-800'>800</span>
    <span class='color-swatch light-green-900'>900</span>
  </div>
  <div class='swatches'>
    <div class='lime-500 swatch-title'>
      <h3>lime</h3>
    </div>
    <span class='color-swatch lime-50'>50</span>
    <span class='color-swatch lime-100'>100</span>
    <span class='color-swatch lime-200'>200</span>
    <span class='color-swatch lime-300'>300</span>
    <span class='color-swatch lime-400'>400</span>
    <span class='color-swatch lime-500'>500</span>
    <span class='color-swatch lime-600'>600</span>
    <span class='color-swatch lime-700'>700</span>
    <span class='color-swatch lime-800'>800</span>
    <span class='color-swatch lime-900'>900</span>
  </div>
  <div class='swatches'>
    <div class='swatch-title yellow-500'>
      <h3>yellow</h3>
    </div>
    <span class='color-swatch yellow-50'>50</span>
    <span class='color-swatch yellow-100'>100</span>
    <span class='color-swatch yellow-200'>200</span>
    <span class='color-swatch yellow-300'>300</span>
    <span class='color-swatch yellow-400'>400</span>
    <span class='color-swatch yellow-500'>500</span>
    <span class='color-swatch yellow-600'>600</span>
    <span class='color-swatch yellow-700'>700</span>
    <span class='color-swatch yellow-800'>800</span>
    <span class='color-swatch yellow-900'>900</span>
  </div>
  <div class='swatches'>
    <div class='amber-500 swatch-title'>
      <h3>amber</h3>
    </div>
    <span class='amber-50 color-swatch'>50</span>
    <span class='amber-100 color-swatch'>100</span>
    <span class='amber-200 color-swatch'>200</span>
    <span class='amber-300 color-swatch'>300</span>
    <span class='amber-400 color-swatch'>400</span>
    <span class='amber-500 color-swatch'>500</span>
    <span class='amber-600 color-swatch'>600</span>
    <span class='amber-700 color-swatch'>700</span>
    <span class='amber-800 color-swatch'>800</span>
    <span class='amber-900 color-swatch'>900</span>
  </div>
  <div class='swatches'>
    <div class='orange-500 swatch-title'>
      <h3>orange</h3>
    </div>
    <span class='color-swatch orange-50'>50</span>
    <span class='color-swatch orange-100'>100</span>
    <span class='color-swatch orange-200'>200</span>
    <span class='color-swatch orange-300'>300</span>
    <span class='color-swatch orange-400'>400</span>
    <span class='color-swatch orange-500'>500</span>
    <span class='color-swatch orange-600'>600</span>
    <span class='color-swatch orange-700'>700</span>
    <span class='color-swatch orange-800'>800</span>
    <span class='color-swatch orange-900'>900</span>
  </div>
  <div class='swatches'>
    <div class='deep-orange-500 swatch-title'>
      <h3>deep-orange</h3>
    </div>
    <span class='color-swatch deep-orange-50'>50</span>
    <span class='color-swatch deep-orange-100'>100</span>
    <span class='color-swatch deep-orange-200'>200</span>
    <span class='color-swatch deep-orange-300'>300</span>
    <span class='color-swatch deep-orange-400'>400</span>
    <span class='color-swatch deep-orange-500'>500</span>
    <span class='color-swatch deep-orange-600'>600</span>
    <span class='color-swatch deep-orange-700'>700</span>
    <span class='color-swatch deep-orange-800'>800</span>
    <span class='color-swatch deep-orange-900'>900</span>
  </div>
  <div class='swatches'>
    <div class='brown-500 swatch-title'>
      <h3>brown</h3>
    </div>
    <span class='brown-50 color-swatch'>50</span>
    <span class='brown-100 color-swatch'>100</span>
    <span class='brown-200 color-swatch'>200</span>
    <span class='brown-300 color-swatch'>300</span>
    <span class='brown-400 color-swatch'>400</span>
    <span class='brown-500 color-swatch'>500</span>
    <span class='brown-600 color-swatch'>600</span>
    <span class='brown-700 color-swatch'>700</span>
    <span class='brown-800 color-swatch'>800</span>
    <span class='brown-900 color-swatch'>900</span>
  </div>
  <div class='swatches'>
    <div class='grey-500 swatch-title'>
      <h3>grey</h3>
    </div>
    <span class='color-swatch grey-50'>50</span>
    <span class='color-swatch grey-100'>100</span>
    <span class='color-swatch grey-200'>200</span>
    <span class='color-swatch grey-300'>300</span>
    <span class='color-swatch grey-400'>400</span>
    <span class='color-swatch grey-500'>500</span>
    <span class='color-swatch grey-600'>600</span>
    <span class='color-swatch grey-700'>700</span>
    <span class='color-swatch grey-800'>800</span>
    <span class='color-swatch grey-900'>900</span>
  </div>
  <div class='swatches'>
    <div class='blue-grey-500 swatch-title'>
      <h3>blue-grey</h3>
    </div>
    <span class='blue-grey-50 color-swatch'>50</span>
    <span class='blue-grey-100 color-swatch'>100</span>
    <span class='blue-grey-200 color-swatch'>200</span>
    <span class='blue-grey-300 color-swatch'>300</span>
    <span class='blue-grey-400 color-swatch'>400</span>
    <span class='blue-grey-500 color-swatch'>500</span>
    <span class='blue-grey-600 color-swatch'>600</span>
    <span class='blue-grey-700 color-swatch'>700</span>
    <span class='blue-grey-800 color-swatch'>800</span>
    <span class='blue-grey-900 color-swatch'>900</span>
  </div>
</div>

script.ts

‎‎​

style.scss

$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;
}