Color theme generator
Turn one brand color into a full palette: lighter and darker shades, a complementary secondary color, and a WCAG contrast rating for every swatch so your text stays readable.
Click a color to copy its hex code. Each card shows the text color with the better contrast and its WCAG rating.
How it works
From one color to a usable palette
Pick your main brand color. The generator builds two lighter and two darker shades of it, a complementary secondary color and its shades: ten colors in all.
Each swatch shows whether white or black text reads better on it, with the contrast ratio and its WCAG level. Use colors rated AA or AAA for body text and buttons, and keep "AA large text" colors for headings only.
A palette is a starting point. Test it on your real pages, especially buttons and links. See accessibility fixes and web design.
FAQ
Color theme generator FAQ
How is the secondary color chosen?
It is the complementary color: each red, green and blue value of your primary color is inverted. The lighter and darker shades are the same color with brightness raised or lowered by 20% and 40%.
What do AA and AAA mean?
They are WCAG contrast levels. AA needs a contrast ratio of at least 4.5:1 for normal text, AAA at least 7:1. "AA large text" (3:1) is only enough for headings and large text. Each card shows the text color, white or black, that gives the better ratio.
Is my data stored?
No. The palette is generated in your browser. Nothing is sent to us or saved.
More free marketing tools
Use them, no signup.
Want a brand and website that work together?
In a free 30-minute strategy session we review your website, search and ads, and leave you with three priorities, whether you hire us or not.
By submitting, you agree to our Terms. Text messages are sent only if you check the SMS box; see our SMS Consent Policy.