Generate colour palettes that work together
This color palette generator helps designers, developers and small businesses pick colours that look good together — and work in real life. Press Space for a new palette, lock the colours you like, and keep generating. Or describe a mood (“calm ocean”, “luxury gold”) or upload a photo to get a matching palette.
How to create a palette
- Press Space or click Generate.
- Lock colours you want to keep and adjust others with the colour picker.
- Choose a harmony rule: complementary, analogous, triadic, split-complementary, monochrome and more.
- Check the live website preview and contrast matrix.
- Export HEX, RGB, CSS variables or Tailwind 50–950 scales.
Colour harmony rules
| Rule | Effect |
|---|---|
| Complementary | Opposite colours — strong contrast, great for buttons |
| Analogous | Neighbouring colours — calm and natural |
| Triadic | Three evenly spaced colours — lively and balanced |
| Monochrome | Shades of one colour — clean and modern |
| Split-complementary | Softer than complementary, still vibrant |
Brand palette tips
- Use the 60-30-10 rule: 60% neutral, 30% main brand colour, 10% accent.
- Make sure text colours pass WCAG contrast — the matrix shows which pairs are readable.
- Check the colour-blind simulation: about 1 in 12 men has some colour vision deficiency.
- Save your palette and reuse it in our business card, letterhead and email signature makers.
Four ways to get a palette
- 🎲 Generate: press the button (or the space bar) for a new harmonious palette. Lock 🔓 the colours you like and generate again to change only the others.
- 🔮 From words: type a mood like “calm ocean”, “luxury bakery” or “eco fresh” and get matching colours.
- From an image: upload your logo or a photo and pull the main colours out of it.
- Edit: click a colour to pick an exact shade or type a HEX code.
Using a palette for a brand
- One main colour for buttons and highlights.
- One or two supporting colours for sections and illustrations.
- A dark and a light neutral for text and backgrounds.
A common rule is 60–30–10: 60% neutral, 30% supporting colour and 10% accent.
Check before you use it
Make sure text is readable on your colours with the contrast checker. Then copy the HEX codes, save the palette with ♡, or share a link with your designer or developer.