What Is a Duotone? Design History + How to Make One

Scroll through music posters, event branding, or podcast covers and you’ll keep seeing the same trick: a photograph reduced to exactly two colors — deep shadows in one, glowing highlights in the other. That’s a duotone. It looks like a modern filter, but it began on the printing press long before screens gave it a second life. Here’s where it came from, what two inks can and can’t do to a photo, and how to choose them, with measurements of all 14 presets in our generator.

What “duotone” literally means

A duotone is an image reproduced with two inks, one for the shadows and one for the highlights, with the tones in between mixed from the two. The photo’s detail survives — edges, faces, texture — because all of that information lives in lightness, not hue. Only the color story changes: instead of the millions of colors in the original, the whole frame speaks in a single two-color voice.

Born on the printing press

Duotone started as a fix for a tonal-range problem. In offset printing, a black-and-white photo printed with a single ink looks thin — one plate can only hold so many distinguishable gray levels, so shadows plug up and midtones go flat. Printers discovered that running the same photo through the press twice, with two halftone plates screened at different angles — usually black plus one spot color — dramatically extended the tonal range. The second ink deepened the blacks, warmed or cooled the midtones, and gave “black-and-white” reproduction a richness one ink couldn’t deliver.

Just as important: two plates cost far less than four-color CMYK. For decades, duotone was how books, annual reports, and art catalogs got expressive photography on a budget. The family tree extends in both directions — one ink is a monotone, three make a tritone, four a quadtone — and the warm sepia look of old photographs is a loosely similar idea (one tint over a black-and-white image) achieved with chemistry instead of ink.

The Spotify moment

Photoshop has long included a dedicated Duotone mode, which kept the technique available as a niche print option, but duotone re-entered mainstream visual culture in the mid-2010s when Spotify rebuilt its brand identity around it. Vivid two-color artist portraits — magenta and blue, teal and pink — turned photos from many acts and photographers into one instantly recognizable system. The campaign was widely imitated, and duotone has since settled in as a permanent tool rather than a passing trend.

The lesson for everyone else: shared inks remove hue, the thing that clashes most between unrelated photos, but they leave each photo’s light and shadow to carry the image alone.

From plates to pixels

On screen there are no plates. Software gives every pixel one brightness value and paints it with the color at that position on a straight line between the inks: black takes the shadow ink, white the highlight ink, and a neutral gray lands in proportion to its gray level. The Duotone Generator page documents our exact formula with a worked example; this guide covers what the mapping means for design.

The key consequence is that the inks are hard limits. In all 14 presets, no output pixel is darker than the shadow ink or lighter than the highlight ink, so no two areas of the finished image can differ by more contrast than the inks have with each other.

0% brightness
Shadow #14213D
25% brightness
#4C4E56
50% brightness
#847C6F
100% brightness
Highlight #F4D6A0
A pixel’s original brightness selects a point between the two inks. The photograph supplies the brightness; the ramp supplies the new color.

Because the image is carried by lightness, duotones tend to hold up well for color-blind viewers, with one caveat: with protanopia, reds can look darker, so a strong red ink may read heavier than you planned. Color Blindness Types Explained covers which pairs collapse and why.

The midpoint controls the character

The endpoints define the palette; the middle of the ramp sets the mood. Where a tool has curve controls, they push more pixels toward one ink, so if a face is lost in darkness, raise the midtones rather than weakening the shadow ink. Curves redistribute detail; endpoints set the range. Our generator draws a straight line with no curves, so a 50% tone always lands at the exact middle; shift it in an image editor first.

What the 14 presets actually give you

Presets are the fastest start, so we measured every one in the generator on three numbers: the contrast between its inks (the ceiling described above), how much of the black-to-white lightness range the pair keeps, and how colorful the middle of the ramp stays.

