Logo color combinations that work, with hex codes

The logo color combinations that work best pair one dark colour with one light or bright colour, such as navy and gold, forest green and cream, or charcoal and lime. The difference in lightness keeps the shapes readable at favicon size and in greyscale, while the difference in hue gives the mark its personality. Below are ten tested pairs and three triads with hex codes and contrast ratios, then a quick way to check any combination yourself.

Why logos use so few colours

A logo is the most reproduced thing a business owns. It appears as a 16 pixel browser icon, embroidered on a shirt, stamped on a coffee cup and printed in one colour on a receipt. Each colour you add is another thing that can go wrong in one of those places. That is why so many well known marks are one colour, and most of the rest are two.

Start in black. If the shape works in black on white and white on black, colour can only help. If it does not, no combination will save it. Logo design basics covers the shape side; this article assumes the shape is settled.

Ten two colour logo combinations

Notice that teal and coral is the odd one out. Both colours sit at a similar lightness, so coral letters on a teal badge would be hard to read and would turn into one grey blob in a black and white print. The pair still works when the colours are separate shapes, such as a teal symbol beside a coral wordmark, each on a white or dark ground. The numbers come from the WCAG formula explained in colour contrast and accessibility.

Three colour logo combinations

Three colours suit marks built from separate pieces: a symbol made of tiles, a wordmark with a coloured dot, a set of shapes for a children’s brand. Anchor the trio with one dark colour, then choose two that are clearly different in hue. Spacing them around the wheel, as in triadic colours, keeps them from competing.

Logo colour combinations to avoid

Gradient logos are a special case. They can look superb large, but they band in print and blur at small sizes. Keep a flat one or two colour version and treat the gradient as a variation; gradient logos explains how to build both.

How to test a logo colour combination

1. 1

   Print it in greyscale

   Convert the logo to grey. If the two colours become the same grey, the pair has too little lightness difference.

2. 2

   Shrink it to 16 pixels

   Look at it as a browser tab icon. Thin parts in a pale colour vanish first.

3. 3

   Reverse it

   Place the logo on your darkest brand colour and on white. Note which colour needs swapping in each case and write it down.

4. 4

   Check colour blindness

   Run it through a colour blindness simulator. Red and green pairs often merge for people with the most common types of colour blindness.

5. 5

   Put it on a real background

   A logo rarely sits on plain white in the wild. Test it on a photo, a gradient and a busy feed.

That last test is where many logos struggle. Placing a logo on a gradient background covers the techniques. In Gradiently, a Mark knows where the words and logo sit: its calmest region moves behind them and Auto ink picks light or dark per line from the Mark’s own palette, so a simple two colour logo can sit on a rich background without a box behind it.

Keep the logo simple and let the brand be rich

The logo does not have to carry every colour your brand uses. Many brands keep the mark in one or two colours and put the depth in their backgrounds, photography and type. If you are choosing the wider palette next, brand colour ideas has 30 to start from, and famous gradient logos shows how established brands balance a simple mark with expressive colour.