How to Choose a Colour Palette That Doesn't Look Like Everyone Else's

Most colour palettes fail for the same boring reason: they were picked to be safe. A blue that could belong to any bank. A grey that apologises for existing. Nothing wrong, nothing memorable.

If you've ever stared at five swatches and felt they were fine but forgettable, this is for you. Choosing colour well isn't a talent you're born with. It's a process — a handful of decisions made in the right order, each one narrowing the field until the palette feels inevitable. Here's the order I use.

Start with one colour, not five

The most common mistake is trying to pick a whole palette at once. Don't. Choose one colour you actually care about and build outward from it.

That anchor usually comes from somewhere real: a brand you're matching, a photo you love, a mood you're chasing. Grab it wherever it lives. If it's in a photograph, the Image Extractor reads the exact values out of the pixels. If it's a colour you can see but not name, open the Picker and match it by eye. Got a stray hex code from a client's old logo? Drop it into the Converter and you'll have every format you need in a second.

One colour. Chosen on purpose. Everything else hangs off this.

Let colour theory do the heavy lifting

Once you have a base, you don't have to guess what goes with it. Two centuries of colour theory already answered that, and the answers sit on a wheel:

• Complementary — the colour directly opposite. High contrast, high energy. Perfect for a single button, exhausting across a whole page.
• Analogous — the two or three colours either side of your base. Calm, cohesive, a little safe.
• Triadic — three colours evenly spaced around the wheel. Balanced and lively without fighting.
• Split-complementary — the gentler cousin of complementary: the contrast, minus the shouting.

You can spin all of these from a single colour in Harmonies and copy whichever set clicks. Or skip the wheel: the Palette Generator hands you ten finished palettes per click, each already balanced, so you react to real options instead of theory.

The 60-30-10 rule (and when to break it)

Here's the ratio that quietly makes interfaces look designed: sixty percent a dominant neutral, thirty percent a secondary colour, ten percent an accent that does the talking.

Your accent is the loud one — the button, the link, the thing you want clicked. It should be the colour you're least willing to compromise on. The 60 and the 30 are the supporting cast; they're allowed to be quiet, because their whole job is to make that 10 sing. Break the ratio when you have a reason. A playful brand might run three accents. A photography portfolio might go 90 percent near-black and let the images carry the colour. Rules like this are training wheels — useful right up until they aren't.

Test it before you fall in love

A palette that looks gorgeous as five swatches can collapse the moment it becomes a real interface. This is the step most people skip and later regret. Two checks, both quick.

First, contrast. If text sits on a colour, that pair has to be readable — not "looks fine on my monitor" readable, but measurably so. Run every text-on-background pair through the Contrast Checker; it tells you in a single number whether you clear the accessibility bar, and offers a tuned shade when you don't. This isn't manners. Somewhere between five and eight percent of men can't reliably tell your red from your green, and a good share of your visitors are squinting at a phone in the sun.

Second, context. Colours misbehave next to each other. A beige reads warm beside blue and grubby beside orange; a saturated accent that looked bold alone can vibrate against the wrong neighbour. Drop the palette onto real buttons and cards in the UI Preview and you'll catch the ugly pairings before a developer does.

Steal like an artist, then change one thing

Every designer borrows. The craft is in borrowing and then moving.

Find a palette you admire — a film still, a book cover, a rival's homepage. Take it apart; if it's a website, the Code Extractor lifts every colour straight out of the stylesheet. Then change one thing on purpose. Shift the accent's hue by fifteen degrees. Pull the saturation out of the neutrals. Swap the lightest colour for something warmer. That one deliberate move is the whole difference between a copy and a palette that's yours.

When you want to nudge a colour with precision instead of by feel, the Mixer blends two shades in perceptual colour spaces, so the steps between them stay even to the eye rather than turning to mud.

Keep the ones that survive the night

You'll make far more palettes than you keep, and that's the point. Generate without mercy, bin most of them, and keep the two or three that still look good after you've slept on them.

Bookmark those in the editor and they land on your Saved shelf, ready to export as CSS variables, JSON or a Tailwind config the day the project needs them. Building something bigger? Turn the survivors into named design tokens, so "primary" and "accent" mean the same thing in every file.

Common questions

How many colours should a palette have?

Five is a comfortable default: one or two mains, a couple of neutrals, one accent. You can ship with three. Past seven or eight you're not designing a palette — you're dodging a decision.

What's the easiest way to find a starting colour?

A photo. Colours that already share a scene in the real world tend to get along on a screen. Feed one to the Image Extractor and start from what it pulls out.

Do I need to know colour theory?

No. It helps, but the tools apply it for you. Harmonies and the Palette Generator both run the maths so you can judge with your eyes instead of a protractor.

None of this needs talent. It needs one colour you mean, a little theory to expand it, and the nerve to test it before you commit. Do that much and your palette already looks less like everyone else's — because most people never get past step one. Go open the Palette Generator and make ten. Keep one.