12.32:1
#0D1B2A / #FFD60A
range 67%
mid chroma 102%
11.56:1
#1D3557 / #F1FAEE
range 65%
mid chroma 59%
10.04:1
#2D3436 / #DFE6E9
range 60%
mid chroma 100%
9.82:1
#111827 / #22D3EE
range 59%
mid chroma 105%
8.05:1
#7F1D1D / #FDE68A
range 53%
mid chroma 78%
7.50:1
#6A040F / #FFBA08
range 50%
mid chroma 91%
7.39:1
#134E4A / #A7F3D0
range 52%
mid chroma 103%
6.74:1
#014F86 / #CAE9FF
range 50%
mid chroma 104%
6.20:1
#3A0CA3 / #4CC9F0
range 42%
mid chroma 94%
5.38:1
#5B21B6 / #FBBF24
range 40%
mid chroma 40%
5.04:1
#4A148C / #FF80AB
range 40%
mid chroma 93%
4.46:1
#1A1A2E / #E94560
range 40%
mid chroma 96%
3.91:1
#1E3A8A / #F472B6
range 35%
mid chroma 79%
3.88:1
#0F766E / #FECDD3
range 38%
mid chroma 42%
The 14 presets as highlight-ink text on shadow ink, sorted by contrast. Range: OKLCH lightness between the inks as a share of black-to-white. Mid chroma: colorfulness at the ramp’s midpoint relative to the inks’ average (over 100% means more colorful). The harder a chip is to read, the lower its contrast.
Purple / amber: 152° apart, midpoint #AB706D keeps 40% chroma
Teal / pink: 176° apart, midpoint #87A2A1 keeps 42% chroma
Navy-black / yellow: 157° apart, midpoint #86791A keeps 102% chroma
Shadow ink, the 50% point of the ramp, and highlight ink. Two saturated opposites meet in a muted middle; a near-neutral shadow lets the highlight’s color carry through.

Muted midtones can be exactly the look you want. They matter when the subject, often a face or a product, sits in the middle of the tonal range.

Text on a duotone: the band where neither ink works

Setting a headline in one of the inks makes the type look like part of the image. Highlight-ink text reads over the darker areas, shadow-ink text over the lighter ones, and between them lies a band where neither is legible enough.

At level AA, WCAG asks for 4.5:1 for normal text and 3:1 for large text. Each ink needs that margin against the tone behind it, so the two zones only meet when the inks are at least 3 × 3 = 9:1 apart for large text, or 4.5 × 4.5 = 20.25:1 for body text, close to the 21:1 maximum of black on white. So:

0–32%
off-white text passes
32–54%
neither ink passes
54–100%
navy text passes
Default preset #1D3557 / #F1FAEE, body text at 4.5:1. Position along the bar is the source brightness behind the text; each zone is painted with its duotone color. For large text (3:1) the zones overlap: off-white works up to 47%, navy from 38%.

In real photos the band is no corner case. Across the eight sample photos on our homepage, between 2.8% of the pixels (a neon sign in a dark window) and 40.6% (a tulip field) fell into the 4.5:1 body-text band (32–54%) with the default pair, so check the area behind the headline, not the image as a whole. Set the generator’s inks to #000000 and #FFFFFF and the preview becomes its exact brightness map. Download it, sample the brightest point behind light text in the Image Color Picker, and compare it with the thresholds above (for the default pair, no lighter than #525252 behind off-white body text). Then confirm the final pair in the Contrast Checker.

Flat photos stay flat

The ink pair sets the ceiling, but the photo decides how much of it is used. A source whose tones sit in the middle only reaches the middle of the ramp:

0–100% → 11.56:1
10–90% → 7.20:1
20–80% → 4.47:1
30–70% → 2.69:1
40–60% → 1.63:1
Source tonal range → contrast between the darkest and lightest tones of the finished duotone, default preset. Bar length is relative to the full 11.56:1.

A photo spanning 30–70% brightness ends up with 2.69:1 between its darkest and lightest areas, under a quarter of what the inks allow. The hot-air balloon photo on our homepage looks vivid, but most of it is even blue sky: 90% of its pixels sit between 52% and 70%, so its 5th- and 95th-percentile tones end up only 1.48:1 apart. The neon-sign photo has the opposite problem: with 95% of its pixels below 28% brightness, it barely reaches the highlight ink, and the same measure gives 2.16:1.

