Improve the UX of the hue picker

[mindplay-dk]

I recently learned about the oklch color system - from a UX perspective, what I like about oklch is how it's tuned to perception, and the actual problem that this potentially solves.

I was wondering if maybe we can improve this experience:

That's the color picker on top with the classical RGB gradient rainbow.

Below that is my rendering of an oklch rainbow.

This never occurred to me before I learned about oklch, but the classical RGB gradient rainbow makes a terrible color picker - it's almost impossible to select a pure yellow or cyan, or the colors close to them, they're like 1 pixel wide in that UI. 😅

The l/c components of this oklch rainbow here were hand picked.

I've also tried to hand pick an RGB sequence that includes all the R/G/B extremes - this is totally hand picked for my own monitor and my own personal eye sight, which, I know, not very scientific, but...

Anyway, here's the oklch and my hand-tuned RGB rainbow, side by side:

Here's the code:

https://jsfiddle.net/mindplay/01o9tsu5/

What do you think, could we create a better color picker by hand tuning the colors stops?

I would need to refine these choices on a calibrated monitor, but I think this is already better than the classical RGB rainbow, right?

I think I could cram it down to size, so we don't bloat the package - get the linear interpolation working correctly and so on.

If there's any interest? 🙂

[mindplay-dk]

Okay, so I figured out how to compute a proper OKLCH based RGB rainbow. 🤓

The bottom one is the real deal - it's the whole RGB spectrum laid out by OKLCH perceived contrast.

It's a lot of math, so I extracted a precomputed table and wrote a JS function to look up the RGB value:

https://jsfiddle.net/mindplay/01o9tsu5/4/

If you're curious, here's how it was computed.

It comes to around 600 bytes minzipped

Is this package still maintained?

Would you accept a PR to add this, perhaps as a separate feature? 🙂