Duotone Generator

Create a two-color image treatment

Duotone is a classic graphic technique that reduces a photo to two dominant colors. Instead of preserving the original hue of every pixel, the image is converted to tonal values and then mapped between a shadow color and a highlight color. This duotone generator performs that process directly on an HTML canvas in your browser. Upload an image, choose the two colors, preview the result and download a PNG without sending the file to a server.

The effect is useful for hero images, editorial graphics, social media artwork, album-style covers, product feature blocks and brand campaigns where regular photos need to feel unified. A navy and cream palette can feel serious and warm, while purple and cyan can feel energetic and digital. Since the mapping is based on brightness, photos with clear light and dark structure usually produce the strongest results. Flat screenshots or very low-contrast images may need editing before the duotone treatment looks dramatic.

How the browser processes the image

After the image is decoded locally, the canvas reads every pixel. A luminance value is calculated from the red, green and blue channels, then that value becomes a mix ratio between the two selected colors. Dark pixels stay near the shadow color, bright pixels move toward the highlight color, and midtones blend between them. The alpha channel is preserved, so transparent PNG artwork remains transparent in the exported result.

Choosing better duotone colors

Strong duotone palettes usually combine a dark color with a much lighter one. If both colors have similar brightness, the final image can look muddy because shadows and highlights collapse together. Start with a deep brand color for shadows and a pale accent for highlights, then swap the colors if the mood feels inverted. After downloading the PNG, test it in the final layout with text and calls to action. A beautiful image treatment still needs enough contrast around any foreground content placed on top of it.