Theme Generator

How it works

Each run generates five independent random 24-bit colours and labels them by interface role rather than handing you five loose swatches:

• Background — the page behind everything.
• Surface — cards and panels that sit above the background.
• Text — body copy.
• Accent — buttons, links, and primary actions.
• Highlight — secondary emphasis, badges, and hovers.

Output format

A run looks like this:

Background: #1E2A44
Surface: #2C3E63
Text: #E7ECF5
Accent: #F2A65A
Highlight: #6FCF97

Copy the block and paste the values into CSS custom properties, a design-token file, or a component-library theme.

Check contrast before you ship

Because the colours are random, a given roll will not necessarily have enough contrast between Text and Background to be readable. Treat the output as a starting point and check the Text/Background and Accent/Background pairs against WCAG contrast ratios — 4.5:1 for normal body text — before using it in a real interface.

Turning the output into CSS variables

The five roles map cleanly onto custom properties. Paste the hex values into a block like this and reference them throughout your stylesheet:

:root {
  --bg: #1E2A44;
  --surface: #2C3E63;
  --text: #E7ECF5;
  --accent: #F2A65A;
  --highlight: #6FCF97;
}

When to use it

Breaking designer's block, generating placeholder themes for a prototype, producing several candidate palettes quickly to react to, or teaching how a role-based palette differs from a set of unrelated brand colours.