Modifying Colours with SASS Color Functions

Really enjoy the aspect of changing colours by using SASS Color Functions with the lighten / darken and saturate / desaturate.

It makes creating colour consistency within the design easier to maintain while being more precise.

Saturate / Desaturate SASS Color Functions

Darken $my-colour by 20%

darken( $my-colour, 20% )

Lighten $my-colour by 10%

lighten( $my-colour, 10% )

Saturate / Desaturate SASS Color Functions

Saturate $my-colour by 20%

saturate( $my-colour, 20% )

Desaturate $my-colour by 10%

desaturate( $my-colour, 10% )

Some great Sass resources:

A visual guide to Sass & Compass Color Functions

Mixing Color for the Web with Sass