What are lighten() and darken() functions good for in Sass?

Experience Level: Junior
Tags: Sass

Answer

The lighten() function makes the color you provide lighter by number of percent you provide. The darken() function makes the color you provide darker by number of percent you provide.

Both of these functions help quite a lot when you design components and derive hover colors from the input color.

Sass

$inputColor: red;

.tint1 {
  background: $inputColor;
}

.tint-d1 {
  background: darken($inputColor, 10%);
}

.tint-d2 {
  background: darken($inputColor, 30%);
}

.tint-d3 {
  background: darken($inputColor, 50%);
}

.tint-l1 {
  background: lighten($inputColor, 10%);
}

.tint-l2 {
  background: lighten($inputColor, 30%);
}

.tint-l3 {
  background: lighten($inputColor, 50%);
}

CSS

.tint1 {
  background: red;
}

.tint-d1 {
  background: #cc0000;
}

.tint-d2 {
  background: #660000;
}

.tint-d3 {
  background: black;
}

.tint-l1 {
  background: #ff3333;
}

.tint-l2 {
  background: #ff9999;
}

.tint-l3 {
  background: white;
}
Related Sass job interview questions
Sass for beginners
Sass for beginners

Are you learning Sass? Try our test we designed to help you progress faster.

Test yourself