Skip to content
  1. Extras
  2. PageBuilder
  3. Field types
  4. Free
  5. color

Field color

Version: Free.

Why this type

Picker instead of typing into text. Fits section background and accents. String value for inline CSS or variables in chunk.

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

Schema

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

Value

HEX string.

Section data

Key accent in the section data (HEX):

json
{
  "accent": "#3b82f6"
}

Chunk example

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

Common properties

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

KeyTypeRoleCMP
tabstringGroup subtitle in the inspectoryes
width25–100Field width as % of the row (flex)yes
descriptionstringHint under the labelyes
defaultanyInitial value for a new sectionyes
activeboolfalse hides the field in the inspectoryes
requiredboolRequired on publish (draft still saves)yes

See fields overview.

See also