color-lighten

color-lighten(
	$color,
	$offset
);

Description

This functions allows you to take a color, compare its lightness to a specific percentage, and lighten it if it is darker than that value.

Parameters

$color (color)
The color you want to target.

$offset (percentage)
The offset that you want to compare the color's lightness against, with 0% being black, and 100% being white.
Example color-lighten($primaryColor, 20%) will lighten the $primaryColor if it is darker than 80%.
Default: 10%

Return

(color) Lightened $color.

Examples

Ensure that the background color of an element is very light

.foo {
  background-color: color-lighten($primaryColor, 92);
}

What’s Next