Turn any photo into a two-tone artwork with this duotone image filter generator
The duotone image filter generator recolors any photo using just two colors — one mapped to the shadows and one mapped to the highlights — so you can match a hero image to your brand palette in seconds. Upload a JPG or PNG, pick your shadow and highlight swatches, and the live preview redraws as you tweak. When you are happy, export a flat PNG or copy the CSS so you can apply the same effect to live images on your site.
What a duotone effect actually does
A duotone is a halftone reproduction of an image made by superimposing one color over another, originally a print technique that gained new life on the web after Spotify's 2015 campaign. You can think of the duotone effect as a black and white filter, but instead of the shadows being black and the highlights being white, you pick your own colors for the shadows and highlights. That means selecting black and white gives you grayscale, brown and tan gives you sepia, and bold complementary pairs give you the punchy editorial look you see on landing pages, podcast covers, and album art.
The duotone effect works best on high-contrast images, so start with an image with a lot of large dark and light areas. Portraits with clean backlighting, product shots on plain backdrops, and architectural photography all map beautifully.
Two ways to ship your result
- Export PNG — the canvas is rendered pixel-by-pixel using a gradient map between your two colors, then downloaded as a flat image you can drop into Figma, social posts, or a blog hero.
- Copy CSS — get a snippet that uses the CSS filter property together with
mix-blend-modeso the effect applies on the fly to a live<img>without baking pixels.
Pairing colors that actually work
Pick a dark shadow and a light highlight with strong luminance contrast — that is what makes the midtones smoothly interpolate. If you need help choosing, generate a base scheme with the color harmony generator, then audit the foreground/background pairing in the contrast checker so any text you overlay stays readable. For brand work, you can also pull source swatches straight from a site with the brand colors extractor before feeding them into the duotone filter.
When to reach for duotone
Use it to unify a messy photo grid under one palette, to tone down a stock photo so overlaid type pops, or to build editorial moodboards. Because the output is just two colors, it compresses well and stays on-brand across light and dark themes — especially when paired with the gradient generator for matching backgrounds.