Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
LeaVerou opened this issue Apr 26, 2020 · 3 comments
Open

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

LeaVerou opened this issue Apr 26, 2020 · 3 comments
Assignees
Labels
enhancement New feature or request

Comments

@LeaVerou
Copy link
Member

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

@LeaVerou LeaVerou added the enhancement New feature or request label Apr 26, 2020
@LeaVerou LeaVerou added this to the Public release milestone Apr 26, 2020
LeaVerou added a commit that referenced this issue May 10, 2020
Rel #8  Currently just linear, but we can improve.
@svgeesus
Copy link
Member

svgeesus commented Feb 16, 2021

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
Copy link
Member

svgeesus commented Feb 16, 2021

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
Copy link
Member Author

LeaVerou commented Feb 9, 2024

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

@LeaVerou LeaVerou removed this from the Public release milestone Feb 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants