Open navClose nav

Color Picker,dpr_auto,f_auto,q_80,w_640/

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


  • General
    • 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.
  • Format
    • Color Format — Whether to save the RGB or hex value of the selected color.
  • Validation
    • Required – prevent changes from being saved if this field is empty.
  • Default — supply a default color value.



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]

The color format is required, and defaults to Hex when you create a color field through the user interface.


type: color
name: background_color
label: Background Color
description: The background color of the element.
  color_format: Hex
default: "#9B9B9B"

Last updated on May 29, 2018