Brand Color Generator

About the Brand Color Generator

The brand colour generator builds palettes using real colour-harmony maths in HSL space. Each palette picks a base hue and derives the rest with analogous, complementary, triadic or split-complementary relationships, then assigns practical roles: primary, secondary, accent, surface and text.

How to use it

1. Press Generate to produce a set of complete palettes — no keyword needed.
2. Look at the role labels, not just the swatches: the surface and text colours decide whether your site is readable.
3. Copy an individual hex code with the small copy button, or the whole palette at once.

Tips for better results

• Use the accent colour sparingly — buttons and links only. Overuse kills its emphasis.
• Check contrast between your text and surface colours against WCAG AA (4.5:1 for body text) before shipping.
• Keep one neutral surface and one strong primary; palettes fail when two colours compete for dominance.
• Test the palette in both light and dark contexts before locking it in.

Example use case

A wellness app designer generates a split-complementary palette, keeps the muted green as primary and the warm clay accent for calls to action, and pastes all five hex codes into their design tokens file.

What to do with the result

Paste the hex codes into your CSS variables, Figma styles or Tailwind theme. Document which colour plays which role so future pages stay consistent, and save the palette to favourites so you can retrieve it without regenerating.

Frequently asked questions

Are these palettes accessible?

Harmony is calculated, contrast is not guaranteed. Run your chosen text and background pair through a contrast checker and adjust lightness if it falls short.

How many colours does a brand need?

One primary, one neutral surface and one accent covers most brands. Extra colours are for charts and states rather than identity.