Designing a better color picker
Recently I took on the challenging task of designing a color picker for the Canvas remix editor. The pre-fab color picker we had been using was clearly not working out (most users did not stray from the default #F00 red). The problem is that many of the people who are using the remix editor have never even touched a photo editing program before, while others are professional graphic designers. We needed to design for both novice and advanced users, and we needed to do it in a small enough space to fit into our remix editor’s toolbar.
To define any color in the full range of over 16 million colors your computer can reproduce, you need three values: either red/green/blue or hue/saturation/value. So while we can offer novices a color palette to choose from, the advanced users need fine control over at least three values to create any color they need.
Above is the default color picker in Photoshop. It’s a good example because it allows definition by HSV (also called HSB) and RGB, and it allows the values to be manipulated by entering values in a text field, or by dragging sliders.
Seeing as there are three vectors that need to be manipulated when selecting a color, you can give each it’s own slider, or you can combine two of the three to reduce the amount of clicks required by the user.
Photoshop allows you to adjust which two you combine, but the default as shown above is to combine saturation and value with hue off to the side. This is the best solution because saturation and value map at a much closer ratio. Here’s what MS Paint’s color picker looks like with hue combined with saturation and value pulled out:
The problem is that when selecting your color, you’re often left trying to drag carefully in one direction without deviating in the other. Hue packs a lot of information into it’s single vector, so ideally the user would have more precise control over hue than he has over saturation and value.
So if we combine saturation and value and separate out hue, we need to make the hue slider larger, but without taking up much more space. Deviant Art’s Muro image editor has an interesting solution to the problem:
Here they’ve given the hue selector as much space as the saturation and value combined. The problems with this approach is that now we’ve doubled the space the color picker is taking up, and we’re dragging in a circular motion, which is more cumbersome than a vertical or horizontal drag. They’ve significantly increased the space being taken up, but we’re not seeing a significant enough increase in precision of hue selection.
The solution I arrived at is similar in that the hue is being wrapped around in a loop, but it’s been wrapped around the saturation and value slider so that when dragging the hue slider you are simply making vertical and horizontal drags.
So now we have a color picker that satisfies all our needs. The color palette is immediately available for novice users. Advanced users can either type a hexadecimal RGB color into the text input (which doubles as the color preview), or click on it to open and use the advanced color picker which gives appropriately precise controls over hue, saturation and value. And it all sizes down to 150 pixels reasonably.
It could still stand to be prettied up, but I’m pretty happy to have created a color picker that I enjoy using more than Adobe’s.
