Color Palette Generator
Generate beautiful color palettes from any base color
Generate harmonious color palettes from any base color. Pick a hex code and instantly get complementary, analogous, triadic, or monochromatic schemes — with WCAG contrast ratios for accessibility.
Color harmony types
| Harmony | How it works | Best for |
|---|---|---|
| Complementary | Opposite on the color wheel | High contrast, call-to-action buttons |
| Analogous | Three adjacent colors | Calm, harmonious designs |
| Triadic | Three equally-spaced colors | Vibrant, balanced palettes |
| Tetradic | Two pairs of complementary colors | Rich, diverse schemes (use with care) |
| Split-complementary | Base + two adjacent to its opposite | High contrast without harshness |
| Monochromatic | Tints and shades of one color | Minimal, sophisticated designs |
Export formats
- Hex codes — #6366f1
- RGB — rgb(99, 102, 241)
- HSL — hsl(239, 84%, 67%)
- CSS variables — --color-primary: #6366f1;
- Tailwind config — colors: { primary: "#6366f1" }
Accessibility (WCAG)
- AAA (normal text)
- Contrast ratio ≥ 7.0 — best for readability
- AA (normal text)
- Contrast ratio ≥ 4.5 — minimum for body text
- AA (large text)
- Contrast ratio ≥ 3.0 — minimum for headings ≥ 18pt
Frequently asked questions
What is a color palette?
A curated group of colors used together in a design. A good palette has a clear hierarchy — a primary brand color, supporting secondaries, and neutrals for text and backgrounds.
How many colors should a palette have?
Most UI palettes use 5–7 colors: one primary, one or two accents, one success/error pair, plus 2–3 neutrals for text and backgrounds.
Can I check accessibility?
Yes, the tool shows WCAG AA and AAA contrast ratios for each color pair so you know which combinations are safe for text.
How do I export?
Copy individual hex codes, or export the full palette as CSS variables, Tailwind config, or a Figma-compatible swatch file.