SCSS color palette generator — use to generate a range of color utilities (text color, background, border-color).

scss-color-palette-generator.scss

// Example: Set your color variables

$color--gray:          #888888;
$color--blue:          #3366FF;
$color--teal:          #43E7F9;
$color--green:         #5BD642;
$color--orange:        #ffae18;
$color--red:           #FF4732;

// Example: Set a color shade step interval

$color--interval:     7.6%;

// Example: Map your colour names to the variables

$colors: () !default;
$colors: map-merge((
  "gray":      $color--gray,
  "blue":      $color--blue,
  "teal":      $color--teal,
  "green":     $color--green,
  "orange":    $color--orange,
  "red":       $color--red
), $colors);

// Example: Deploy as background (bg) color utility classes

@each $key, $value in $colors {
  .bg--#{$key} {
    &-100 {
      background-color: lighten($value, $color--interval * 4);
    }
    &-200 {
      background-color: lighten($value, $color--interval * 3);
    }
    &-300 {
      background-color: lighten($value, $color--interval * 2);
    }
    &-400 {
      background-color: lighten($value, $color--interval);
    }
    &-500 {
      background-color: $value;
    }
    &-600 {
      background-color: darken($value, $color--interval);
    }
    &-700 {
      background-color: darken($value, $color--interval * 2);
    }
    &-800 {
      background-color: darken($value, $color--interval * 3);
    }
    &-900 {
      background-color: darken($value, $color--interval * 4);
    }
  }
}