I've been working at this for a few days but I struggle to mentally visualise what I'm actually trying to do, so I'll start from the beginning.
I'm essentially trying to create an algorithm that will adjust a button's background color when hovered - if the background color is light to begin with, I want to make it darker and if the button is dark to begin with, I want to make it lighter.
I'm using the Color NPM package, which should make things easier.
My goal is to work with just the lighten method, because I can pass a negative number to the method to make the color darker. This also allows me to avoid using an if condition like so:
if (Color(prev).isLight()) {
const value = Math.pow(0.03, Color(prev).luminosity() - 0.1);
const scale = Math.min(0.15, value);
return Color(prev).darken(scale).hex();
} else {
const value = Math.pow(20000, 0.02 - Color(prev).luminosity());
const scale = Math.min(2.5, value);
return Color(prev).lighten(scale).hex();
}
Using trial and error, and an if condition, I was able to get something that "works", as shown above, but it is not elegant, nor is it really clear what's going on, it's just a bunch of random nonsense that happens to achieve something similar to what I want.
To start with some basic sample as a control measurement, I can see that to adjust the color "white" (with a luminosity value of 1), I can apply lighten(-0.15) to change the color a nice noticeable amount. And likewise, on the color "black" (with a luminosity value of 0), I can apply lighten(2.5) to change the color to a nice noticeable difference.
So if I were to use just the luminosity value of the input color, I can find some way to modify it according to this scale, but it turns out that in order to get the best result, I also need to take into account the color's saturation. Two colors can have the same luminosity value, but if you apply the same amount of lighten to them, one will visually appear to become brighter than the other, if it has a different saturation.
So I need to come up with an algorithm that takes two dimensions of color into account (the luminosity and the saturation) and return a number between around -0.15 and 2.5 (rough estimates) which I can then apply to the lighten method to adjust the color appropriately (the scale should be logarithmic rather than linear - a color with a luminosity of 0 may require an increase in brightness of 2.5, but a color with a luminosity of 0.2 only seems to require an increase in brightness of around 0.2).
I'm terrible with maths and algorithms, and was hoping someone could help me! Using the Color NPM package I have some useful measurements:
const saturation = Color(prev).hsl().color[1];
const luminosity = Color(prev).luminosity();
const contrast = Color(prev).contrast(Color('white'));
I figured the saturation in conjunction with the luminosity is enough, but the contrast measurement may also be helpful.
Thanks in advance.