A duotone effect turns a full-color image into a two-color image. Dark pixels move toward one chosen color, bright pixels move toward another, and the midtones blend between them.
The effect helps when a photo has to sit inside a design instead of competing with it. A busy image behind a heading can become easier to control once its original colors are removed. To try the effect on your own image, use the Duotone Effect and choose separate shadow and highlight colors.
What duotone means
Duotone started as a print idea: use two inks instead of a full color process. On the web, the name usually means a tonal remap rather than a literal print setup.
The image still keeps its shapes, contrast, and detail. What changes is the palette. Instead of red shirts, green trees, blue skies, and skin tones all pulling in different directions, the image uses one color scale.
A duotone image is not the same as a single-color tint. A tint pushes the whole photo through one color. Duotone uses brightness as the control, so shadows and highlights can separate more clearly.
The pixel mapping
Most digital duotone filters follow this process:
- Convert the image to grayscale or read each pixel’s luminance.
- Treat dark pixels as values near
0and bright pixels as values near1. - Interpolate between the shadow color and highlight color.
- Write the new color back to each pixel.
A black pixel becomes the shadow color. A white pixel becomes the highlight color. A middle gray pixel becomes a mix of the two.
That mechanism is why the effect works better on images with good tonal contrast. If the source photo is flat and low contrast, the duotone result can look muddy because too many pixels land in the same middle range.
Where duotone helps
Use duotone when the image supports a layout rather than carries factual detail.
Good places for the effect include:
- hero backgrounds with text on top
- blog covers and category images
- event posters and social cards
- section backgrounds that need a shared palette
- product or team images that need visual consistency
The main benefit is control. Two chosen colors are easier to align with a site palette than a photo containing hundreds of unrelated colors.
Where duotone fails
Do not use duotone when the original colors are the information.
It is a poor choice for:
- product photos where color accuracy matters
- food photos where natural color affects appeal
- charts, maps, or screenshots with color-coded meaning
- medical, legal, or documentary images
- images that already have weak contrast
A duotone filter can make a layout more coherent, but it removes color truth. That tradeoff is fine for mood and hierarchy. It is wrong when viewers need to inspect the real object.
Choosing the two colors
Pick the shadow color first. It controls the darkest areas and often sets the weight of the image. Deep navy, charcoal, burgundy, forest green, and dark violet give the image structure without relying on pure black.
Pick the highlight color second. It controls the bright areas and decides how much energy the image has. Pale yellow, cream, coral, mint, sky blue, and warm gray can all work, depending on the layout.
Starter pairings:
| Shadow | Highlight | Result |
|---|---|---|
#111827 | #f97316 | High contrast, poster-like |
#1e1b4b | #fef3c7 | Editorial, warm highlights |
#064e3b | #a7f3d0 | Soft green range |
#3b0764 | #f0abfc | Strong violet range |
Check text contrast after applying the effect. A good duotone image can still be a poor background if the middle tones sit too close to the text color.
Make a duotone image
Open the Duotone Effect, add a JPEG, PNG, or WebP image, then set the shadow and highlight colors. Use the balance control to shift the result darker or lighter before exporting.
For a brand image, paste exact hex values instead of choosing by eye. For example, use #0f172a for the shadows and #f97316 for the highlights if those are already part of your design system.
Decision rule
Use duotone when you need the shape and mood of a photo, not its original color. Keep the original image when color accuracy, product detail, or documentary value matters.
