Generated by SassMeister.com.

SassMeister-input-HTML.html

<s class='red-50'></s>
<s class='red-100'></s>
<s class='red-200'></s>
<s class='red-300'></s>
<s class='red-400'></s>
<s class='red-500'></s>
<s class='red-600'></s>
<s class='red-700'></s>
<s class='red-800'></s>
<s class='red-900'></s>
<br>
<s class='red-A100'></s>
<s class='red-A200'></s>
<s class='red-A400'></s>
<s class='red-A700'></s>

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

s {display: block; padding: 5px;}

//$red:    #DD2828;
$red:    orange;

// color
$red-50: desaturate(lighten($red, 45), 15);
$red-100: desaturate(lighten($red, 40), 15);
$red-200: desaturate(lighten($red, 30), 15);
$red-300: desaturate(lighten($red, 20), 15);
$red-400: desaturate(lighten($red, 10), 15);

$red-500: desaturate(lighten($red, 0), 15);

$red-600: desaturate(darken($red, 5), 15);
$red-700: desaturate(darken($red, 10), 15);
$red-800: desaturate(darken($red, 15), 15);
$red-900: desaturate(darken($red, 20), 15);

$red-A100:   saturate($red-100, 100);
$red-A200:   saturate($red-200, 100);
$red-A400:   saturate($red-400, 100);
$red-A700:   saturate($red-700, 100);

.red-50 {background: $red-50;}
.red-100 {background: $red-100;}
.red-200 {background: $red-200;}
.red-300 {background: $red-300;}
.red-400 {background: $red-400;}
.red-500 {background: $red-500;}
.red-600 {background: $red-600;}
.red-700 {background: $red-700;}
.red-800 {background: $red-800;}
.red-900 {background: $red-900;}

.red-A100 {background: $red-A100;}
.red-A200 {background: $red-A200;}
.red-A400 {background: $red-A400;}
.red-A700 {background: $red-A700;}

SassMeister-output.css

s { display: block; padding: 5px; }

.red-50 { background: #fdf5e7; }

.red-100 { background: #fbecd0; }

.red-200 { background: #f7d9a1; }

.red-300 { background: #f4c671; }

.red-400 { background: #f0b342; }

.red-500 { background: #ec9f13; }

.red-600 { background: #d48f11; }

.red-700 { background: #bd800f; }

.red-800 { background: #a5700d; }

.red-900 { background: #8e600b; }

.red-A100 { background: #ffedcc; }

.red-A200 { background: #ffdb99; }

.red-A400 { background: #ffb733; }

.red-A700 { background: #cc8400; }

SassMeister-rendered.html

<s class='red-50'></s>
<s class='red-100'></s>
<s class='red-200'></s>
<s class='red-300'></s>
<s class='red-400'></s>
<s class='red-500'></s>
<s class='red-600'></s>
<s class='red-700'></s>
<s class='red-800'></s>
<s class='red-900'></s>
<br>
<s class='red-A100'></s>
<s class='red-A200'></s>
<s class='red-A400'></s>
<s class='red-A700'></s>