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: json [ "#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.
• size (optional): small, medium, or large

Example output:

json { "plugin": "jl-dev", "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.