Create a Color Palette in Sass
$background: #f3f3f3;
$text_color: #888;
$link_color: #;
$primary_color: mix(#ff0000, #fefefe);
$secondary_color: complement($primary_color);
$highlighted_text_color: darken($text_color, 30%);
Light and Dark shades
Get a darker shade
color: darken($text_color, 20%);
OR
color: darken(#888, 20%)
will give you a 20% darker shade of $text_color
or #888
. If you use a variable, it’ll change the colors dynamically, meaning the light/dark shade will vary with the base color variable used.
Get a lighter shade
color: lighten($text_color, 20%);
OR
color: lighten(#888, 20%)
Save the light/dark shades as variables
$highlighted_text_color: darken($text_color, 30%);
Complementary Colors
complimentary colors are at the opposite ends on the color wheel.
$text_color: complement($background_color);
Desaturate a Color
$background: desaturate(#187, 30%)
Mix colors
$primary_color: mix(#ff0000, #fefefe);
And this is not all, there are other functions such as hue and opacity that you can also use in Sass for making you color palette.