Form control: Simple colour picker

The simpleColourPicker control allows users to pick a colour from a pre-defined palette, and can return it as an RGB or hex value.

The SimpleColourPickerService exposes methods for creating and registering palettes, and other helper methods for working with colour values.


palette (optional) Name of the pre-defined palette to use. Built-in palettes are "web64" (default), "web216", and "material". You can register additional palettes using the registerPalette() method. If the palette you specify is not found, the default palette will be used.
colours (optional) Alternatively, you can define a list of colours directly in the form XML file. This should be a pipe-separated list of RGB (e.g. 100,150,200) or hex (e.g. cc601a or fff) values - or even a mixture of the two.
rowLength (optional) The maximum number of colours displayed on each row of the colour picker. Default is 16.
colourFormat (optional) "hex" (default) or "rgb". The format in which you would like the selected colour value to be returned.
rawValue (optional) True or false (default). Indicates whether to return the colour as a raw value (e.g. ffcc00 or 0,150,255) or as a valid CSS value (e.g. #ffcc00 or rgb(0,150,255)). You might want to set this to true if, for example, you will be using the selected RGB value as the basis for an rgba() value.
showInput (optional) True or false (default). Indicates whether you want the selected colour to be displayed in an input field below the colour swatch, or just show the swatch.


<field name="colour" control="simpleColourPicker" palette="material" showInput="true" colourFormat="rgb" />

Screenshot of a simple colour picker

<field name="colour" control="simpleColourPicker" colours="000|333|666|999|ccc|fff" rowLength="3" />

Screenshot of a simple colour picker