Field color

Version: Free.

Why this type

A color picker instead of typing a code into a text field. It fits a section background and an accent color. The saved value is a string: the chunk puts it into CSS, inline or as a variable.

When to use

• Hero background, overlay, button color
• Accent border or badge
• When palette is not fixed upfront

Tips

Fixed brand swatches fit colorpalette. Check text contrast on chosen background in chunk.

Similar types

• colorpalette for JSON option swatches
• select when colors are named themes

Schema

{
  "name": "accent",
  "type": "color",
  "label": "Accent",
  "tab": "Content",
  "width": 100,
  "active": true
}

Value

HEX string.

Section data

Key accent in the section data (HEX):

{
  "accent": "#3b82f6"
}

Chunk example

modx

<span style="color: [[+accent]]">…</span>

fenom

<span style="color: {$accent|escape}">…</span>

Common properties

For fields with name that are stored in the section data:

Key	Type	Role	CMP
tab	string	Group subtitle in the inspector	yes
width	25–100	Field width as % of the row (flex)	yes
description	string	Hint under the label	yes
default	any	Initial value for a new section	yes
active	bool	false hides the field in the inspector	yes
required	bool	Required on publish (draft still saves)	yes

See fields overview.

See also

• Field types reference
• Fields overview