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? 馃檪
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? 馃檪