search

color-js / color.js

Color conversion & manipulation library by the editors of the CSS Color specifications
https://colorjs.io
MIT License
1.9k stars 82 forks source link

High-level color.lighten() color.darken() methods #8

Open LeaVerou opened 4 years ago

LeaVerou commented 4 years ago

Possibly using some sort of sigmoid function, per @svgeesus recommendation

svgeesus commented 3 years ago

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 commented 3 years ago

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.

LeaVerou commented 8 months ago

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!)