Palette

The Palette app adds a field type that presents a fixed set of colors as a visual palette. Use it to keep styling choices such as button, heading, and background colors within a defined brand palette. The field stores the selected hex value.

Features

• Define the set of colors editors can select.
• Set a default color.
• Choose between a small, medium, or large swatch size.
• Deselect the current color when the field has no default color.

Setup

In the Block Library, select the block you want to edit, add a field, set its field type to Plugin, and set the custom type to storyblok-palette.

The field takes the following options:

Option	Type	Required	Description
colors	JSON	Yes	Array of hex strings. For example, ["#00B3B0", "#40C6C4"].
defaultValue	String	No	Hex value selected when the field is empty. Must be one of the values in colors, without quotes. For example, #00B3B0.
size	String	No	Swatch size: small, medium, or large.

Example colors value:

["#00B3B0", "#40C6C4", "#7FD9D7", "#D9F4F3", "#1B243F", "#545B6F"]

Without defaultValue, editors can deselect the color, and the field value is undefined.

Output

The field returns an object like the following:

{
  "plugin": "storyblok-palette",
  "value": "#DFE3E8"
}

Further resources

Palette in the app directory