What Colors Go Together: Rules and 15 Combinations

The 60-30-10 rule

It's the most useful rule for dividing up colors. It comes from interior design, but it works for any project.

60%: dominant color. Usually a neutral or a soft tone. It covers backgrounds and large areas.
30%: secondary color. It adds personality. Use it for blocks, menus or furniture.
10%: accent color. The boldest one. Use it for buttons, icons or details.

For example: off-white at 60%, navy blue at 30% and orange at 10%.

You don't need to measure exactly. The idea is that one color leads, one supports and one stands out.

Neutrals are white, black, gray, beige, cream and light browns. They go with almost everything.

They give the eyes a rest and help strong colors stand out. A palette without neutrals usually feels tiring.

White and off-white: cleanliness and space.
Gray: modern and understated. Choose warm or cool grays to match the rest of the palette.
Beige and sand: warmth and a natural feel.
Black or near-black: elegance and contrast. For text, a very dark gray is usually easier on the eyes than pure black.

Colors fall into warm (reds, oranges, yellows) and cool (blues, greens, purples). There are three simple ways to combine them:

All warm: cozy and energetic. Great for restaurants or friendly brands.
All cool: calm and professional. Great for healthcare, tech or finance.
Cool base with a warm accent: the most versatile option. The warm accent draws the eye against a calm background.

What usually fails is mixing lots of intense warm and cool colors at once, with no dominant color.

A beautiful color is useless if the text can't be read. Contrast between text and background is key for readability and accessibility.

Use dark text on a light background, or light text on a dark background.
Avoid yellow, light green or light gray text on white.
Avoid placing saturated complementary colors on top of each other, like red on green. They vibrate and strain the eyes.
The WCAG guidelines require a minimum ratio of 4.5:1 for normal text and 3:1 for large text.

You can test any color pair with our contrast checker.

These pairs are safe places to start. Use them as a base and add a neutral or an accent as needed.

You'll find many more ideas, with their hex codes, on our color combinations page.

If you already have a main color, this list gives you a quick starting point:

Red: white, black, gray, navy blue and beige. For something bold, pink or orange.
Orange: navy blue, turquoise, white, cream and brown.
Yellow: gray, black, navy blue and white. Mustard yellow goes well with dark green.
Green: beige, white, brown, gold and soft pink.
Blue: white, orange, gray, yellow and coral. Navy blue works almost like a neutral.
Purple: gray, lilac, gold, sage green and white.
Pink: gray, navy blue, olive green, white and gold.
Brown: cream, green, petrol blue, orange and off-white.

Notice that neutrals show up in almost every list. They're the safest way to pair a strong color.

Choose a main color based on what you want to convey.
Find a secondary color on the color wheel: a neighbor for something calm, an opposite for something eye-catching.
Add one or two neutrals.
Pick a single accent color for what matters most.
Test the palette on a real example: a web page, a slide or a photo of the room.

When in doubt, use fewer colors. Three to five colors are enough for almost any project.

Using too many colors. The result looks messy and nothing stands out.
Giving every color the same weight. Without a dominant color, the eye doesn't know where to look.
Forgetting contrast. Text that can't be read or buttons nobody sees.
Saturating everything. Very bright colors are tiring. Pair them with softer tones.
Ignoring context. A color looks different in daylight, on screen or in print.
Copying without adapting. A palette that works for one brand may not fit your audience.
Mixing neutrals of different temperatures. A cool gray next to a warm beige can look muddy. Choose neutrals from the same family.
Not testing on several screens. A color can look great on your computer and dull on a phone. Always check on more than one device.

What color goes with everything?

Neutrals like white, gray, beige and navy blue go with almost any color. That's why they're used as a base.

How many colors should a palette have?

Three to five is usually enough: one dominant, one or two secondary colors, an accent and a neutral.

What is the 60-30-10 rule?

It's a way to divide up colors: 60% for the dominant color, 30% for the secondary and 10% for the accent. It helps you achieve balance.