This is an investigation into colour-picking user interfaces. It is part of a larger series of experiments concerning colour.

Browser Input

Most browsers provide a popup dialog to allow the user to specify a colour.

The precise details are implementation dependent. For example, recent versions of Safari only supported textual hexadecimal input.

Numeric Input

Most colour spaces are three-dimensional: three values must be specified to identify the precise colour. Numeric input boxes are useful if you want the user to be able to provide accurate values. They are far from intuitive and provide virtually no useful feedback. The red/green/blue (RGB) colour space, or, more formally for web applications, the sRGB colour space, is widely used. The "Numeric RGB" panel below allows you to enter "out of gamut" values beyond the usual 0% to 100% range.

The next three panels use what I informally call the hexacone colour models: HSV a.k.a. HSB (1978), HSL (1978) and HWB (1996).

Finally, we have the CIE XYZ (1931), CIE L*a*b* and CIE L*u*v* (1976) colour models and their derivatives:

Sliders

Horizontal and/or vertical sliders provide the more intuitive mechanism for selecting a value within a range. The panels below provide graphical cues as to what each slider does, but the slider backgrounds do not respond to the current inputs.

Much better feedback is provided if the slider backgrounds react to the values of the other inputs.

Squares

An alternative to using three one-dimensional sliders is to use one slider plus one two-dimensional square:

Again, we can make the sliders and squares reactive:

The RGB colour space doesn't seem to be particularly amenable to this mechanism. However, it is very common to see the hexacone colour spaces deployed in this form with the slider controlling hue:

Note that for HWB, the full square is not necessary to capture all colours; the lower-right triangle is greyscale only.

Circles and Wheels

The HSV colour space is sometimes presented as a circle with the angle (clockwise from the top) being the hue and the distance from the centre mapped to the saturation. The value is placed in a separate slider. The variation where the hue and value are mapped to the circle with the saturation on the slider is less common.

The HSL colour space is often plotted as a hue wheel with an inner square capturing the saturation and lightness. A variation is to have the saturation and lightness plotted on a diamond that rotates with the hue.

Similarly, HWB is often plotted as a hue wheel with an inner, rotating triangle for the whiteness and blackness.

CIE Spaces

CIE's phenomenological colour spaces are problematic for user interfaces because of their complex gamut boundaries. Below are three panels with the white point indicated by the white crosshair. For "xy/Y", the darker grey "horseshoe" represents the 1931 chromaticity region; the sRGB gamut is much smaller. The darker squares in the "L*a*b*" and "L*u*v*" panels cover -100 to +100; the sRGB gamut goes beyond this in places.

For the cylindrical variants, we plot the lightness and chroma on a square within a hue wheel.

It is important to remember that H_HSV is not the same as h_ab, which, in turn, is not the same as h_uv. Consequently, the hue wheels for the three schemes are subtly different.

Names

Picking colour names from a dropdrown list can be cumbersome, particularly if the number of terms is great (e.g. X11 colour names). However, a scheme with base terms and modifiers can describe a reasonable number of colours using limited screen real estate. With only six adjectives and fifteen nouns, HWB-91 is a good candidate. If we organise the nouns into a "hue hexagon" we get the following panel:

There are obvious localisation difficulties that number-based schemes don't exhibit, but, in English, you can read off the colour description from left to right, e.g. "light orange". As an added advantage, it may also be useful for colour-blind users, as, apart from feint shading, the interface is entirely text-based.