[Edit]

SASS - lighten color

1 contributors

2 contributions

0 discussions

0 points

Created by:

360

In this article, we would like to show you how to lighten color in SASS.

Quick solution:

xxxxxxxxxx
 
lighten($color, $amount)

Where:

lighten() - is a function that increases lightness of a color by a fixed amount value,
$color - is a color variable or any color value - rgb / rgba / hex / color name / etc.,
$amount - is a percentage value by which the brightness of the color will increase, it must be a number between 0% and 100%.

Practical examples

In this example, we lighten the red color by 30%. The result is pink color.

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

rgb:

xxxxxxxxxx
 
.element {
    background: lighten(rgb(255, 0, 0), 30%);
}

hex:

xxxxxxxxxx
 
.element {
    background: lighten(#FF0000, 30%);
}

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

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