# Two tone design: bold looks with just two colours

[Canonical HTML page](https://gradiently.design/guide/two-tone-design)

Two colours, chosen well, can carry a whole brand: posters, menus, posts and photos. Here is how to pick the pair, get more range from it, and keep it from looking flat.

## The short version

- Two tone design builds every element from two colours, usually one dark and one light, with no third colour except tints of the two.
- The pair needs a clear difference in lightness, so text and shapes stay readable whichever colour sits on top.
- Tints and shades of the two colours give a two tone palette enough range for backgrounds, panels and secondary text.
- Duotone photos map the shadows of an image to the dark colour and the highlights to the light one, which lets photography match a two tone layout.
- Two tone layouts stand out in busy feeds because they look deliberate, and they print cheaply as two spot colours.

**Two tone design** means building everything, type, shapes, backgrounds and even photos, from just two colours: usually one dark and one light, with a strong difference in lightness between them. Cobalt and tangerine, forest and blush, ink and butter. The limit is the point. Two colours look deliberate, read clearly at any size and give a brand a recognisable signature faster than a full palette can.

## Two tone, duotone and monochrome are not the same

The words get used loosely, so it helps to separate them. They overlap, and many good layouts use all three ideas at once.

| Term | What it means | Typical use |
| --- | --- | --- |
| Two tone | A whole design made from two distinct colours | Posters, menus, packaging, brand systems |
| Duotone | A photo remapped to two colours, shadows to one and highlights to the other | Photography inside a two tone layout |
| Monochrome | Tints and shades of one hue only | Calm, single colour brands |
| Two colour gradient | Two colours blended smoothly into each other | Backgrounds and hero sections |

Two tone keeps the colours separate; a gradient blends them. Both can live in one brand.

If you want the blend rather than the split, [two colour gradients](https://gradiently.design/guide/two-color-gradients) covers that side, and [monochromatic colour schemes](https://gradiently.design/guide/monochromatic-color-scheme) covers the single hue version.

## Twelve two tone colour palettes

Every pair below has one colour dark enough to set text on the other. Contrast between hues matters less than contrast between lightness: a pair can be warm and cool, or two neighbours, as long as one is clearly darker.

- Cobalt and tangerine: `linear-gradient(135deg, #172e70 0%, #172e70 50%, #ff7a1a 50%, #ff7a1a 100%)`
- Forest and blush: `linear-gradient(135deg, #14532d 0%, #14532d 50%, #fbcfe8 50%, #fbcfe8 100%)`
- Ink and butter: `linear-gradient(135deg, #111827 0%, #111827 50%, #fde68a 50%, #fde68a 100%)`
- Klein blue and paper: `linear-gradient(135deg, #002fa7 0%, #002fa7 50%, #f4f1ea 50%, #f4f1ea 100%)`
- Racing green and mustard: `linear-gradient(135deg, #004225 0%, #004225 50%, #e1ad01 50%, #e1ad01 100%)`
- Aubergine and lime: `linear-gradient(135deg, #3b0a45 0%, #3b0a45 50%, #d9f99d 50%, #d9f99d 100%)`
- Poster red and cream: `linear-gradient(135deg, #b8261a 0%, #b8261a 50%, #f7ecd9 50%, #f7ecd9 100%)`
- Deep teal and peach: `linear-gradient(135deg, #134e4a 0%, #134e4a 50%, #fdba8c 50%, #fdba8c 100%)`
- Chocolate and sky: `linear-gradient(135deg, #3e2723 0%, #3e2723 50%, #bae6fd 50%, #bae6fd 100%)`
- Oxblood and pale pink: `linear-gradient(135deg, #5c1a1b 0%, #5c1a1b 50%, #f6d1cf 50%, #f6d1cf 100%)`
- Black and high vis: `linear-gradient(135deg, #0a0a0a 0%, #0a0a0a 50%, #dfff00 50%, #dfff00 100%)`
- Deep violet and lilac: `linear-gradient(135deg, #2e1065 0%, #2e1065 50%, #c4b5fd 50%, #c4b5fd 100%)`

Twelve pairs, split on the diagonal. Each one can swap which colour is the ground, which doubles your layouts.

Some of these are complementary, such as cobalt and tangerine, which gives maximum energy. Others are close relatives, such as deep violet and lilac, which feels calmer and more expensive. [Complementary colours](https://gradiently.design/guide/complementary-colors) explains why opposites buzz when they meet.

## How to choose your two colours

1. **Pick the dark colour first** It will carry every headline and paragraph, so it must be readable on the light colour. Navy, forest, aubergine, chocolate and near black all work.
2. **Choose the light colour for mood** This is the colour people remember. Warm lights such as peach and butter feel friendly; cool lights such as sky and lilac feel quieter.
3. **Check the contrast both ways** Dark text on the light colour should reach 4.5:1 for body copy. Every pair in the grid above passes that test.
4. **Try it on three formats** A square post, a 1080×1920 story and an A5 flyer. If the pair still feels like you on all three, keep it.

## How to get more range from two colours

Two flat colours can feel thin once you need a secondary panel, a caption or a disabled button. The fix is not a third colour. Mix tints of the light colour and shades of the dark one, so every new tone still belongs to the pair.

- Cobalt: #172e70
- Cobalt 75: #516294
- Cobalt 40: #a2abc6
- Tangerine 10: #fdf0e6
- Tangerine 55: #ffb780
- Tangerine: #ff7a1a

One pair, six tones. The 10% tangerine makes a warm paper ground, and the 40% cobalt works for secondary text on dark panels.

- **Ground:** the lightest tint, for large areas and pages of text.
- **Main:** the dark colour, for headlines, body text and solid blocks.
- **Punch:** the full strength light colour, for one shape, one word or one price.
- **Middle tones:** a mid tint of each, for dividers, captions and illustration fills.

## Two tone photos with duotone

Photos are where two tone layouts usually break: a full colour image drops a third, fourth and fifth colour into the page. A duotone treatment remaps the photo so its shadows become your dark colour and its highlights your light one. [The duotone effect](https://gradiently.design/guide/duotone-effect) goes deeper; on the web you can do it with blend modes.

```css
.duotone {
  position: relative;
  background-color: #ff7a1a; /* light tone: the highlights */
}

.duotone img {
  display: block;
  width: 100%;
  filter: grayscale(100%) contrast(1.15);
  mix-blend-mode: multiply;
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #172e70; /* dark tone: the shadows */
  mix-blend-mode: lighten;
  pointer-events: none;
}
```

A cobalt and tangerine duotone. The image turns grey, multiplies onto the light tone, then the dark tone lifts the shadows to cobalt.

In Gradiently you can tint any photo in the Mark’s colours as mono, duotone or a wash, so pictures join the design instead of fighting it.

## Two tone design ideas to try

A portrait post split into two blocks of colour, with Open late on Fridays on one side

A split layout: one colour holds the words, the other holds the mood.

A minimal portrait post reading Spring menu in a dark colour on a light ground

A minimal layout where the light colour is the ground and the dark colour does all the type.

- **Gig and event posters:** two spot colours print cheaply and look intentional from across the street.
- **Restaurant menus:** a dark colour for dishes, the light one for the paper, a mid tint for prices.
- **Instagram carousels:** alternate which colour is the ground on each slide, so swiping feels rhythmic.
- **Packaging:** one colour per product line, the other shared across the range.
- **Presentation decks:** section slides in the dark colour, content slides on the light tint.
- **Business cards:** one side in each colour.

### Avoid

- Two colours of similar lightness
- Sneaking in a third colour for one button
- Full colour photos dropped in untreated
- Light text on the light colour

### Do

- One clearly dark, one clearly light
- Tints and shades of the pair instead
- Duotone every photo in the two colours
- Check contrast both ways round

For contrast both ways round, measure with the tools in [colour contrast and accessibility](https://gradiently.design/guide/color-contrast-accessibility). If you like the discipline of two colours, the same thinking runs through [minimalist graphic design](https://gradiently.design/guide/minimalist-design-ideas) and, at full volume, [bold graphic design](https://gradiently.design/guide/bold-design-ideas).

## FAQ

### What is two tone design?

A design built entirely from two colours, usually one dark and one light, with tints of those two allowed but no third colour.

### What two colours go well together for a design?

Any pair with a clear lightness difference, such as cobalt and tangerine, forest and blush, or ink and butter. The darker one should be readable on the lighter one.

### What is the difference between two tone and duotone?

Two tone describes a whole layout made from two colours. Duotone describes a photo remapped so its shadows and highlights become two colours.

### How do I make a duotone image in CSS?

Make the image greyscale, blend it with `mix-blend-mode: multiply` onto the light colour, then overlay the dark colour with `mix-blend-mode: lighten`.

### Is two colour printing cheaper?

With screen printing and offset spot colour printing, fewer inks usually means fewer screens or plates, so two colour jobs are generally cheaper than full colour.