Color Palette Generator
Build harmonious colour palettes from a base colour — monochrome, analogous, complementary, triadic, tetradic.
Last updated: April 2026 · Runs in your browser · No sign-up
Starting a palette from scratch
Pick one colour that represents the brand's mood — warm for friendly, cool for trustworthy, saturated for energetic. Generate a harmony around it, then neutralise: most palettes need a grey ramp plus one or two accent colours, not six competing hues.
60-30-10 rule
Use the dominant colour on 60% of a design, a secondary on 30%, and an accent on 10%. Works for interiors, slide decks and web interfaces alike.
Frequently Asked Questions
What's the difference between the harmony types?
Monochrome: shades of one hue. Analogous: neighbouring hues on the wheel. Complementary: opposite hues. Triadic: three evenly spaced. Tetradic: four in a rectangle. Each creates a different mood.
How many colours should a palette have?
For a UI, 5–7 is typical: 1 primary, 1 accent, 2–3 neutrals, plus success/warning/error semantic colours. Fewer forces clearer hierarchy; more invites inconsistency.
Are the palettes accessibility-safe?
The generator outputs palettes, not accessibility guarantees. Always run foreground/background pairs through a WCAG contrast checker before committing — 4.5:1 for text, 3:1 for large text.
Can I export for Figma or Tailwind?
Yes. Copy as hex list for Figma styles, or as a Tailwind-ready config object with keys 50–900 for a full ramp.