Color Palette Generator
Pick a base color or enter a hex value, choose a harmony mode, and generate a 5-color palette. Copy values, check WCAG contrast, or export as PNG.
WCAG Contrast Checker
Click any two swatches above to compare their contrast ratio.
No colors selected yet. Click two swatches above to check contrast.
Frequently Asked Questions
What harmony modes are available?
Five modes: Complementary (opposite on the color wheel), Analogous (neighboring hues), Triadic (three evenly-spaced hues), Split-Complementary (base plus two colors adjacent to the complement), and Monochromatic (different lightness levels of the same hue).
How does the WCAG contrast checker work?
Click any two swatches to compare them. The tool calculates the contrast ratio per WCAG 2.1 and shows AA (≥4.5:1 for normal text) and AAA (≥7:1) badges so you can ensure accessible color pairings.
Can I export my palette?
Yes. You can copy all hex values, copy CSS custom properties (--color-1 through --color-5), or export the palette as a PNG image with color codes.
What is a Tailwind class?
Tailwind CSS uses utility classes like bg-blue-500. Each palette color shows the closest matching Tailwind color class so you can use it directly in your Tailwind projects.