# Logo color combinations that work, with hex codes

[Canonical HTML page](https://gradiently.design/guide/color-combinations-for-logos)

A logo has to survive a favicon, a grey photocopy and a dark mode header. These pairs and triads are chosen to do that, with codes and contrast you can check yourself.

## The short version

- Most strong logos use one or two colours, because every extra colour makes the mark harder to reproduce small, in print and on varied backgrounds.
- A good two colour logo pairs a dark colour with a light or bright one, so the shapes stay distinct even when the colours are hard to tell apart.
- Two colours of similar lightness, such as a mid red and a mid blue, appear to vibrate where they touch and lose their edge when printed in grey.
- Every logo should also work in a single colour, in black and in white, before any colour is added.
- A logo's colours do not have to be the whole brand palette: the mark can stay simple while the backgrounds around it carry the richer colour.

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](https://gradiently.design/guide/logo-design-basics) covers the shape side; this article assumes the shape is settled.

## Ten two colour logo combinations

- Navy and gold: `linear-gradient(90deg, #14213d 0%, #14213d 55%, #fca311 55%, #fca311 100%)`
- Forest and cream: `linear-gradient(90deg, #1b4332 0%, #1b4332 55%, #f1e9da 55%, #f1e9da 100%)`
- Charcoal and lime: `linear-gradient(90deg, #2d2d2d 0%, #2d2d2d 55%, #c6f432 55%, #c6f432 100%)`
- Plum and blush: `linear-gradient(90deg, #4a1942 0%, #4a1942 55%, #f7c8d0 55%, #f7c8d0 100%)`
- Burgundy and sand: `linear-gradient(90deg, #6b0f1a 0%, #6b0f1a 55%, #e9d8a6 55%, #e9d8a6 100%)`
- Ink and orange: `linear-gradient(90deg, #1c1917 0%, #1c1917 55%, #f97316 55%, #f97316 100%)`
- Purple and mint: `linear-gradient(90deg, #5b21b6 0%, #5b21b6 55%, #a7f3d0 55%, #a7f3d0 100%)`
- Cobalt and white: `linear-gradient(90deg, #1d4ed8 0%, #1d4ed8 55%, #ffffff 55%, #ffffff 100%)`
- Black and signal red: `linear-gradient(90deg, #111111 0%, #111111 55%, #e63946 55%, #e63946 100%)`
- Teal and coral: `linear-gradient(90deg, #0f766e 0%, #0f766e 55%, #ff7f6e 55%, #ff7f6e 100%)`

Ten pairs shown as hard splits, the way they meet inside a mark. Click any swatch to copy its code.

| Pair | Codes | Contrast | Feels like |
| --- | --- | --- | --- |
| Navy and gold | `#14213d` `#fca311` | 7.9:1 | Established, confident, a little classic |
| Forest and cream | `#1b4332` `#f1e9da` | 9.2:1 | Natural, crafted, calm |
| Charcoal and lime | `#2d2d2d` `#c6f432` | 10.7:1 | Energetic, sporty, technical |
| Plum and blush | `#4a1942` `#f7c8d0` | 9.4:1 | Warm, beauty, boutique |
| Burgundy and sand | `#6b0f1a` `#e9d8a6` | 8.7:1 | Heritage, wine, hospitality |
| Ink and orange | `#1c1917` `#f97316` | 6.2:1 | Practical, friendly, trades and tools |
| Purple and mint | `#5b21b6` `#a7f3d0` | 7.0:1 | Modern, playful, software |
| Cobalt and white | `#1d4ed8` `#ffffff` | 6.7:1 | Clear, dependable, digital |
| Black and signal red | `#111111` `#e63946` | 4.5:1 | Bold, urgent, editorial |
| Teal and coral | `#0f766e` `#ff7f6e` | 2.2:1 | Lively, but only as touching shapes, never text on text |

WCAG contrast ratios between each pair. Above 4.5:1 one colour can sit on the other as lettering; lower pairs should sit side by side as shapes.

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](https://gradiently.design/guide/color-contrast-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](https://gradiently.design/guide/triadic-colors), keeps them from competing.

- Deep sea: #003049
- Poppy: #d62828
- Mustard: #fcbf49

Primary, grown up. A dark blue anchors a red and a yellow that would otherwise shout. Good for schools, sport and toys aimed at parents.

- Slate teal: #264653
- Saffron: #e9c46a
- Burnt coral: #e76f51

Coastal warmth. Slate teal carries the wordmark; saffron and burnt coral fill the shapes of the symbol.

- Night: #10002b
- Magenta: #f72585
- Cyan: #4cc9f0

Digital and loud. Magenta and cyan glow against a near black anchor, for music, gaming and nightlife marks.

## Logo colour combinations to avoid

### Avoid

- Mid red and mid blue touching: they appear to vibrate
- Pure red and pure green together: hard for many colour blind viewers
- Yellow or pale pastels on white: the mark disappears
- Four or more colours of equal weight
- A gradient as the only version of the logo

### Instead

- Make one of the pair much darker
- Separate them by lightness, not only hue
- Put pale colours on a dark ground, or outline them
- One lead colour, one or two supporting
- A flat version first, the gradient as a variation

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](https://gradiently.design/guide/gradient-logo) explains how to build both.

## How to test a logo colour combination

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. **Shrink it to 16 pixels** Look at it as a browser tab icon. Thin parts in a pale colour vanish first.
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. **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. **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.

A square design with the word Harbour placed over a gradient, with parts of the letters fading into it

A wordmark run straight over a lively background can lose parts of its letters.

The same square design where the background is calmer behind the word Harbour, so every letter reads

The same wordmark with the background calming and deepening behind it.

That last test is where many logos struggle. [Placing a logo on a gradient background](https://gradiently.design/guide/logo-on-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](https://gradiently.design/guide/brand-color-ideas) has 30 to start from, and [famous gradient logos](https://gradiently.design/guide/famous-gradient-logos) shows how established brands balance a simple mark with expressive colour.

## FAQ

### What is the best colour combination for a logo?

There is no single best pair, but a dark colour with a light or bright one, such as navy and gold or forest and cream, works almost everywhere because the shapes stay distinct.

### How many colours should a logo have?

One or two for most logos. Three can work for marks made of separate pieces, but every extra colour makes printing and small sizes harder.

### Which colours should not be used together in a logo?

Avoid colours of the same lightness touching, such as mid red and mid blue, and avoid relying on red against green, which many colour blind people cannot separate.

### Should a logo work in black and white?

Yes. A logo should work in one colour, in black and in white, before colour is added, because it will be printed and stamped in single colours.

### Can a logo be a gradient?

It can, but keep a flat version for small sizes, embroidery and one colour print, and use the gradient where it has room.