Brand palettes from a single HEX for UK design systems
UK brand designers regularly build full colour systems from a single seed colour , a primary brand blue or a corporate green. This tool takes that seed and generates harmonious tints, shades, and complementary hues in one step. The GOV.UK Design System ships a fixed palette, but private-sector and third-sector organisations need to define their own. Starting from a brand hex, this generator outputs a range that can feed directly into Tailwind CSS config (colors.brand) or Figma token sets.
WCAG 2.2 colour contrast requirements apply across the UK: AA level (4.5:1 for normal text) is the legal standard for public-sector websites. Verify each generated shade against white and black text using the Contrast Checker before applying them to body copy or interactive elements.
WCAG contrast requirements
| Level | Normal text | Large text (18pt+ or 14pt bold) |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
Limits: what harmony theory does not guarantee
Colour harmony schemes (complementary, triadic, etc.) describe mathematical relationships on the HSL colour wheel , they do not guarantee aesthetic success in every context. A complementary pairing of orange and blue is technically valid but may clash in a financial services brand context. Use the generated palette as a starting point, then apply judgement based on brand tone, industry, and target audience. Shades near 50% lightness often fail both white-on-shade and black-on-shade contrast tests; always check before use.
From generated palette to design tokens
Copy the CSS custom properties output into your :root block. For design token workflows, the HEX values map directly to JSON token files used in Theo, Style Dictionary, or Figma Tokens. The Colour Palette Extractor is a useful companion: extract a palette from an existing image, then refine it here with tints and shades.