Skip to content

Сolor palette

A grid of swatches. Click picks a colour; several may be picked at once, so the field suits a scheme rather than a single accent.

Settings: default (comma-separated colours), width, required. A placeholder makes no sense here and is hidden.

The value is a list of hex codes without the leading #, in upper caseFF0000, not #ff0000. Put the hash back in the template:

html
{foreach $palette as $color}
    <span class="swatch" style="background:#{$color}"></span>
{/foreach}

Only colours from the palette

There is no free-form input: an editor picks from the swatches shown and nothing else. When a brand colour has to be exact and is not on the grid, a plain Text field holding a hex code is the honest answer.

© PageBlocks 2019-present