Open navClose nav

Color Picker

The color picker provides an interface for selecting a color and storing the RGB or hex value.


Color picker field options

  • Label – the human-friendly label shown above the input field in the editor.
  • Name – the key stored in your content’s front matter, used to access it in your templates.
  • Description – a human friendly description of what the field does and/or instructions for your editors.
  • Hidden – hides the field in the editor, but allows developers to set default values or maintain the field for legacy purposes.
  • Required – prevent changes from being saved if this field is empty.
  • Color Format – Whether to save the RGB or hex value of the selected color.

Field UI

Color picker field UI



Use safeHTMLAttr when inserting values into HTML attributes.

<div style="{{ safeHTMLAttr (printf "background-color: %s" .Params.color) }}">
    <!-- ... -->


<div style="background-color: {{ page.color }}">
    <!-- ... -->

Config Files

You can configure this field in Front Matter Template Config Files as follows:

type: color
name: [String]
label: [String]
description: [String]
    color_format: [Hex|RGB]


type: color
name: background_color
label: Background Color
description: The background color of the element.
    color_format: Hex

Last updated on May 29, 2018