Color Playground

The Playground is where a palette stops being swatches and starts being an interface. You assign colors to roles rather than to elements, and the preview shows what that decision looks like on real components before you write any CSS.

Open the Color Playground

Roles, not colors

The palette is split into background, surface, text, primary, secondary and accent. Thinking in roles is what makes a theme swappable: when every component references the role, switching from light to dark is a change of six values, not a redesign.

Contrast is checked as you go

Text against background and text against surface are scored continuously, with the WCAG grade shown next to the ratio. You find out that a colour fails while you can still change it cheaply — not after it ships.

Style and typography presets

Minimal, Classic and Glass change how surfaces, borders and shadows are drawn, and the typography pairings swap the display and body fonts together. They are a fast way to see whether a palette survives a different visual treatment.

Step by step

Pick a starting point — set a primary colour, or use Smart Randomize to generate a coherent set.
Check the contrast readouts for text on background and text on surface; aim for AA at minimum.
Switch between light and dark to confirm both themes hold up.
Try a different UI style and font pairing to test the palette under another treatment.
Export the result as CSS variables or JSON tokens when you are happy with it.

Frequently asked questions

Do I need an account to use the Playground?

No. Building and previewing a palette is free and needs no sign-in. An account only matters for the credit-based tools and for saving work to your dashboard.

What does Smart Randomize actually do?

It generates a set of colours that already relate to each other — a coherent hue relationship and a sensible lightness spread — instead of six unrelated random values. It is a starting point to react to, not a finished palette.

Why does my palette look fine in light mode and bad in dark?

Usually because the accent was chosen against a white background. A hue that reads well on white often loses contrast on a dark surface. Check both themes before settling, and expect to lighten accents for dark mode.