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%);


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%);


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);

complimentary colors - color wheel

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.