Colors
Duotone-Generator
Used by developers, writers, and creators worldwide.
A duotone generator produces the two-color pair that drives the duotone photo effect, where a grayscale image is remapped so its darkest tones take a shadow color and its brightest tones take a highlight color. From a single shadow hue it builds a deep, saturated shadow and a bright, slightly hue-shifted highlight that work together as a smooth tonal map, then bundles a gradient and a CSS blend snippet to apply the look. Duotones give photography a striking, unified, on-brand feel and are a staple of editorial, music, and tech design. Designers use the pair to map images in design tools or to drive SVG feColorMatrix and CSS blend treatments on the web. Each value is paste-ready: copy the two stops for an image editor, or the gradient and blend CSS for an in-browser approximation. Choose a darker shadow and lighter highlight for the cleanest, most legible tonal separation.
Read the complete guide — 4 min read
Loading usage…
Free forever — no account required
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Set your shadow hue from 0 to 360.
- Click Generate to build the duotone pair.
- Map shadows and highlights to the two colors.
- Use the gradient and blend CSS for a web version.
Use Cases
- •Applying a branded duotone to a photo
- •Creating editorial or music-style image treatments
- •Mapping shadows and highlights in a design tool
- •Driving an SVG or CSS duotone on the web
- •Unifying a set of images under one color theme
Tips
- →Use a dark shadow and light highlight for clean separation.
- →Apply grayscale first for the truest duotone.
- →For web, an SVG feColorMatrix gives the best result.
- →Reuse one duotone pair across a photo set for unity.
FAQ
how does a duotone map work
The image is first reduced to grayscale, then its luminance is remapped so dark pixels take the shadow color and light pixels take the highlight color, with midtones blending between the two for a smooth two-color image.
why shift the highlight hue
A small hue shift between shadow and highlight adds richness and avoids a flat, monochromatic tint. The offset gives the duotone a sense of warmth-to-cool movement that reads as more designed.
how do i apply it on the web
The cleanest method is an SVG feColorMatrix or a filter with the two colors. The provided gradient plus background-blend-mode gives a quick CSS approximation, though SVG gives the most faithful result.
You might also like
Popular tools from other categories that share themes with this one.