Using Color Inputs to edit your data

Input with drop down for selecting color.

Shown for input keys matching:

  • color
  • *_color
  • *-color
  • *Color
  • colour
  • *_colour
  • *-colour
  • *Colour
  • rgb
  • *_rgb
  • *-rgb
  • *Rgb
  • rgba
  • *_rgba
  • *-rgba
  • *Rgba
  • hex
  • *_hex
  • *-hex
  • *Hex
  • hsv
  • *_hsv
  • *-hsv
  • *Hsv
  • hsva
  • *_hsva
  • *-hsva
  • *Hsva
  • hsl
  • *_hsl
  • *-hsl
  • *Hsl
  • hsla
  • *_hsla
  • *-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
Front Matter
brand_color: '#f05f40'
Note

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

Was this article helpful? or Suggest an improvement >