Duotone is a printing technique that replaces every tone in an image with a position on a gradient between two colours. The darkest shadows map to one colour; the brightest highlights map to the other; every midtone lands somewhere between them. The result is a graphic, high-contrast look used in editorial design, album covers and social media headers. This tool applies the effect entirely in your browser using the Canvas API — the image is never uploaded anywhere.

Upload any JPEG, PNG, WebP or GIF up to 10 MB, or click Try with demo image to see the effect immediately. Adjust the two colours using the colour pickers or the preset chips, then download the result as a lossless PNG. The before and after canvases update in real time as you change any setting, so comparing a Classic purple-gold scheme against an Ocean blue-cyan scheme takes two clicks.

How to Use the Generator

1. Click the upload zone or drag an image onto it. JPEG, PNG, WebP and GIF are accepted up to 10 MB. Files above the limit are rejected with the message “File is X MB, which exceeds the 10 MB limit.”
2. Pick a preset to set both colours at once, or adjust the Shadow and Highlight pickers individually. Shadow maps to the darkest tones in your image; Highlight maps to the lightest. You can type a hex value directly into the text field beside each picker.
3. Drag the Effect intensity slider. At 0% the image looks unchanged; at 100% it is pure duotone. Values between 50 and 80% give a subtle colour-tinted desaturated look without losing original detail.
4. Change the blend mode if needed. Normal replaces pixel colours directly. Multiply darkens by combining the duotone value with the original; Screen lightens it.
5. Press Download PNG to save the result. PNG is lossless and preserves the original alpha channel, so transparent areas in source PNG files remain transparent in the output.

What Each Colour Control Does

The Shadow colour replaces pixels at luminance 0 (pure black). The Highlight colour replaces pixels at luminance 255 (pure white). Every tone in between is linearly interpolated: a pixel at 50% luminance lands exactly halfway between the two colours in RGB space. Picking a very dark shadow and a very bright highlight produces the strongest contrast; two similar colours produce a monochromatic tint rather than a true duotone. The Copy CSS button outputs a CSS filter approximation plus an SVG feColorMatrix reference — CSS filters cannot fully replicate pixel-level luminance mapping, so the note inside directs you to the PNG download for pixel-perfect results.

Supported Formats and What It Accepts

The 10 MB limit covers the compressed source file. In memory the image is decoded into a raw RGBA pixel array (4 bytes per pixel), so a 4000x3000 JPEG at 3 MB occupies roughly 48 MB of Canvas memory — very large images cause a brief processing pause indicated by the Processing… badge on the Duotone panel. GIF source files use the first decoded frame only; animated output is not supported. SVG files are rasterised at their natural size before the effect is applied, which may differ from their rendered CSS size on the page.