This site runs best with JavaScript enabled.

SCSS lighten / darken

Kevin Beck

June 04, 2019


The CSS preprocessors Sass and LESS can take any color and darken() or lighten() it by a specific value.

darken( $base-color, 10% );
lighten( $base-color, 10% );

And a few extra.

saturate( $base-color, 20% );
desaturate( $base-color, 20% );
adjust-hue( $base-color, 20% );
rgba( $base-color, .7 );
tint( $base-color, 10% );
shade( $base-color, 10% );

Sources