Colour Picker

(aka: color picker, colorpicker, colourpicker, colour selector and colorselector)

Most types of information are handled well by input fields, textareas, dropdown menus and checkboxes. But selecting a colour isn't one of them. This widget allows one to easily add colour selection to a form.


Foreground colour:
Background colour:

(look at the URL after submitting)


Installation is easy. Just download cp.js (6KB) and 1x1.gif, then place normal input boxes in your form wherever you want colours:
  <input name="mycolour" id="mycolour" value="ff00ff">
Follow this by a line of JavaScript which will convert the input boxes into colour pickers:
  <script src="cp.js"></script>


The JavaScript 'onchange' property on the input field will be called if the colour changes.

Older browsers (Netscape 4, IE 4.0) will gracefully ignore the colour picker, leaving the original input box. Therefore it might be a good idea to add 'maxlength=6 size=6' to the input box so that these browsers look right.


The colour value must be a six-character hex code (e.g. '0088ff'). Other formats will not work (e.g. 'green', '#0088ff', '08f').

This is a paletted selection tool, designed for average users. If you want an infinite number of colours for professional users, then separate RGB scrollbars might be better.

Last modified: 3 January 2016