SASS’s color functions make adjusting color in CSS easy. There are several, including operations to adjust the conventional hue, saturation, and value.

SASS's color functions

lighten($color, $amount)

Makes a color lighter.

darken($color, $amount)

Makes a color darker.

adjust-hue($color, $degrees)

Adjusts the hue of a color.

saturate($color, $amount)

Makes a color more saturated.

desaturate($color, $amount)

Makes a color less saturated.

Color function used with a @for loop

Supply a base color to this for loop

// base color
$redBase: #DC143C;
// make 4 more value swatches of red
@for $i from 1 through 5 {
  div:nth-child(#{$i}) {
    background-color: darken($redBase,5*$i);
  }
}

Output CSS:

div:nth-child(1) {
  background-color: #c51236; }

div:nth-child(2) {
  background-color: #ad102f; }

div:nth-child(3) {
  background-color: #960e29; }

div:nth-child(4) {
  background-color: #7f0b22; }

div:nth-child(5) {
  background-color: #67091c; }

And will results in these colors. The first swatch is the base color.

Here is a codepen of a more complex example. By supplying only one color, many more can be generated.

Check out this Pen!

A more practical use is for buttons

A more practical use is for something like a CSS3 button. The idea would be to supply 1 base color and let a mixin take care of the highlights, shadows, and hover colors. In the codepen below, each button is only supplied a base color. The highlights, shadows, and hovers are all created with darken and lighten functions.

Check out this Pen!

Useful Links