Duotone & Colour Overlay Generator
The Spotify-poster effect: map shadows to one colour and highlights to another.
Shifts where the crossover between the two colours falls.
What the duotone & Colour Overlay Generator does
A duotone maps an image's tonal range onto two colours instead of black and white. Every pixel's brightness is measured, and that single value picks a colour along a gradient running from your shadow colour to your highlight colour. The result keeps all the structure of the photograph while discarding its original hues entirely, which is why it is such a reliable way to make a mixed set of photos look like they belong to one brand.
The technique comes from print, where it was a practical necessity: running a photograph in two ink colours cost less than four-colour process and gave richer blacks than one. It survives because it looks deliberate. Album covers, conference sites and campaign landing pages use it constantly.
Three modes are offered. Duotone is the full effect described above. Single tint multiplies a greyscale version by one colour, which keeps the shadows neutral and washes the rest — softer, and often better when the image sits behind text. Colour overlay blends a colour into the original photograph without desaturating it first, so the subject keeps some of its own colour.
The midpoint control shifts where the crossover between your two colours falls. Below 50% more of the image takes the highlight colour, which lightens the overall result; above 50% the shadow colour dominates. It is the fastest way to fix a duotone that looks muddy: most of the time the image simply needs its crossover moving rather than different colours.
For the best results, pick two colours with a clear difference in brightness as well as hue. Two mid-tone colours produce a flat, low-contrast image no matter how well they go together.
How to use it
- Load a photograph — images with a good range from dark to light work best.
- Pick a preset pair, or set your own shadow and highlight colours from your brand palette.
- Move the midpoint until the balance looks right; this fixes most muddy results.
- Drop the opacity if you want the original colours partly visible, then download.
A worked example
A portrait taken against a grey wall, with a lime-and-navy brand palette:
| Settings | Result |
|---|---|
| Shadow #1a1a5e, highlight #c6f24e, midpoint 50% | Balanced; strong brand read |
| Same colours, midpoint 30% | Brighter, lime dominant — good behind dark text |
| Same colours, midpoint 70% | Moodier, navy dominant — good behind light text |
| Two mid-tone colours, e.g. #5a7d9a and #9a7d5a | Flat and muddy whatever the midpoint |
The last row is the mistake worth avoiding. A duotone's contrast comes from the brightness gap between the two colours, not from how different their hues are. Choose one genuinely dark colour and one genuinely light one, and almost any hue pairing will work.
Frequently asked questions
Why does my duotone look flat and muddy?
Your two colours are probably too close in brightness. The effect maps the photo's tonal range onto the gap between them, so if both are mid-tone there is no range to map onto. Pick one dark and one light colour.
Should I use duotone or a single tint?
Duotone when the image is the focus and you want a strong graphic look. Single tint when the image sits behind text — it keeps shadows neutral and dark, which preserves contrast for whatever is on top.
Can I do this in CSS instead of baking it into the file?
Approximately, using a coloured gradient with background-blend-mode: luminosity over a greyscaled image. The tool gives you that CSS. Support is good but the result differs slightly between browsers, so bake it in when precision matters.
What kind of photos work best?
Ones with a clear tonal range and a simple subject. Busy photographs with a lot of fine detail turn to mush, because the colour information that separated objects is gone. High-contrast portraits and simple architectural shots work particularly well.