Duotone Generator
Generate a duotone effect that maps image shadows and highlights to two chosen colours, using CSS filters and blend modes with no image editing, plus the SVG filter version.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Duotone maps tones, it does not tint
A tint overlays one colour at partial opacity, which lightens or darkens everything uniformly and leaves the image looking washed out. A duotone maps the tonal range instead: the darkest parts of the image become one colour and the lightest become another, with everything between interpolated. That preserves contrast and detail while replacing the palette entirely, which is why it reads as a deliberate treatment rather than a filter.
Two routes, with different trade-offs
The CSS route desaturates the image and stacks two blend layers, which needs no extra files and works on any image without preparation. It is approximate: the blend modes do not map tones exactly the way a true duotone does, and the result is close rather than identical. The SVG filter route uses a component transfer to map each channel precisely, which is what image editors do, and requires an SVG filter definition in the document.
Contrast is what makes it work
A duotone with two similar colours produces a flat image, because the tonal range has nowhere to travel. The two colours need meaningful separation in lightness, not just in hue, and the darker one should genuinely be dark. Choosing two mid-tone colours of different hues is the usual mistake, and it produces a muddy result that looks like a mistake rather than a choice.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
What is the difference between duotone and a tint?
A tint overlays one colour at partial opacity, which washes the image out uniformly. A duotone maps the tonal range, so shadows become one colour and highlights another, preserving contrast and detail.
Which method should I use?
The CSS one for convenience, since it needs no extra files and works on any image. The SVG filter when accuracy matters, because it maps each channel precisely the way an image editor does rather than approximating with blend modes.
Why does my duotone look flat?
Because the two colours are too close in lightness. The tonal range needs somewhere to travel, so the dark colour must be genuinely dark. Two mid-tone colours of different hues produce a muddy result.
Does this work on any image?
It works best on images with a full tonal range and clear contrast. A flat, low-contrast photograph has little tonal range to map, so the duotone comes out as close to a flat colour.
Is the CSS version accurate?
It is close rather than exact. Blend modes do not reproduce the precise tonal mapping a true duotone performs, and for most uses the difference is not noticeable. Use the SVG filter where it matters.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Choose two colours to generate a duotone treatment for images.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.