Changing inks barely helps; even the strongest preset turns a 30–70% source into 2.97:1. Open up the photo’s range first with levels or curves, without crushing shadows or clipping highlights: once detail is gone, the ramp cannot recreate it.

How to choose the two colors

What matters most is how far apart the inks sit in lightness; hue comes second. Two midtones, say medium blue and medium orange, produce mud no matter how opposite their hues are. The measurements above turn that into rules:

Wide gap, 12.09:1: navy shadows and pale amber highlights retain strong separation
Narrow gap, 1.32:1: medium blue and medium orange compress the tonal range
Opposite hues do not guarantee a useful duotone. The first pair spans dark to light; the second is colorful, but no two areas of a photo printed with it could differ by more than 1.32:1.

A practical ink-selection sequence

Begin in grayscale: if the subject isn’t understandable without its original colors, a duotone won’t repair the composition. Choose the shadow endpoint while watching the darkest important detail, so hair, clothing, and background don’t merge into one shape. Choose the highlight while watching pale skin, clouds, or paper, so their texture survives. Only then judge the hue relationship.

For a brand system, allow lighter and darker relatives of the official colors when they sit too close in lightness. The medium blue and orange above measure 1.32:1, which leaves a photo almost no tonal room; a navy shade and a pale tint, built with the Shades & Tints Generator, are more faithful than an unreadable effect. Finally, view the image in its real layout: a cream highlight can look nearly white on a dark page and noticeably yellow on a white one.

Making one

Try it now: drop any photo into the Duotone Generator, start from one of the 14 presets measured above, and hit Swap to invert the mood. Everything runs in your browser; nothing is uploaded.

Swap keeps the contrast ratio but reverses which tones get which ink, so a moody frame turns high-key and the text zones flip with it: after swapping the default pair, navy type belongs over the photo’s darkest areas. One of the two directions is almost always obviously right.

For a series, test representative extremes before committing to a preset: the darkest portrait, the brightest scene, a low-contrast photo, and one with fine detail. If one pair can’t cover them with small source adjustments, define a controlled alternate pair rather than a different effect for every asset. Crop and set the final aspect ratio first, too; if the subject is very small, no ink pair will restore emphasis the composition lacks.

When to reach for it

When full color is the better choice

Skip duotone when hue carries essential information. Product colors, food, cosmetics, artwork, maps, scientific images, before-and-after documentation, and color-coded charts can all become misleading once their hues disappear. Use the effect for framing graphics or secondary imagery, not the evidence itself.

Portraits need a closer look. Skin color is hue, so a duotone can’t show complexion accurately, and if skin falls in the middle of a saturated opposite pair like purple and amber, it takes on that dusty midpoint color. For faces, a same-family pair or a near-neutral shadow keeps the midtones cleaner.

Duotone also can’t fix a confusing silhouette or low resolution; it unifies noise but can’t create missing detail. Check thumbnails at their real size, where thin edges vanish first.

A final review checklist

How we measured

We read the 14 presets from the generator’s script and replicated its mapping exactly, including per-channel rounding; “source brightness” is the generator’s own value. Contrast uses the WCAG relative-luminance formula, as in our Contrast Checker. Range and chroma use OKLCH (see HEX vs RGB vs HSL vs OKLCH): range is the lightness difference between the inks, and mid chroma is the chroma at the ramp’s 50% point divided by the inks’ average. Text zones step source brightness in 0.1% increments. Photo figures use the eight homepage samples at their published size, decoded with Pillow, which may differ from a browser by one level on some pixels.

That’s the whole story: a press-room economy trick that turned out to be one of design’s most reliable style machines. Pick a dark ink, pick a light ink, keep the gap wide — and let the photograph’s own lightness do the rest.

Try it yourself

Everything on ScanHue is free and runs in your browser: Photo Palette Extractor · Contrast Checker · Color Code Converter. How these guides are written and checked: editorial standards.