About the Image Duotone Generator
Image Duotone Generator recolours an image with two colours. Each pixel’s luminance is mapped smoothly from your shadow colour (dark tones) to your highlight colour (bright tones), giving the popular duotone look. Adjust contrast to strengthen or soften the effect, invert to swap which tones get which colour, or start from a preset.
The original and duotone versions are shown side by side, and the selected colours are listed as HEX and RGB values you can copy as CSS custom properties. With preserve transparency on, PNG output keeps the original alpha; JPG output fills transparent areas with a background colour you choose. The download is full size, even when the preview is scaled down. Output colours can look slightly different between browsers and displays.
How to use
- Choose or drop a PNG, JPG or WebP image.
- Pick a preset or choose the shadow and highlight colours.
- Adjust contrast and choose invert or preserve transparency.
- Compare the original and duotone previews.
- Choose PNG or JPG and download, or copy the colours.
Key features
- Smooth luminance mapping between two colours.
- Contrast / intensity control and invert option.
- Preserve-transparency option for PNG output.
- Side-by-side original and duotone preview.
- HEX and RGB values with Copy CSS colours.
- Full-size PNG or JPG download with explicit JPG background.
- Colour presets to start quickly.
Best practices
- Choose a dark shadow and a light highlight for clear detail.
- Raise contrast for flat, low-contrast photos.
- Use PNG with preserve transparency for cut-out images.
- Match the colours to your brand palette.
- Check the result on the screens your audience will use.
Benefits
- Striking graphics in seconds.
- Consistent colour treatment across many images.
- Exact colour values you can reuse.
- Private: nothing is uploaded or stored.
Frequently asked questions
How does the duotone mapping work?
Each pixel’s luminance (0.2126 R + 0.7152 G + 0.0722 B) is turned into a value from 0 to 1, adjusted by the contrast setting, and used to blend linearly from the shadow colour (0) to the highlight colour (1).
What does preserve transparency do?
When it is on, PNG output keeps each pixel’s original alpha. When it is off, every pixel becomes fully opaque.
What happens to transparency in a JPG?
JPG cannot store transparency, so transparent areas are filled with the JPG background colour you choose.
Is the download full size?
Yes. The preview may be scaled down for speed, but the download is processed at the image’s full dimensions with the same settings.
Why do colours look different on another screen?
Browsers and displays handle colour differently. The file contains the exact values shown in the colour list, but how they appear can vary.
Can I reuse the colours elsewhere?
Yes. Copy CSS colours gives custom properties with HEX values and RGB comments, ready to paste into a stylesheet.
Which files can I use?
PNG, JPG and WebP files up to 40 MB and 30 megapixels. Each file’s signature is checked and the whole image is decoded before use, so GIF, SVG, damaged files and files renamed from another format are refused with a clear message.
Are my images uploaded or saved?
No. Images are opened and processed in your browser on your device. Nothing is uploaded, and images, pixels, settings and results are not saved in browser storage. Reset releases them from memory.