Duotone
An image or design treatment using exactly two colors — typically one dark, one light — replacing the full tonal range.
Duotone is a printing technique borrowed from offset lithography, where a grayscale image is reproduced using two ink plates instead of one. On the web it's recreated by mapping image luminance to a two-color gradient — shadows take the dark color, highlights take the light color, mid-tones blend between.
The look had its modern moment with Spotify's 2015 rebrand, which ran every artist photo through a duotone filter. It's since become shorthand for editorial, music, and creative branding wanting bold visual unity without the cost of art-directed photography.
Offset lithography printing technique. Brought to mainstream UI by Spotify's 2015 brand redesign by Collins.
- Unifying photography across a brand
- Editorial covers and feature imagery
- Music, podcast, and creative tooling
- Product photography where accurate color matters
- Documentation needing literal screenshots
- +Pick one dark and one light color with strong luminance contrast
- +Apply consistently across all imagery, not selectively
- −Don't use complementary colors — they create muddy mid-tones
Textbook examples in the directory
A two-color press operation: warm bone and persimmon, nothing else. Bricolage Grotesque for display at oversized scale, Newsreader for body, sharp 0px corners, every accent and every CTA in the same persimmon. Built for editorial sites, indie magazines, and brands that want one disciplined color move and zero decoration.
Radical 2-color duotone. Deep ink-blue and acid citron, with no third hue. Every surface is one of the two colors or a tint thereof — the constraint is the personality.
Radical two-color: deep indigo and warm bone, nothing else. Cool but editorial — never electric. Considered serif/sans pairing, refined 6px corners, no shadows. Discipline and quiet authority.
People also ask
What is duotone?
A two-color treatment applied to an image, mapping shadows to one color and highlights to another. Originally a print technique, now common in editorial and brand UI.
When should I use duotone?
When you want photography to feel branded and unified — duotone forces every image into the same palette, regardless of its source colors.
Which two colors work best for duotone?
Pick a deep shadow color and a light highlight that sit on opposite ends of luminance. High contrast pairs (ink + cream, navy + chartreuse) read cleaner than two mid-tones.
How do I implement duotone in CSS?
Use an SVG feColorMatrix filter, or stack a colored overlay on a desaturated image with mix-blend-mode: multiply / screen.