Color Field × Mattrbld

The Color field allows picking a colour from a colour picker or a predefined palette.

Editing UI Widget

This field is displayed as a either a colour picker or a dropdown, depending on whether or not the paletteOnly option is set to true.

The Color field outputs the color as a string, either as hex or rgba depending on the format option.

The following options are available for this field (default values shown):

{
  "format": "hex",
  "removable": false,
  "useBrandPalette": true,
  "paletteOnly": false,
  "palette": []
}

format: the output format of the colour. May be one of:
- hex for colours like #ffffff and #ff00ff. Since this format does not support transparency, no transparency slider will be available in the colour picker
- rgb for colours like rgb(255,255,255) and rgb(255, 0, 255). Since this format also doesn’t support alpha, no transparency slider will be available in the colour picker
- rgba for colours like rgb(255,255,255,1) and rgb(255, 0, 255, 0.4). This is the only format that supports transparency.
removable: whether or not the colour may be removed after being set, resetting the field’s value to null
useBrandPalette: whether to display the brand colours defined in the project settings in the colour picker
paletteOnly: restrict the available colours to those in the brand palette (if that option is active) and the custom palette
palette: the custom colour palette for this field, defined as an array of { label: 'white', value: '#ffffff' } objects

The following validation options are available for this field (default values shown):

{
  "required": false
}