Choosing colours is always a fun part of any work that you do. You could be picking a single colour for a font family, or multiple colours for a site wide navigation bar, but the right colour can change a lot about the final outcome of whatever it is that you’re working on.
Our task was to design a colour picker that would be used on Firefox for Android and triggered through the HTML5 property, < input type=”color”/ >. While this seemed like a fairly straight forward request at first, the number of mock ups, revisions, and considerations quickly piled up. Knowing that this would exist on a touch device really helped narrow some design decisions down, but the wide range of use cases still added to the complexity of the task.
We thought the best way to handle this would be to divide the experience into two parts. The first part would be targeted at the quick and simple use cases by providing a set of harmonious colour presets derived from our “Design Values” booklet. The second part (or “Advanced” tab) would be focused on the ability to fine tune and even create a custom palette of colours so that you could see how all the colours worked together as a whole. Here’s what we came up with.
The noticeable colour wheel that rests on the top will be loaded with the same presets as the first tab and you can cycle through them while adjusting them to match your specific needs. Being on a touch device also means that it might be a bit frustrating at times to work a slider with great finesse and so we also have input boxes below that are designed to provide a level of specificity that some may want. As an added option, you can also switch to enter in RGB values rather than HSB/V ones by tapping the label “HSB” next to the three input boxes.
While the “Advanced” tab is anticipated for the Firefox 29 release on Android, the first step of this colour picker is available now. Stay tuned!