to-color icon indicating copy to clipboard operation
to-color copied to clipboard

Add a color limiter option

Open tristen opened this issue 1 year ago • 3 comments

This PR adds a new limit option that limits the hue range of a color passed.

const color = new toColor('hi', { limit: ['blue'] });

The goal is to combat issues where blue in particular - which natively has low luminance - has poor contrast against dark colors:

Screenshot 2024-04-23 at 1 09 53 PM

tristen avatar Apr 23 '24 17:04 tristen

Maybe instead of subjective bounds we could use something like sinebow or cube helix rainbow to ensure all hues have the same perceptual brightness and build upon that?

Edit: Actually nevermind, it's not exactly uniform with respect to L 🤔

It just seems that a better approach would be given a hue to calculate other values in a way that gives us predictable L, whatever hue we choose

AlexanderBelokon avatar Apr 24 '24 01:04 AlexanderBelokon

@AlexanderBelokon to-color is already pretty subjective with respect to bounds. I'd prefer this implementation to be a starting place that we can rethink/improve on?

tristen avatar Apr 24 '24 01:04 tristen

I don't feel good about how close 6th and 7th colors are with the current limit:

image

let me think about how we can improve that 🤔

AlexanderBelokon avatar Apr 24 '24 15:04 AlexanderBelokon

@AlexanderBelokon instead of halving the hue, let's try calling pickHue again. Back to you!

tristen avatar May 22 '24 17:05 tristen