Create a Color Palette in Sass

1$background: #f3f3f3;
2$text_color: #888;
3$link_color: #;
4$primary_color: mix(#ff0000, #fefefe);
5$secondary_color: complement($primary_color);
6$highlighted_text_color: darken($text_color, 30%);

Light and Dark shades

Get a darker shade

1color: darken($text_color, 20%);

OR

1color: 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

1color: lighten($text_color, 20%);

OR

1color: lighten(#888, 20%)

Save the light/dark shades as variables

1$highlighted_text_color: darken($text_color, 30%);

Complementary Colors

complimentary colors are at the opposite ends on the color wheel.

1$text_color: complement($background_color);

Desaturate a Color

1$background: desaturate(#187, 30%)

Mix colors

1$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.