High-level color.lighten() color.darken() methods about color.js

[LeaVerou]

After exploring this a bit, this is a very non-trivial problem. Removing the milestone from this (which was incorrect anyway, since Public release happened 2 years ago!)

[svgeesus]

Sass color functions lighten() and darken() vs. mix() with black and white

Sass lighten
Sass darken

These increase or decrease HSL Lightness by a fixed amount. Therefore they will drive fairly light or fairly dark colors to white or black respectively. The amount of visible lightening and darkening also depends strongly on the hue.

Because darken() is usually not the best way to make a color darker, it’s not included directly in the new module system. However, if you have to preserve the existing behavior, darken($color, $amount) can be written color.adjust($color, $lightness: -$amount).

// #036 has lightness 20%, so when darken() subtracts 30% it just returns black.
@debug darken(#036, 30%); // black

// scale() instead makes it 30% darker than it was originally.
@debug color.scale(#036, $lightness: -30%); // #002447

[svgeesus]

Looking at that one in Lab, #036 is lab(20.75% 1.89 -34.99) so 30% darker is 20.75 * .7 = 14.525 so lab(14.525% 1.89 -34.99) which is color(srgb -0.0705 0.1486 0.34) which when gamut mapped becomes rgb(3.32% 14.67% 28.97%) #08254A.