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

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;
}