Two tone design: bold looks with just two 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.

If you want the blend rather than the split, two colour gradients covers that side, and monochromatic colour schemes 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.

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 explains why opposites buzz when they meet.

How to choose your two colours

1. 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. 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. 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. 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.

• 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 goes deeper; on the web you can do it with blend modes.

.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;
}

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

• 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.

For contrast both ways round, measure with the tools in colour contrast and accessibility. If you like the discipline of two colours, the same thinking runs through minimalist graphic design and, at full volume, bold graphic design.