Using Color Inputs to edit your data

Color picker input with spectrum and transparency controls for editing color values in your data.

Color inputs are shown for inputs configured with the type color, or for input keys matching:

color
*_color
colour
*_colour
rgb
*_rgb
rgba
*_rgba
hex
*_hex
hsv
*_hsv
hsva
*_hsva
hsl
*_hsl
hsla
*_hsla

Each variation specified by the matching pattern in its key defines the preferred format of the color. The color and colour variations default to hex.

Variations ending in a have an additional transparency control.

Naming convention

brand_color: '#f05f40'

Input configuration

top_gradient_stop: '#f05f40'
_inputs:
  top_gradient_stop:
    type: color

Note

Quote hex colors, otherwise the hash symbol begins a YAML comment.

Naming convention

brand_color = "#f05f40"

Input configuration

top_gradient_stop = "#f05f40"
[_inputs.top_gradient_stop]
type = "color"

Naming convention

{
  "brand_color": "#f05f40"
}

Input configuration

{
  "top_gradient_stop": "#f05f40",
  "_inputs": {
    "top_gradient_stop": {
      "type": "color"
    }
  }
}

Options

Color inputs are configured with options inside an _inputs entry.

Input configuration

top_gradient_stop: '#f05f40'
_inputs:
  top_gradient_stop:
    type: color
    options:
      format: rgb
      alpha: true

Input configuration

top_gradient_stop = "#f05f40"
[_inputs.top_gradient_stop]
type = "color"
[_inputs.top_gradient_stop.options]
format = "rgb"
alpha = true

Input configuration

{
  "top_gradient_stop": "#f05f40",
  "_inputs": {
    "top_gradient_stop": {
      "type": "color",
      "options": {
        "format": "rgb",
        "alpha": true
      }
    }
  }
}

Color inputs have the following options available:

format - String

Sets what format the color value is saved as. Optional, defaults to the naming convention, then hex if that is unset. Must be rgb, hex, hsl or hsv.

Alternatively, you can configure format with the naming convention as well. If an input key ends with a valid format (and optionally alpha), it is used (e.g. the input keys rgba or my_rgb result in format rgb).

alpha - Boolean

Toggles showing a control for adjusting the transparency of the selected color. Optional, defaults to using the naming convention.

Alternatively, you can configure alpha with the naming convention as well. alpha is set to true if the input key ends with a.