EN
SCSS - darken color
0 points
In this article, we would like to show you how to darken color in SCSS.
Quick solution:
xxxxxxxxxx
1
.element {
2
background: darken(red, 30%);
3
}
Where:
darken()
- is a function that decreases lightness of acolor
by a fixedamount
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 between0%
and100%
.
Note:
The
darken()
function is deprecated. To make a color a certain percentage darker than it was before, usecolor.scale()
instead.
In this example, we present how to darken variable in which color value is stored.
xxxxxxxxxx
1
$background-primary: red;
2
3
.element {
4
background: darken($background-primary, 30%);
5
}