Select a color from a customizable set with the Palette field plugin. The palette is ideal for settings colors for buttons, headers, and backgrounds.

How to set up

In the block library, select a block to edit. Add a new field, set the Field Type to Plugin, and set the Custom Type to storyblok-palette.

Configure the options:

• colors: A JSON encoded array of hex color strings. For example:

[   "#00B3B0", "#40C6C4", "#7FD9D7", "#D9F4F3",   "#1B243F", "#545B6F", "#8D919F", "#C6C8CF",   "#B1B5BE", "#DFE3E8", "#E7EAEE", "#EFF1F3",   "#2DB47D", "#62C79E", "#96D9BE", "#CAECDE",   "#395ECE", "#6B87DB", "#9CAEE6", "#CDD7F3",   "#FBCE41", "#FCDB71", "#FDE6A0", "#FEF3CF",   "#FFAC00", "#FFC140", "#FFD57F", "#FFEABF",   "#FF6159", "#FF8983", "#FFB0AC", "#FFD7D5"]

• defaultValue (optional): One of the values in color without the quotes. For example #00B3B0.
• size (optional): small, medium, or large

Example output:

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

If the defaultValue option is not defined, the user can de-select the color. In this case, the value from the field type will be undefined. If the defaultValue is defined, the user will not be able to de-select the color.