Colour Palette Generator — Free Harmonies
Pick any base colour, then generate complementary, analogous, triadic, tetradic, split-complementary or monochromatic 5-colour palettes. Click any tile to copy the HEX.
Runs in your browser.
Colour harmony — what each scheme means
- Complementary — base + opposite on the colour wheel. High contrast, vibrant, attention-grabbing. Used by sports brands, action movie posters, dramatic UI accents.
- Analogous — base + 2 colours either side on the wheel. Calm, harmonious, naturalistic. Used by nature brands, calm UI themes, soothing illustrations.
- Triadic — base + 2 colours equidistant on the wheel. Vibrant balance, playful. Used by children's brands, creative agencies, fintech accents.
- Tetradic — base + 3 colours forming a rectangle on the wheel. Rich, complex, requires careful balancing. Used by full editorial design systems.
- Split-complementary — base + the two colours next to its complement. Strong contrast but softer than pure complementary. Used in modern brand systems for variety without clashing.
- Monochromatic — base + lighter and darker variations of the same hue. Cohesive, sophisticated, easy to use. Used by minimal brands, premium design systems, single-colour data viz.
When to use each harmony
- Marketing landing page — analogous or split-complementary. Pleasant but with enough contrast for CTAs.
- Dashboard / SaaS — monochromatic + 1 accent. Quiet UI, visible state.
- Brand launch — triadic for energy, complementary for impact.
- Children's brand or product — triadic or tetradic. Energetic, playful.
- Wellness / spa / nature — analogous. Soothing.
- Sports / fitness — complementary. Aggressive, energetic.
How to pick a base colour
The starting hue sets the emotional tone for the entire palette. Some rules of thumb:
- Blue — trust, calm, professional. Default for fintech, healthcare, B2B SaaS.
- Green — nature, growth, health, money. Used by wellness, eco, finance.
- Red — urgency, passion, energy. Used by sports, sales, food.
- Orange — friendly, energetic, affordable. Used by call-to-action buttons and casual brands.
- Purple — luxury, creativity, magic. Used by premium and creative brands.
- Yellow — optimism, attention. Used sparingly because of low contrast on white.
- Black/grey — premium, minimalist, editorial.
Tips and best practice
- Don't use all 5 colours equally — pick one as primary (60% of design), one as secondary (30%), and use the others as accents (10%).
- Run any palette through a WCAG contrast checker before using for text — harmonious doesn't mean readable.
- For brand systems, generate a monochromatic ramp of your primary as well as the harmony palette — you'll need many shades, not just five colours.
- Save palettes you like — over time you'll build a personal library of harmonies that suit different project types.
FAQs
Is the palette colour-blind friendly?
Not automatically. Test against deuteranopia and protanopia simulators if it matters for your project.
Can I export to Figma / Photoshop?
Copy the HEX codes shown on each tile — they paste into any design tool.
Is anything uploaded?
No. Palette generation runs entirely in your browser.