Paste your brand colour. Get a full WCAG-tested scale of tints and shades, plus the safest text-and-background pairings. Built for designers who can't afford to fail accessibility but can't afford to lose the brand either.
Enter your brand colour. The generator returns a 9-step scale from light tint to dark shade, plus the strongest text-on-brand and brand-on-background pairings tested against AA and AAA.
The output is a 9-step scale from 100 (lightest tint) to 900 (darkest shade) of your input brand colour. Most modern design systems use a similar shape because it maps cleanly onto the practical needs of a UI: very light tints for surfaces, mid-range for accents, very dark shades for text.
A defensible mapping:
1.4.11.The recommendation block above shows the closest step to your input that clears AA and AAA on white, and the closest tint that clears AAA on a dark background, so you can build the rest of the system around the safe defaults.
Saturated mid-tone hues (blues around #5B5BFF, greens around #1FA85A, oranges around #FF8800) usually sit between 3:1 and 5:1 against white. That clears the AA 3:1 rule for large text and UI components, but it fails the 4.5:1 rule for normal body text and the 7:1 AAA rule by a significant margin.
The fix is structural: treat the brand colour as a UI accent, not a body text colour. Use the brand at 500 for buttons, badges, links with underline, and large display copy. Use the 700 or 800 step for inline links in body copy, for icons on white, and anywhere small text appears in the brand colour.
Three things you should verify separately, because no single tool can do them in isolation:
1.4.1 requires a non-colour signal. The generator only assesses contrast, not whether colour is the sole channel.How do I make a brand colour WCAG accessible?
Use the brand colour as a UI accent and on large text where 3:1 or 4.5:1 thresholds apply, and use a darker variant for body text where 4.5:1 or 7:1 is required. The generator returns those variants automatically.
What is the difference between a tint and a shade?
A tint is a lighter version of a colour (mixed with white). A shade is a darker version (mixed with black). For most accessibility work, shades are what you need on white backgrounds and tints are what you need on dark backgrounds.
Do I need every shade to pass AA against white?
No. Light tints are intended for surfaces and backgrounds where no contrast is required against the page. The text and icon shades are the ones that must clear the WCAG ratios.
Why does my brand blue fail on white?
Saturated mid-tone hues sit between 3:1 and 5:1 against white. That clears 3:1 for large text and UI components but fails 4.5:1 for body text. Use a 15 to 30 percent darker variant for body text use.
How many shades should a brand colour scale have?
Most design systems use 9 to 11 steps. The generator returns 9 because that's the practical minimum to cover backgrounds, surfaces, borders, body text, headings, and accents in both light and dark themes.