SCSS - darken color

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.

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%);

}

1. Sass: sass:color - darken