The duotone effect: make any photo on-brand in two colours

The duotone effect recolours a photo using just two colours: its shadows become one colour and its highlights become another, with every tone in between blended from the two. A portrait in deep indigo and warm gold, a city in forest green and mint. Because every picture ends up in the same two colours, duotone is the quickest way to make photos from different cameras, seasons and sources look like they belong to one brand.

How the duotone effect works

A duotone is a gradient map with two stops. First the photo is reduced to greyscale, so each pixel is just a brightness from black to white. Then each brightness is replaced by the colour at the same point along a two-colour gradient: black becomes the shadow colour, white becomes the highlight colour, and mid grey becomes the colour halfway between. The photo keeps its shapes and light, but all of its original colour is gone.

Reading duotones as gradients makes them easy to judge before you touch a photo. If the middle of the strip looks muddy, the photo's mid-tones will too. The broader technique, with three or more colours, is covered in gradient maps.

How to choose a duotone colour pair

1. 1

   Make the shadow colour dark

   The shadow colour carries the photo's structure. It should be close to black in lightness, such as a deep navy, plum or forest, or faces and details will flatten.

2. 2

   Make the highlight colour light

   The highlight colour carries the light. A pale gold, blush, mint or cream keeps the picture luminous. A big lightness gap is what keeps the photo readable.

3. 3

   Check the middle

   Most of a photo is mid-tones, so the colour halfway along the pair matters most. If it turns grey or olive, pick a highlight closer in hue to the shadow. See muddy gradients.

4. 4

   Take one colour from your brand

   Use your brand colour as either the shadow or the highlight, and choose the other to suit it. That is what makes duotone feel on-brand rather than just stylised.

5. 5

   Test on a face and a landscape

   Skin and skies are where a bad pair shows first. If both still look good, the pair will work on almost anything.

When duotone helps

• Mismatched photos: stock pictures, phone shots and old archive images look like one set
• Text over photos: with the photo reduced to two calm colours, words sit on it far more easily; see text over image
• Brand consistency: every image repeats your colours, which builds recognition; see brand consistency
• Posters and covers: a strong duotone reads from a distance and prints cleanly
• Weak photos: poor lighting and dull colour matter much less once the colour is replaced

It helps less where true colour matters: food, fashion, products and property, where people need to see what they are getting. There, a lighter tint or a colour wash over one part of the image does the job without hiding the real colours.

How to make a duotone in CSS

The most accurate method is an SVG filter. feColorMatrix turns the image into greyscale using standard luminance weights, and feComponentTransfer maps each channel from the shadow colour to the highlight colour. The table values are each colour's red, green and blue divided by 255.

<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <filter id="duotone-midnight-gold" color-interpolation-filters="sRGB">
    <!-- 1. Greyscale by luminance -->
    <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0
                                         0.2126 0.7152 0.0722 0 0
                                         0.2126 0.7152 0.0722 0 0
                                         0      0      0      1 0"/>
    <!-- 2. Map black to #1b134f and white to #fad084 -->
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.106 0.980"/>
      <feFuncG type="table" tableValues="0.075 0.816"/>
      <feFuncB type="table" tableValues="0.310 0.518"/>
    </feComponentTransfer>
  </filter>
</svg>

<img src="portrait.jpg" alt="Portrait" style="filter: url(#duotone-midnight-gold)">

Add a third value to each tableValues list and you have a tritone, with a chosen mid-tone colour. That is the easiest way to rescue a pair whose middle goes muddy. For filters and CSS effects in general, MDN's guide to filter effects is a good reference.

Duotone in design tools

Image editors usually do duotone with a gradient map: add a gradient map adjustment, set the left stop to your shadow colour and the right stop to your highlight colour, and adjust the midpoint until skin and skies look right. Some tools also offer a dedicated duotone mode for print, which prepares two real ink colours rather than an RGB image.

In Gradiently, any photo in the Studio can be tinted in the colours of the Mark you are designing with: as mono, as duotone, or as a softer wash. Change the Mark and the photo follows, so a whole set of designs stays in one palette.