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.
Shadow #14213D
#4C4E56
#847C6F
Highlight #F4D6A0
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.
#0D1B2A / #FFD60A
range 67%
mid chroma 102%
#1D3557 / #F1FAEE
range 65%
mid chroma 59%
#2D3436 / #DFE6E9
range 60%
mid chroma 100%
#111827 / #22D3EE
range 59%
mid chroma 105%
#7F1D1D / #FDE68A
range 53%
mid chroma 78%
#6A040F / #FFBA08
range 50%
mid chroma 91%
#134E4A / #A7F3D0
range 52%
mid chroma 103%
#014F86 / #CAE9FF
range 50%
mid chroma 104%
#3A0CA3 / #4CC9F0
range 42%
mid chroma 94%
#5B21B6 / #FBBF24
range 40%
mid chroma 40%
#4A148C / #FF80AB
range 40%
mid chroma 93%
#1A1A2E / #E94560
range 40%
mid chroma 96%
#1E3A8A / #F472B6
range 35%
mid chroma 79%
#0F766E / #FECDD3
range 38%
mid chroma 42%
- Contrast varies more than threefold, from 3.88:1 (teal and pink) to 12.32:1 (navy-black and yellow). Seven presets reach 7:1, four reach 9:1, and three stay below 4.5:1.
- No preset keeps the full tonal range. The widest spans 67% of the black-to-white lightness range, the narrowest (navy and pink) 35%. Pure white in the photo becomes the highlight ink, so with midnight and neon (
#1A1A2E/#E94560) the brightest area is a rose red at 63% lightness. - Opposite hues gray out the middle only when both inks are colorful. Purple and amber keep 40% of their colorfulness at the midpoint, teal and pink 42%. Navy-black and yellow sit just as far apart in hue yet keep all of it, because the almost neutral shadow barely pulls against the yellow. Every preset with inks within about 60° of hue keeps at least 91%.
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:
- At 9:1 or more, large text in one ink or the other works over any tone. Four presets qualify, including the default navy and off-white.
- No preset carries body text everywhere. With the default pair, off-white body text passes only where the source brightness is 32% or lower (gray
#525252), navy text only at 54% or higher (#898989). Among presets that can carry body text at all, the gap runs from 18% of the tonal range (navy-black and yellow) to 84% (purple and pink,#4A148C/#FF80AB). - Below 4.5:1, neither ink passes for body text anywhere. That covers teal and pink, navy and pink, and midnight and neon. For the last of these, plain white text works far better, passing over about 90% of the tonal range.
off-white text passes
neither ink passes
navy text passes
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:
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:
- Pick the contrast target from the layout. Presets at 9:1 or above keep 59–67% of the lightness range; those below 4.5:1 keep about 40% or less. Aim for 9:1 if headlines may sit anywhere on the image. WCAG Contrast Ratios Explained shows how the ratio works.
- Shadow ink: genuinely dark. Deep navy, plum, forest green, oxblood. With a strongly colored highlight, a near-neutral shadow keeps the midtones lively.
- Highlight ink: light, and not pure white. Whatever was white in the photo becomes this ink, so a mid-lightness highlight caps the whole image at its level.
- For maximum drama, make the hues opposites, and expect muted midtones if both inks are saturated. The geometry behind those pairings is in Color Harmony Basics.
- For subtlety, stay in one hue. The three presets with inks within 25° of hue kept all their midtone color. The difference between a tint, a dark shade, and a muted tone is explained in Tints, Shades, and Tones.
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
- Unifying mixed photography — see the Spotify example above.
- Posters and thumbnails — two bold colors stay recognizable at thumbnail size.
- Photos with a color problem but good light — a green cast or mixed white balance disappears with the hue. A lighting problem doesn’t: the balloon photo stays flat whatever the inks.
- Type over an image, with planned placement — at 9:1 or more, large text in one of the inks works over any tone; body text needs a spot inside its ink’s zone.
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
- Subject: the image remains recognizable in grayscale and at the intended crop.
- Range: the important tones spread across most of the brightness scale instead of bunching in the middle.
- Endpoints: the shadow is genuinely dark, the highlight genuinely light, and the pair reaches 9:1 if large type may sit anywhere on the image.
- Layout: overlaid text stays inside its ink’s zone across all the pixels it covers.
- Series: the treatment survives unusually bright, dark, and low-contrast source images.
- Meaning: removing original color does not hide product facts, categories, or other essential information.
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.