Existing color picker is hard to use accurately

[nspringer-trimble]

The current color picker makes it hard to change colors incrementally and precisely. It's very "squirrely" and things jump around a lot. It's even hard to pick white because there is no padding around the palette. Also there is no channel slider (R,G,B, H, S, V). I suggest switching to https://github.com/mapbox/react-colorpickr It is nicer to use and clearly has been designed with the subtleties of map designing in mind.

[orangemug]

Thanks @nspringer-trimble some initial thoughts.

So I think the reason the other color picker is "squirrely" is just the nature of the size of the picking surface. I kind of think this is an advantage as well as an issue. For people with low mobility the size of the react-colorpickr is a concern for me. It also has a few keyboard accessibility issues, if you try and tab round it although more of the picker interface is accessible, it's also more unusable for example the switch between HSL and RGB loses tab position.

It's even hard to pick white because there is no padding around the palette.

react-colorpickr has the same issue you describe does it not? As you still need to be super accurate to actually hit white. You just end up hitting the padding instead, which is a slight advantage, however I think click + drag is probably how most people learn to use color pickers anyway.

I'm also a little concerned by the mode selection of react-colorpickr confusing new users. Actually I was super confused what had happened when I clicked the 'r' radio button. Although I totally get why that would be useful, it'll probably put new users off.

However I do agree we could do with making the color picker better, maybe we could start with listing all the things we want from a color picker instead.

I'll start

• Accessible
• Larger picker
• Easy to use
  • Kids can use Maputnik https://twitter.com/jonahadkins/status/1121803336024502277, that's super cool, lets not make it too complicated to start with

Other things to consider

• LCH is coming http://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/ we should probably consider that if we're going to change the picker, or make something more custom. Although it probably shouldn't be a blocker

[nspringer-trimble]

1. It absolutely has to have channel selectors AND channel slider for subtle changes in both RGB and more importantly HSV/L mode, the picker surface is the worst way for changing a color except to get starting point.
2. The field values have to accept arrow keys as incrementors. I know they do now but the code is not responsive and the numbers reset themselves or jump around if you tap the keys too fast. A very common use case is to tweak the L or V value in (HSL/HSV) mode.
3. We could have basic/advanced modes for the picker maybe for new users, but the setting would need to persist.

[orangemug]

It absolutely has to have channel selectors AND channel slider for subtle changes in both RGB and more importantly HSV/L mode, the picker surface is the worst way for changing a color except to get starting point.

Anybody reading: If anybody else needs this, can they please add a comment.

Maybe as a start we survey the current market of color pickers in apps. I happy to go through a few see that the general trend is. As a start list QGIS, Arc*, Photoshop, Figma, Sketch, ...

The field values have to accept arrow keys as incrementors.

Agree

I know they do now but the code is not responsive and the numbers reset themselves or jump around if you tap the keys too fast.

Hmm not seeing this, can you post a small video/gif?

[nspringer-trimble]

FWIW this is in "desktop" https://gyazo.com/09cabcf185ef1dddfab38cc31faa418b

[pathmapper]

It's even hard to pick white

White is always in the top left corner. Instead of picking it, I drag the selector outside the picker over the top left corner:

From react-colorpickr I really find the reset button in combination with before/after color indicator useful. I often find myself trying out a slightly different color for a layer but in the end I'm not happy with the result. To restore the original color I have to hit ctrl + z a lot to undo the changes or reload the entire style. Maybe such a functionality would be possible also with our current color picker: http://casesandberg.github.io/react-color/

the numbers reset themselves or jump around if you tap the keys too fast.

Could it be that this happens because you are also tapping the right/left arrow keys? If I only tap the top/down arrow keys I can't replicate.

Here is another ticket related to the color picker: https://github.com/maputnik/editor/issues/371

[nspringer-trimble]

You should test all of this is desktop while it is constantly trying to write changes

[kateler]

It absolutely has to have channel selectors AND channel slider for subtle changes in both RGB and more importantly HSV/L mode, the picker surface is the worst way for changing a color except to get starting point.

Anybody reading: If anybody else needs this, can they please add a comment.

I second @nspringer-trimble on this. The picker surface is just the starting point. Most of my fine adjustments happen by adjusting channel values (both in RGB and HSV).

[orangemug]

Hey thanks @kateler for the feedback.

So I think I'm on board with the more advanced color picker, however I think we'll need something that either

1. Is simple to use initially and obvious when we change modes, for most users the radio buttons next to r/g/b will not be obvious what they are doing.
2. Alternatively we could have 2 color pickers a simple, and an advanced one. I'm a little nervous about that as it's just more to maintain, however I guess it's unlikely to change much over time, so maybe.

With regards to react-colorpickr there are some accessibility concerns keyboard navigation isn't well supported. My stance on accessibility is we don't add anything that makes our accessibility issues worse than where we're at currently. I'm also proactively working to fix those issues for the next release. However we could fix those issues in react-colorpickr they don't look too serious (to be confirmed)

Thoughts?

[nspringer-trimble]

I am still in strong favor of switching to react-colorpickr

[pathmapper]

Another enhancement suggestion related to the color picker is in https://github.com/maputnik/editor/issues/744.