Sass color lighten/darken function

Question

so I can not understand sass lighten/darken color function.

I get it that it changes hue/saturation/lightness but how can I know what will be the hex value after I use this function?

what will be the output color of lighten/darken?

Answer 1

Lighten and darken functions are in the process of being deprecated in Sass with the new module system. They did not scale colors in an expected manner and it has been recommended to stay away from them now. The sass:color module with color.adjust() is what you should be using now.

Before the recent module update I used my own functions that looked like this:

/// Incrementally lighten a color in a more effective way than with lighten()
/// @param {Color} $color - color to tint
/// @param {Number} $percentage - Percentage of white in the returned color
/// @return {Color} - The lightened color
@function tint($color, $percentage) {
  @return mix(#fff, $color, $percentage);
}

/// Incrementally darken a color in a more effective way than with darken()
/// @param {Color} $color - Color to shade
/// @param {Number} $percentage - Percentage of black in the returned color
/// @return {Color} - The darkened color
@function shade($color, $percentage) {
  @return mix(#000, $color, $percentage);
}

However now it is recommended to use the color module. Information on the color module is here: https://sass-lang.com/documentation/modules/color and a primer on the new module system can be found here: https://css-tricks.com/introducing-sass-modules/

Using the functions in the color module will provide more expected and predictable outputs, but if you need to know the exact hex code of the output color you can either figure out how to calculate that in your head, or you could use the @debug feature (https://sass-lang.com/documentation/at-rules/debug) or play around with a live compiler on a snippet of code.