color

A color field provides a colorpicker interface to the editor for choosing/inserting a color. Colors are saved as strings with a preferred format set in the optional spectrumOptions configuration object. The default is hex.

Valid formats include name, hex, hex8, rgb, hsl, and hsv.

The colorpicker interface is powered by Spectrum and you can provide a custom configuration passing a spectrumOptions object as part of the field. Options and documentation for Spectrum here. (opens new window)

Example

{
  type: 'color',
  name: 'bgColor',
  label: 'Background Color',
  spectrumOptions: {
    showPaletteOnly: true,
    showPalette:true,
    allowEmpty:true,
    palette: [
        ['black', 'white', 'blanchedalmond',
        'rgb(255, 128, 0);', 'hsv 100 70 50'],
        ['red', 'yellow', 'green', 'blue', 'violet']
    ]
  }
}

Settings

Property	Type	Default	Description
name	string		Sets the name of the field in the database
label	string		Sets the label of the field that the user sees
spectrumOptions	object	See below	Provide custom configuration to the colorpicker interface
required	boolean	false	If true, the field is mandatory
contextual	boolean	false	If true, it will prevent the field from appearing in a dialog box
type	string		Specifies the field type
readOnly	boolean	false	If true, prevents the user from editing the field
help	string		Help text for the field that will appear with the field's label
htmlHelp	string		Help text with support for HTML markup

spectrumOptions default value is:

{
  showButtons: true,
  showAlpha: true,
  preferredFormat: 'hex',
  showInput: true,
  allowEmpty: true
}