[Edit]

SCSS - darken color

1 contributors

2 contributions

0 discussions

0 points

Created by:

741

In this article, we would like to show you how to darken color in SCSS.

Quick solution:

xxxxxxxxxx
 
.element {
    background: darken(red, 30%);
}

Where:

darken() - is a function that decreases lightness of a color by a fixed amount value,
red - is a color variable, it can be any color value - rgb / rgba / hex / color name / etc.,
$amount - is a percentage value by which the lightness of the color will decrease, it must be a number between 0% and 100%.

Note:

The darken() function is deprecated. To make a color a certain percentage darker than it was before, use color.scale() instead.

Practical example

In this example, we present how to darken variable in which color value is stored.

xxxxxxxxxx
 
$background-primary: red;
​
.element {
    background: darken($background-primary, 30%);
}