Thursday 1 April 2021

Colour Pick 2: History

Pick a colour, any colour. Now tell me what colour you've chosen.

It's surprisingly difficult to:

  1. Design a user interface to allow someone to intuitively pick a colour, and
  2. Come up with a description of colours that is meaningful to both humans and computers.
If we ask a browser to ask the user to pick a colour, we get a control like this:

Depending on your browser, you may get a dialog like this:

Colour input dialog from Google Chrome 89 (2021)

Chrome allows you to switch between RGB, HSL and hexadecimal input schemes. The "result" of the dialog is an HTML hexadecimal colour in the format "#rrggbb", e.g. "#DAA520".

Is that the state of the art? The Colour Pick experiment is a personal investigation into user interfaces like this.

A Bit of History

One of the first graphical editing programs was Sketchpad (1963) but this was designed for a monochrome vector display.

According to Alvy Ray SmithWilliam Kubitz (1968) and Joan Miller (1969) both created hardware with eight fixed colours, presumably black, blue, red, magenta, green, cyan, yellow and white.

Until SuperPaint (1973) appeared with its 256-entry, 24-bit RGB palette, the number of colours available meant that a "palette box" was sufficient for most software. SuperPaint introduced the ability to specify a colour via HSB (HSV) sliders:

SuperPaint tool palette (1973)

The first PC graphics software used palette boxes because of the colour limitations of early graphics cards such as CGA/EGA:

PCPaint+ (1985)

Meanwhile, Apple software was at a similar stage with MacPaint.

With the advent of 24-bit colour hardware on home and office computers, techniques for picking colours "caught up" with professional image- and video-editing systems. Mechanisms that used the RGB, HSV and HSL colour spaces became the norm:

Paint Shop Pro 5 (1998)

The CIE L*a*b* and related colour spaces started to appear in pickers too:

Adobe Photoshop (after 1990)

Although Microsoft remains stubbornly old-school:

Microsoft Paint for Windows 10 (2020)

Apple's current colour picker has multiple tabs; the first is an HSV circle picker:

Apple Color Picker (2020)

An interesting variation on the HSV circle is the discrete hexagonal palette popular on Windows:

Mechanika Design (2015)

GIMP has a number of built-in colour pickers. The "triangle wheel" is described in the documentation as based on HSV, but it looks more like HWB to me:

GIMP 2.10.22 (2020)

I've tried to systematically encapsulate as many of these ideas as possible in the Colour Pick web page.