SBBy Dominik Angerer · 4 November 2026 · 2 min read

A brand color picker for Storyblok, with a contrast check built in

Editors pick from the brand palette, and see right away whether text on that color stays readable

TL;DR A Storyblok field that limits colors to your brand palette and shows a live WCAG contrast check. Copy the prompt and build it yourself.

A free hex input is how a landing page ends up in "almost our teal". This field gives editors the brand palette as swatches and tells them, while they choose, whether white or dark text on that color is readable.

Try it yourself

Paste this into Claude Code or Cursor:

Open in Claude CLI

Fetch and follow the Storyblok field plugin instructions at https://raw.githubusercontent.com/DominikAngerer/storyblok-field-wizard/main/generator/PROMPT.md and build this field:
A color picker limited to a brand palette, shown as clickable swatches (a radio group), that stores { "hex": "#00b3b0", "name": "Teal" } with hex always lowercase 6-digit, and null when nothing is selected; an older value stored as a plain hex string is read as { hex, name: null }. Option palette is a comma-separated list of Name:#hex entries (default Teal:#00b3b0,Navy:#1b243f,Orange:#ffac00,Red:#ff6159,Blue:#395ece,Green:#2db47d); the name is optional, an unnamed entry uses its hex as name, 3-digit hex is expanded, and invalid entries are skipped. Option allowCustom (default false in code, true in the sandbox config) adds a custom hex input with a native color picker and a Use button (Enter also applies); invalid input shows an inline error and disables Use, a custom color is stored with name null, but if it equals a palette color it gets that palette name. Below the swatches, show a preview of the chosen color with its name and hex, a live WCAG 2.x contrast check against white and dark (#101525) text with the ratio and a rating (AAA, AA, AA Large, Fail), and a Clear button.

Already have the Claude Code plugin? Run:

Open in Claude CLI

/storyblok-field:storyblok-field "A color picker limited to our brand palette, with an optional custom hex input and a live WCAG contrast check against white and dark text"

It takes about three minutes and needs Node 22+. You only need a Storyblok personal access token if you want to deploy.

What it's for

Brand colors live in a design system, but in a CMS they often turn into a text field where anyone can type anything, and you get section backgrounds that are slightly off, or white text on a yellow banner that nobody can read. This field keeps editors on the palette, and if your team allows custom colors, it still shows the contrast result before anything goes live. Accessibility becomes part of picking a color, not a review step afterwards. (WCAG is the accessibility standard for readable text.)

What you get

⊕Teal picked from the palette. The contrast panel shows the ratio and WCAG rating for white and dark text.

⊕Custom hex input with an inline error. Nothing is saved until the value is valid.

⊕A custom palette with an invalid entry (skipped) and custom colors turned off.

The stored value:

json

{ "hex": "#00b3b0", "name": "Teal" }

Option	Default	What it does
`palette`	`Teal:#00b3b0,Navy:#1b243f,…`	Comma-separated `Name:#hex` entries. The name is optional.
`allowCustom`	`false` (sandbox: `true`)	`true` lets editors enter any hex color.

Using it in the frontend

jsx

<section style={{ background: blok.color?.hex ?? 'transparent' }}>…</section>

What I learned building it

This was my reference field. I built it in my main Claude session, before handing any field to fresh agents, to see whether Storyblok's docs, the field plugin CLI, the starter template and a prompt were enough. They were: about 270 lines of field code and 6 tests, green on the first try. It then became the example for how options get parsed and old values get read.
Good to know: options are always strings. allowCustom arrives as "true", not true, and a value set in field-plugin.config.json is only the sandbox default. For a real component, the value is set per field in the component schema. That's why the code default is false while the sandbox says true.
The browser tests found a gap in the docs, not in the code. An unnamed palette entry stores its hex as name. That's defensible, but a frontend printing name would print #00ff00. PLUGIN.md now says so.
The contrast maths held up. The browser walkthrough compared the ratios with an independent WCAG calculation, and also checked 3-digit and uppercase hex, and that a custom color matching the palette gets the palette name.

More background in the article about the original experiment. The other fields: product picker, author picker, recipe picker, code editor.