A duotone image replaces the usual red, green and blue channels of a photograph with a single measurement, luminance, remapped through exactly two colours instead of a full colour photo or a plain black and white conversion. The technique has a long history in print design and has become a familiar look for editorial photography, album art and bold marketing pages precisely because it strips a photo down to shape and contrast while injecting a very specific mood through colour choice.
Every pixel calculation happens on your own device using the canvas element. The photo you upload is never sent anywhere, it is decoded, processed and re encoded entirely inside your browser tab.
How this duotone image generator maps luminance to two colors
Each pixel's luminance is calculated from its red, green and blue values using the standard perceptual weighting, 0.2126 for red, 0.7152 for green and 0.0722 for blue, the same weighting used for grayscale conversion, since green contributes far more to perceived brightness than red or blue do. That single luminance value, normalised to a 0 to 1 range, becomes the position along a gradient running from your shadow colour at the dark end to your highlight colour at the light end.
A pixel that was originally pure black becomes exactly your shadow colour, a pixel that was originally pure white becomes exactly your highlight colour, and everything in between is linearly interpolated between the two based on how bright that specific pixel was. The original hue of the photo is discarded entirely, only the brightness pattern survives.
When a duotone effect works better than a plain filter
A duotone effect is the right choice whenever an image needs a strong, consistent mood rather than a faithful colour reproduction, since the two colours you pick do almost all of the emotional work. It reads as considerably more deliberate than a simple saturation or hue adjustment, because every photo run through the same two colours instantly belongs to the same visual family.
- Editorial headers and blog cover images that need a consistent, branded look across many different source photos.
- Album art, event posters and marketing pages where a bold, graphic mood matters more than realistic colour.
- A photo gallery or portfolio section where every image should feel like it belongs to the same set.
- Hiding a photo's original colour palette entirely when only its shapes and contrast matter.
- Choose a plain grayscale conversion instead when the goal is a neutral, colour free result rather than a stylised mood.
Why alpha and pure white or black limit the range
Transparent pixels in the source image keep their alpha channel through the effect, so a PNG with a transparent background stays transparent, it is only the visible pixels' colour that changes. Fully black or fully white source pixels always map to the exact shadow or highlight colour respectively, so an image with large pure white or pure black regions, common in scanned documents or high contrast graphics, will show large solid blocks of one of your two chosen colours rather than a smooth gradient.
Choosing a shadow and a highlight colour that are too close in lightness flattens the whole effect, since luminance differences that would otherwise show up as clear tonal contrast collapse into two very similar looking output colours. A wide lightness gap between the two, even when their hues are similar, keeps the underlying photo's contrast and detail readable.
Choosing shadow and highlight colours
Classic duotone palettes pair a dark, cool colour, often a deep blue, purple or near black, as the shadow with a warm, bright colour, commonly orange, yellow or a warm pink, as the highlight, since that combination reliably produces strong, legible contrast while feeling intentional rather than random. High contrast pairs read as bold and graphic, while two colours that are closer in lightness but still different in hue produce a softer, more muted mood.
It helps to think of the shadow colour as replacing black and the highlight colour as replacing white in the original photo, so any pairing that would look reasonable as text on a background, checked with a contrast tool, tends to also work well as a duotone pair.
This duotone image generator rewrites pixels, it does not paint new ones
The uploaded image is drawn onto a canvas at its original resolution, and the canvas element's getImageData method reads every pixel's red, green, blue and alpha values into a single typed array. The tool then loops over that array, calculating luminance for each pixel and writing back a new red, green and blue value interpolated between the shadow and highlight colours, leaving the original alpha value untouched.
Once every pixel has been rewritten, putImageData writes the modified array back onto the canvas, and the canvas is exported to a PNG blob through the standard toBlob method, which preserves the transparency the effect deliberately left alone.
Using duotone images on the web
A PNG export keeps full pixel accuracy and any transparency from the source image, which matters if the duotone photo will sit on top of a coloured background or another image. Because a duotone image typically compresses very well thanks to its limited colour range, converting the exported PNG to a smaller format afterward is worth doing for anything destined for a web page rather than print.
| Pixel luminance | Output colour |
|---|---|
| 0% (pure black) | Exactly the shadow colour |
| 25% | Mostly shadow, a quarter of the way toward highlight |
| 50% | The midpoint between shadow and highlight |
| 75% | Mostly highlight, a quarter of the way from it toward shadow |
| 100% (pure white) | Exactly the highlight colour |
How to create a duotone image
- 1
Upload your photo
Drag an image onto the drop area or click it to choose a file from your device.
- 2
Pick a shadow colour
Choose the colour that will replace the darkest parts of your photo.
- 3
Pick a highlight colour
Choose the colour that will replace the brightest parts of your photo.
- 4
Download the result
Review the preview, then download the finished duotone image as a PNG file.
Related tools worth bookmarking
Sources and further reading
- MDN: ImageDataThe MDN reference for the pixel array this tool reads and rewrites to build the duotone effect.developer.mozilla.org
- WHATWG: HTML Living Standard, the ImageData interfaceThe specification defining the ImageData interface and the canvas pixel manipulation methods used here.html.spec.whatwg.org
Frequently asked questions
Common questions about the duotone image generator.
No. This duotone image generator does the remap by calling getImageData on a canvas holding your photo, reading the red, green and blue value of every pixel with the same 0.2126, 0.7152, 0.0722 luminance weights described above, and writing a new colour straight back into that same pixel array. That loop runs against memory already sitting in your browser tab, so there is no point in the process where a request carrying the image could be made even if the code wanted to.
Luminance is a single brightness value calculated from a pixel's red, green and blue channels using perceptual weights that give green far more influence than red or blue. Using luminance rather than the original colour is what allows every pixel to be remapped consistently onto just two chosen colours, which is the defining property of a duotone effect photo.
Yes, any photo can be processed, though images with strong existing contrast between light and dark areas tend to produce the clearest, most striking two color photo effect, since the luminance differences that drive the gradient are more pronounced. Flat, evenly lit photos still work but produce a subtler result.
Yes, that is the entire point of running this as a duotone filter online rather than as a plugin for dedicated design software. Everything needed to compute the effect, decode the image, read its pixels and re encode the result, is already built into a modern browser.
Transparency is preserved. The alpha channel of every pixel is read and written back completely unchanged, only the red, green and blue values are replaced by the shadow and highlight colour map, so a PNG with a transparent background stays just as transparent after the effect is applied.
Pick a shadow and highlight colour that sit far apart in lightness, one genuinely dark and one genuinely bright, since that is what drives strong contrast through the shadow and highlight color map. Two colours that are close in lightness, even if their hues differ noticeably, tend to produce a much flatter, lower contrast result.