Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

@function color-scale($base-color, $index) {
  @if $index < -2 or $index > 9 {
    @error "Index needs to be between -2 and 9";
  }

  @if $base-color == $color-black or $base-color == $color-white {
    @error "Cannot scale $color-black, use $color-grey instead";
  }

  @if $index < 0 {
    @return mix($color-black, $base-color, $index * -10%);
  }

  @return mix($color-white, $base-color, $index * 10%);
}

// Primary colors
$color-white: #fff !default;
$color-grey: #585858 !default;
$color-black: #232323 !default;
$color-teal: #42abc8 !default;
$color-red: #d12229 !default;
$color-orange: #ff8e4d !default;
$color-green: #349c5f !default;

// Secondary colors
$color-ice-blue: #a1dff0 !default;
$color-candy-pink: #f492af !default;
$color-mint: #a7dace !default;
$color-gold: #c59b15 !default;
$color-deep-blue: #347cb2 !default;
$color-burgundy: #8d405e !default;
$color-sandstone: #eadcca !default;

// Semantic mappings
$primary-color: $color-black !default;
$secondary-color: $color-white !default;
$action-color: $color-teal !default;
$success-color: $color-green !default;
$info-color: $color-teal !default;
$warning-color: $color-orange !default;
$alert-color: $color-red !default;
$disabled-color: color-scale($color-grey, 5) !default;
$text-color: color-scale($color-grey, -2) !default;
$sale-color: $color-red !default;

// 3rd-party branding colors
$color-googleplus: #dd4b39 !default;
$color-facebook: #3b5998 !default;
$color-twitter: #00aced !default;
$color-email: #66dac6 !default;
$color-pinterest: #d0021b !default;
$color-click-frenzy: #78c5eb !default;
$color-afterpay: #104675 !default;
$color-sale: $color-red !default;

.greyscale {
  color: color-scale($color-grey, -2);
  color: color-scale($color-grey, -1);
  color: color-scale($color-grey, 0);
  color: color-scale($color-grey, 1);
  color: color-scale($color-grey, 2);
  color: color-scale($color-grey, 3);
  color: color-scale($color-grey, 4);
  color: color-scale($color-grey, 5);
  color: color-scale($color-grey, 6);
  color: color-scale($color-grey, 7);
  color: color-scale($color-grey, 8);
  color: color-scale($color-grey, 9);
}

.bluescale {
  color: color-scale($color-teal, -2);
  color: color-scale($color-teal, -1);
  color: color-scale($color-teal, 0);
  color: color-scale($color-teal, 1);
  color: color-scale($color-teal, 2);
  color: color-scale($color-teal, 3);
  color: color-scale($color-teal, 4);
  color: color-scale($color-teal, 5);
  color: color-scale($color-teal, 6);
  color: color-scale($color-teal, 7);
  color: color-scale($color-teal, 8);
  color: color-scale($color-teal, 9);
}

SassMeister-output.css

.greyscale {
  color: #4d4d4d;
  color: #535353;
  color: #585858;
  color: dimgray;
  color: #797979;
  color: #8a8a8a;
  color: #9b9b9b;
  color: #acacac;
  color: #bcbcbc;
  color: #cdcdcd;
  color: #dedede;
  color: #eeeeee;
}

.bluescale {
  color: #3c90a7;
  color: #3f9db8;
  color: #42abc8;
  color: #55b3ce;
  color: #68bcd3;
  color: #7bc4d9;
  color: #8ecdde;
  color: #a1d5e4;
  color: #b3dde9;
  color: #c6e6ef;
  color: #d9eef4;
  color: #ecf7fa;
}