I'm designing a website, and I need to allow the user to change the color of some elements. I will have to implement a color picker. What kind of color picker is the most user friendly, and looks best?
I've got four different kinds so far, but if you have another better one, please let me know.
I'm fully flexible with how the design looks.
#1: Square Color Picker
#2: Color Wheel Color Picker
#3: Color Wheel - Square Color Picker
#4: Color Wheel - Triangle Color Picker
I assume this isn't a color theory app. If this is intended to support quick color selection with a sub-set of power users, a hybrid palette chooser / builder will work well.
Start with a palette-based chooser with reasonably sized swatches that simplifies the user's job of making a fast selection. Google has done a good job with this in Docs.
A reasonably broad but not overwhelming selection.
Thoughtful organization of options.
A customizable section for advanced users.
That last point accommodates more particular users who are ready to put in effort with your controls to get the palette they want.
One point of contention ...
For the record, I think Google's base colors (the second swatch row) are useless. How many of these would you actually want in your documents without modification? Here's a quick stab at how I'd change the base color selections. It's subtle, but I think the difference is meaningful in use.
You can't possibly anticipate every possible color a user may want, but you're on the right track with trying to support them. The familiar pattern (a clickable region to one side and a slider to the other) can take different forms, for better or worse.
The advanced picker model they chose lacks precision without improving usability. By using the main "stage" for hue and saturation, color selections are constrained into narrow vertical columns. Value on it's own requires very little precision but claims total ownership of the fine-grained slider control.
Highly scientific conclusion: I don't like it.
Dedicating the slider to hue, users can easily get to the general color they're after. The main stage is then available to fine tune saturation and value, easily creating subtle variation. This example comes from an OSX color picker plug-in I have installed on my Macs (with some modification).
Highly scientific conclusion: Mo betta.
Credit to @dberm22 for the insightful observation that this model should have the hue selector first to the left of the main stage. This creates a logical progression from the broad task (find the color), to the detailed (manipulate value and saturation), to the advanced (tweak or copy the numbers).
Also consider where your color values start when entering the creation state. Some pickers start with value and saturation at 0 (black) which results in a hue slider that appears to have no impact on the swatch. Starting with value and saturation somewhere in the upper right quadrant is likely to be closer to what the user wants.
However you format the control, make sure you store custom colors for users that take the time to generate them. Then they'll have a swatch library of their own over time and love your product even more!
Credit for the "easy is easy, hard is possible" philosophy goes to Larry Wall, creator of the Perl programming language.
I'm not sure there's any objective answer to this one, because it'll depend too much on the demographics of your clients. I'll give my subjective two cents though!
If they're not graphic designers or extremely tech-savvy, I'd want to go for the most intuitive solution, which to me is the second one. In my mind, the thoughts of a user would probably go "I want a red, maybe dark" , not "I want a dark colour, maybe red", so Colour > Shade works better for me than Shade > Colour or any of the circular ones in 3 or 4. Note that this relies on a left-to-right reading style to make sense to the user and may not work in right-to-left layouts like you'd find in Hebrew, for instance.
This reasoning may not be true, however - especially if you're picking text on a white background and you must choose a dark colour. If so, maybe horizontally flip the first one?
Additionally, I'd recommend having a bar for entering in hex codes. If you do know exactly what colour you want, it can be frustrating having to slide a selector around a large area when you could just type it in. Something like this:
download bmml source – Wireframes created with Balsamiq Mockups
Updating the graphical element updates the text immediately, and vice versa. This also is more accessible to people who can't click and drag easily, or have troubles with vision.
All the color pickers you list are based on variations of the HSL / HSV (hue, saturation, lightness / value) color representations. Thus, their main differences are not in color theory, but simply in the placement and shape of the controls.
That said, the second color picker in your list has one major disadvantage compared to the others: it doesn't have the hue axis separate from the others. Whereas all the other interfaces allow you to first choose a specific hue and then pick different tints and shades of that hue without affecting the base hue, the second color picker combines the saturation and the hue axes in the same color wheel, so that clicking the wheel will alter both the saturation and the hue.
Thus, trying to tint a color while maintaining the hue becomes a tricky exercise in visual acuity and hand-eye-mouse coordination. Since tinting and shading is a very common thing to do when working with colors and graphics, this could easily get very frustrating.
The first color picker in your list does have a separate hue axis, but it's compressed into a fairly small space, making it hard to accurately pick a specific desired hue just by clicking the range. It also fails to visually represent the circular nature of the hue axis, introducing an arbitrary discontinuity in the red part of the spectrum. Thus, I'd rate it as the second worst of the lot.
The last two color pickers are very similar in appearance and usability. I'd personally consider the last one a bit more natural and elegant, since the tint/shade space is fundamentally triangular in nature (consisting of combinations of three "pure" shades: black, white, and the pure saturated hue). That said, I don't see a practical usability difference between them.
Thus, I'd personally rate your color pickers in the following order: #4 (best), #3 (almost equal to #4), #1, #2 (worst).
Finally, I'd like to note that all the color pickers you've shown share a common flaw: since the HSL / HSV color models they're based on are simple reparametrizations of the RGB color space, which is not perceptually uniform, changing the hue affects the perceived lightness of the color. (You can easily see this by looking at the color wheels: the blue parts look a lot darker than the green and yellow parts.) Thus, while most of them make it easy to pick different tints and shades of the same hue, the converse — changing the hue of a color while maintaining the same perceived lightness and saturation — is quite difficult.
Alas, I'm not aware of any commonly used color picker designs that would avoid this issue, and there are some fundamental difficulties involved: if you e.g. start by picking a bright green color, and then try to change the hue to, say, blue, you'll find that it's not possible without either tinting or shading the color — a normal RGB monitor just can't produce a saturated blue with the same brightness as a saturated green, nor can standard RGB color spaces represent one. Thus, some kind of a compromise would have to be made in such cases.
@DavidGrinberg has a good point about most users not caring about having more than a small number of colors to choose from. However you can cater to both that group and people who want more choices with an interface supporting progressive enhancement.
Microsoft's provided one with Windows for many years. I had trouble finding newer screenshots in English; but the look and feel is the same at least through W7. For a greenfield design I'd probably reduce the total number or standard colors and hide the custom colors section on the small version unless the user had already defined at least one custom color.
If the user can select different colours for different elements, consider giving them a list of pre-defined palettes to choose from instead - reduces fiddly user interaction and the possibility of migraine inducing yellow and purple colour schemes
http://colorbrewer2.org/# ColorBrewer has such a list of palettes, in this case specifically for data visualisation, but there'll be others out there if these aren't suitable
Here are two ideas that are not complete proposals, just very rough sketches.
download bmml source – Wireframes created with Balsamiq Mockups
A hue-saturation-lightness/brightness/value/intensity/… representation of an RGB color space cube results in either (typically) a cylinder, a “hexalinder” (prism/cylinder with hexagon base), a hexagonal bipyramid or a sphere. For both kinds of bases, a disc or a hexagon, the plain coordinates can be specified by a combination of the red–cyan, green–magenta and blue–yellow axes. (It’s a flattened cube.) This combines angular hue and the radial saturation. The brightness, lightness or value, i.e. the height, is specified by the white–black axis.
Many HSB/HSL/HSV/HSI pickers don’t make the connection between visual selection and numeric values obvious. This sketch tries to show a way how this could be achieved.
Remember that this is an input widget so the output/export values are of secondary concern. Still, some people will want to start with a color that they know some numeric representation of: That’s what the tabs and numeric inputs are for and pasting would also work, of course.
Several answers here propose pickers with separate numeric controls for RGB/HSL. These controls are good to have, but not very visual and require some trial-and-error to operate. Below is a picture with dual-mode visual+numeric controls for RGB/HSL depicted on the right.
When you operate one of the sliders, the gradient on the others should change. This gives six dimensions of visual support for changing the color, as opposed to one or two in other pickers (the pickers generally have three dimensions, but only one or two of them are painted with the color being operated).
You can include them with any other picker type, space permitting, but it might work best with some sort of palette and a list of recently picked colors.
(source: eltima.com)
B appears twice, though, once horizontal and once vertical.
Not complete as it is lacking the ability to use hex, enter the channels separately and also to remember colors.
It has :
It is rather slim, so not really a Color Dialog but a Color Picker Tool.
