color-darken

color-darken(
	$color,
	$offset
);

Description

This functions allows you to take a color, compare its lightness to a specific percentage, and darken it if it is lighter 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-darken($primaryColor, 20%) will darken the $primaryColor if it is lighter than 20%.
Default: 10%

Return

(color) Darkened $color.

Examples

Ensure that the text color of an element has at least 80% darkness

.foo {
  color: color-darken($primaryColor, 80);
}

What’s Next