Choosing colors can feel paralysing. Break it into steps and it becomes straightforward — here's a process that works for websites and brands alike.

1. Start with one base color

Pick a single color that fits the mood you want — see color psychology for what different hues convey. This becomes your primary. Everything else supports it.

2. Build a scheme around it

Use a color scheme to find colors that harmonise with your base — analogous for calm, complementary for contrast. The generator does this in one keystroke.

3. Use the 60-30-10 rule

A classic ratio for balanced designs:

  • 60% — a dominant (usually neutral) color for backgrounds.
  • 30% — a secondary color for supporting sections.
  • 10% — an accent for buttons, links and highlights.

Most beginners over-use their accent. Keeping it to ~10% is what makes a palette feel professional.

4. Don't forget neutrals

Great palettes lean on neutrals — off-whites, greys, warm darks — for most surfaces and text, letting your accent shine. A palette of five loud colors is much harder to use than two colors plus good neutrals.

5. Check contrast and accessibility

Text must be readable. Run your text and background colors through the contrast checker to make sure they meet WCAG AA (a ratio of at least 4.5:1 for body text). Good contrast isn't optional — it's what keeps your site usable for everyone.

6. Test it in context

Colors look different next to each other than they do alone. Preview your palette on a real layout before committing. When you're happy, export it to CSS or Tailwind and ship.

Need a starting point for a specific industry? Business color palettes gives ready-made schemes for cafes, SaaS, law firms and more.