Choose your preferred SSG:
Choose your preferred SSG:

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.

Screenshot of color input unfocused
Screenshot of color input field focused
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.

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

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.

Was this article helpful? or Suggest an improvement >

Related articles