Accessible Color Palette Generator
Start with one brand color. Get a full palette of tints, shades, and harmonies — every swatch rated with its WCAG contrast ratio against white and black, so you only ship combinations that pass AA.
Click any hex code to copy it.
Everything updates live as you pick.
Tints & shades
Your base color mixed toward white (tints) and black (shades).
Harmonies
Analogous (±30°) and complementary colors from the same hue wheel.
Tip: dark shades of a blue brand color often keep AA against white body text; light tints make safe page backgrounds. Check the badges before you commit.
How the palette is built
Tints are produced by mixing the base color toward pure white at 10%, 25%, 50%, and 75%; shades by mixing toward pure black at the same steps. The mix happens in sRGB — the same math as CSS color-mix() — so you can reproduce any swatch in a stylesheet with a one-line mix. Harmonies are generated by rotating the base color's hue in HSL space: ±30° for analogous colors and 180° for the complementary color.
Reading the badges
Each swatch shows its WCAG contrast ratio against white and against black. AA (4.5:1) is the minimum for normal text; AAA (7:1) is the enhanced level. A failed badge means that combination should not carry body text — use it for decoration, large headings (3:1 minimum), or icons instead.
Design tips
- Need body text on a tinted background? Pick a shade of at least 50% depth — light tints almost never reach 4.5:1 against white text, but they do against their dark shades.
- For buttons, prefer complementary or dark-shade variants over the base brand color — base brand blues and reds typically sit in the 3–4.5 zone.
- Always pair status colors with icons or text labels — never communicate state by color alone.
- Run your final palette through the color blindness simulator before shipping.
FAQ
What makes a color palette accessible?
Text and UI elements must meet WCAG contrast minimums: 4.5:1 for normal text and 3:1 for large text and UI components at AA level. This generator shows each color's contrast ratio against white and black so you can pick combinations that pass before you use them.
How are tints and shades calculated?
Tints are made by mixing the base color toward white, shades by mixing toward black, in sRGB at fixed percentages (10, 25, 50, 75%). It's the same math most CSS color-mix() implementations use — simple, predictable, and reproducible in any stylesheet.
What color harmonies does the generator create?
Analogous colors (hue rotated ±30°) and a complementary color (hue rotated 180°) are generated from your base color in HSL space. Analogous palettes feel calm and cohesive; complementary pairs give strong visual contrast.
Is AA enough, or should I aim for AAA?
AA (4.5:1 for normal text) is the legal and practical standard in most accessibility regulations. AAA (7:1) is the enhanced level — worth it for body text when you can, but many brand palettes can't reach it on every combination, which is why knowing the ratio for each pair matters.
Is my color data uploaded anywhere?
No. Everything runs locally in your browser; no colors, no analytics, no tracking.