Duotone Generator
Recolour any photo with a gradient — shadows in one colour, highlights in another. Download the image, or copy a CSS filter that does it live on your site. Your photo never leaves your browser.
What a duotone does
A duotone — a gradient map — throws away a photo’s colours and keeps its light. Every pixel is turned to grey, then recoloured along a gradient: the shadows take your first colour, the highlights your last, and everything in between blends along the way. It is why a set of very different photos can suddenly look like one campaign.
Two colours with a big difference in lightness work best — a deep shade for the shadows and a bright one for the highlights. Add a midtone for a three-colour map, push the contrast up for a graphic poster look, or turn the strength down to keep a hint of the original colour.
Using it on a website without editing the photos
Copy the SVG filter into your page once and add the CSS; any image with class="duotone" is recoloured by the browser. Change the colours later by changing one line of code instead of re-exporting every image. The preview here uses exactly the same steps as the filter, so what you see is what you get.
Your photo is processed on your own device and never uploaded. Looking for colours? Start from colour combinations or press From the library.