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 cp.css, then add them to your page:
  <script src="cp.js"></script>
  <link rel="stylesheet" href="cp.css">

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:


Change events are executed on the input field whenever the colour changes.

The selection of colours may be changed by editing or overriding the global 'cp_grid' 2D array.

A colour of '' represents no colour.


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: 17 June 2019