If you're considering automating color variations, I suggest exploring the built-in color functions offered by Sass (http://sass-lang.com/documentation/Sass/Script/Functions.html).
Check out this example utilizing a color map (which I find simpler to use compared to a list):
https://i.sstatic.net/t2dtd.png
$colors:(
green : #00A87B,
yellow : #FFBB3B,
red : #FF4633,
blue : #436FB6,
white : #FFFFFF,
black : #000000
);
@each $name, $color in $colors {
.color {
&-#{$name}{
background-color: $color;
// create variations (if not black or white)
@if $color != white and $color != black {
&.extra-light { background-color: mix($color, white, 25%); }
&.light { background-color: mix($color, white, 50%); }
&.semi-light { background-color: mix($color, white, 75%); }
&.extra-dark { background-color: mix($color, black, 25%); }
&.dark { background-color: mix($color, black, 50%); }
&.semi-dark { background-color: mix($color, black, 75%); }
}
}
}
}
CSS output
.color-green { background-color: #00A87B;}
.color-green.extra-light { background-color: #bfe9de;}
.color-green.light { background-color: #80d4bd;}
.color-green.semi-light { background-color: #40be9c;}
.color-green.extra-dark { background-color: #002a1f;}
.color-green.dark { background-color: #00543e;}
.color-green.semi-dark { background-color: #007e5c;}
.color-yellow { background-color: #FFBB3B;}
.color-yellow.extra-light { background-color: #ffeece;}
.color-yellow.light { background-color: #ffdd9d;}
.color-yellow.semi-light { background-color: #ffcc6c;}
.color-yellow.extra-dark { background-color: #402f0f;}
.color-yellow.dark { background-color: #805e1e;}
.color-yellow.semi-dark { background-color: #bf8c2c;}
.color-red { background-color: #FF4633;}
.color-red.extra-light { background-color: #ffd1cc;}
.color-red.light { background-color: #ffa399;}
.color-red.semi-light { background-color: #ff7466;}
.color-red.extra-dark { background-color: #40120d;}
.color-red.dark { background-color: #80231a;}
.color-red.semi-dark { background-color: #bf35226;}
.color-blue { background-color: #436FB6;}
.color-blue.extra-light { background-color: #d0dbed;}
.color-blue.light { background-color: #a1b7db;}
.color-blue.semi-light { background-color: #7293c8;}
.color-blue.extra-dark { background-color: #111c2e;}
.color-blue.dark { background-color: #22385b;}
.color-blue.semi-dark { background-color: #325389;}
.color-white { background-color: #FFFFFF;}
.color-black { background-color: #000000;}
Function-oriented approach:
$colors:(
green : #00A87B,
yellow : #FFBB3B,
red : #FF4633,
blue : #436FB6,
white : #FFFFFF,
black : #000000
);
@function get-color($color, $variant: null){
$color: map-get($colors, $color);
@return map-get((
extra-light: mix($color, white, 25%),
light: mix($color, white, 50%),
semi-light: mix($color, white, 75%),
semi-dark: mix($color, black, 75%),
dark: mix($color, black, 50%),
extra-dark: mix($color, black, 25%)
),$variant) or $color;
}
.class { color: get-color(green); }
.class { color: get-color(green, semi-light); }
.class { color: get-color(yellow, dark); }