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

Field colorpalette

Version: Free.

Why this type

Editors pick brand palette, not any hex. Static options like select with swatch UI. Fewer random colors in production.

When to use

  • Theme token primary / secondary / muted
  • Section background from design system
  • Limited set for white-label sites

Tips

Arbitrary hex needs color. Stored value is option key, not raw CSS.

Similar types

Schema

json
{
  "name": "theme",
  "type": "colorpalette",
  "label": "Color",
  "swatches": [
    "#111827",
    "#c2410c"
  ],
  "tab": "Content",
  "width": 100,
  "active": true
}

Value

HEX string.

Section data

Key theme in the section data (HEX):

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

Chunk example

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

Notes

In CMP: optionsText (same as select); on save both options and swatches are written.

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
  • Also: swatches or options with colors.

See fields overview.

See also