🎨 Duotone Image Generator
By ToolNimba Image Team · Updated 2026-06-19
PNG, JPEG, WebP and GIF are supported. Your image never leaves your browser.
Upload an image to begin. Everything runs locally on your device.
A duotone is a photo recolored with just two colors: one for the dark areas and one for the bright areas, with smooth shades in between. This generator does it entirely in your browser. Upload an image, choose a shadow color and a highlight color (or pick a ready-made preset), and watch the photo redraw in real time. Slide the intensity down to blend back toward the original, then download the result as a PNG. Nothing is uploaded, the image is processed on your own device.
What is the Duotone Image Generator?
A duotone effect takes a normal color photo and remaps it onto a two color scale. The first step is to read each pixel's brightness, also called its luminance. A common way to do this is the Rec. 601 weighting, luma = 0.299 x red + 0.587 x green + 0.114 x blue, which reflects that the human eye is far more sensitive to green than to blue. The result is a single number per pixel that describes how light or dark it is, from 0 (black) up to 255 (white). This is exactly the grayscale image you would get if you desaturated the photo.
The second step is the recoloring. Instead of painting dark pixels black and light pixels white, a duotone paints the darkest pixels with your chosen shadow color and the brightest pixels with your chosen highlight color. Every value in between is a straight-line blend of the two. If a pixel's brightness sits at, say, 40 percent of the way from dark to light, its new color is 40 percent of the way from the shadow color to the highlight color on each of the red, green and blue channels. This is called linear interpolation, and it is the same idea as a gradient map: the brightness axis becomes a two stop gradient.
Duotones are popular because they unify a messy set of photos into one consistent look, which is why brands and music artists use them across album covers, posters and social feeds. They also reproduce well in print, where they originated as a way to add a second ink to a black and white halftone for richer shadows. The colors you choose set the mood: a dark navy paired with a bright pink reads as moody and modern, while a brown shadow with a cream highlight gives a warm sepia feel. The intensity control here lets you stop short of a full duotone and keep a hint of the original colors, which is useful when a pure two tone look is too strong.
When to use it
- Giving a set of blog headers, product shots or team photos one consistent two color style.
- Creating moody album art, gig posters or social media graphics from an ordinary photo.
- Matching photos to a brand palette by mapping shadows and highlights to your brand colors.
- Making a striking hero image or background where text needs to sit cleanly over the photo.
How to use the Duotone Image Generator
- Click Choose an image and select the photo you want to recolor.
- Pick a shadow color for the dark areas and a highlight color for the bright areas, or choose a preset.
- Optionally lower the intensity slider to blend the duotone back toward the original colors.
- Use Swap colors if you want the darks and lights to trade places.
- Click Download duotone image to save the result as a PNG.
Formula & method
Worked examples
A mid-gray pixel R=128, G=128, B=128, mapped from navy (R=26, G=26, B=64) to pink (R=255, G=122, B=198) at full intensity.
- luma = (0.299 × 128 + 0.587 × 128 + 0.114 × 128) ÷ 255
- luma = 128 ÷ 255 = 0.502 (this is t)
- Red = 26 + (255 − 26) × 0.502 = 26 + 114.9 = 140.9, rounds to 141
- Green = 26 + (122 − 26) × 0.502 = 26 + 48.2 = 74.2, rounds to 74
- Blue = 64 + (198 − 64) × 0.502 = 64 + 67.3 = 131.3, rounds to 131
Result: The gray pixel becomes a muted purple, R=141, G=74, B=131.
A near-white pixel with luma t = 0.95, mapped from navy to pink at full intensity.
- Red = 26 + (255 − 26) × 0.95 = 26 + 217.6 = 243.6, rounds to 244
- Green = 26 + (122 − 26) × 0.95 = 26 + 91.2 = 117.2, rounds to 117
- Blue = 64 + (198 − 64) × 0.95 = 64 + 127.3 = 191.3, rounds to 191
Result: The bright pixel lands close to the highlight pink, R=244, G=117, B=191.
Popular duotone color pairings and the mood they create
| Preset | Shadow color | Highlight color | Mood |
|---|---|---|---|
| Midnight | Navy #1a1a40 | Pink #ff7ac6 | Modern, bold, editorial |
| Sepia | Brown #3b2415 | Cream #f4e4c1 | Warm, vintage, nostalgic |
| Cyanotype | Blue #0b3d6b | White #eef6ff | Cool, classic photographic |
| Forest | Green #0f3d2e | Lime #c2f04a | Fresh, natural, energetic |
| Grape | Purple #2d1b4e | Gold #f5c518 | Rich, luxurious, dramatic |
| Mono | Black #000000 | White #ffffff | Plain grayscale baseline |
Common mistakes to avoid
- Choosing two colors that are too close in brightness. If the shadow and highlight colors are similar in lightness, the photo loses contrast and looks flat and muddy. Pick a clearly dark color for the shadows and a clearly light color for the highlights so the tones still separate.
- Expecting fine detail in very dark or very bright photos. A duotone only has as much tonal range as the original. A photo that is mostly shadow maps almost entirely to the shadow color, so most of the highlight color never appears. Start with a well-exposed image that has both dark and light areas.
- Confusing duotone with a simple color tint. A tint overlays one color on the whole image. A duotone uses two colors and routes them by brightness, so darks and lights get different hues. That two color split is what gives duotones their distinctive look.
- Forgetting which color maps to which end. The shadow color replaces the darkest pixels and the highlight color replaces the brightest. If the result looks inverted, your light and dark colors are the wrong way round, use the Swap colors option to flip them.
Glossary
- Duotone
- An image recolored using two colors, one mapped to the dark tones and one to the light tones, with a smooth blend between.
- Luminance (luma)
- A single number describing how bright a pixel is, computed from its red, green and blue values using weights that match human vision.
- Grayscale
- An image where every pixel is a shade of gray based only on its brightness, with all color removed. It is the first step in making a duotone.
- Linear interpolation
- Blending two values in a straight line, so a brightness halfway between dark and light produces a color halfway between the two chosen colors.
- Gradient map
- A technique that replaces an image’s brightness scale with a gradient of chosen colors. A two stop gradient map is exactly a duotone.
- Highlight and shadow
- The brightest and darkest areas of an image. In a duotone they are assigned the two chosen colors.
Frequently asked questions
What is a duotone image?
A duotone is a photo recolored with two colors instead of full color. The brightness of each pixel decides its new color: the darkest areas take the shadow color, the brightest take the highlight color, and everything in between is a smooth blend of the two. The effect is widely used for posters, album art and brand imagery because it gives a clean, unified look.
How does this duotone generator work?
It reads each pixel of your image, calculates its brightness using a standard luminance formula, and then maps that brightness onto a two color scale running from your shadow color to your highlight color. The whole process runs in your browser using the HTML canvas, so your photo is never uploaded anywhere.
Is my image uploaded to a server?
No. The image is loaded and processed entirely on your own device using your browser. Nothing is sent over the network, which keeps private photos private and makes the tool fast even on large files.
What colors work best for a duotone?
Pick a dark color for the shadows and a noticeably lighter color for the highlights so the photo keeps its contrast. Strong, contrasting pairs like navy and pink or deep purple and gold tend to look bold, while a brown and cream pair gives a softer, vintage feel. The presets here are good starting points.
Can I keep some of the original color?
Yes. Lower the intensity slider below 100 percent and the tool blends the duotone back toward the original photo. At 0 percent you see the original image, at 100 percent you get a pure two color duotone, and values in between mix the two.
What file format does the download use?
The duotone is saved as a PNG, which is lossless and supports transparency. If your original had transparent areas, those stay transparent in the result because the tool keeps each pixel’s original alpha value.