What do the Sass lightness, lighten, and darken functions actually do?

2
votes

I am confused about the difference between the lightness, lighten, and darken functions. How do they change color value? Is it change color opacity/alpha value? What the difference between them?

1
htmlcsssass
Why don't you just try it out? – Lars Beck
i tried but still confusing – Ismail Farooq

1 Answers

4
votes

With Darken and Lighten, the color which you use gets parsed into HSL. HSL is a different color system which gets the Color from three different values "Hue", "Saturation" and "Lightness". In the Lighten or darken Function, the Lightness of the HSL Color gets manipulated.

The lightness function returns the "lightness" value of the calculated HSL Color.

You can read a bit about SASS Color functions here