🎨 Duotone Generator: Free Two Color Photo Effect Maker
By Shihab Mia · Updated 2026-07-11
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 generator recolors a photo using just two colors: one for the dark areas and one for the bright areas, with a smooth blend of shades in between. Upload an image, choose a shadow color and a highlight color (or pick a ready made preset), and this tool redraws the photo in real time on the HTML canvas. Slide the intensity down to blend back toward the original, swap the two colors if the result looks inverted, then download the result as a PNG. Nothing is uploaded: your image is processed entirely on your own device, so private photos stay private and even large files stay fast.
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.
The technique is older than digital editing. In offset printing a true duotone is a halftone image printed with two inks, usually black plus one spot color, so a single black and white photograph gains richer shadows and a color cast without the cost of full four color CMYK. Photographers extended the idea to tritones (three inks) and quadtones (four) to fine tune the tonal curve. The on screen version you are using here reproduces the same visual result with RGB values instead of ink, which is why exported duotones tend to hold up well when they are later printed.
Duotones are popular because they unify a messy set of photos into one consistent look, which is why brands and music platforms lean on them heavily. Spotify built an entire visual identity around bold duotone photography in its 2015 rebrand, and the look spread to posters, playlists and ad campaigns across the industry. The colors you choose set the mood: a dark navy paired with a bright pink reads as modern and editorial, a brown shadow with a cream highlight gives a warm sepia feel, and a deep blue with a pale white recreates the classic cyanotype blueprint look.
Color choice is not only aesthetic, it decides contrast. Because a duotone compresses the whole image into the range between two colors, picking a shadow and a highlight that are close in lightness flattens the photo into mud. The wider the lightness gap between the two colors, the more the midtones separate and the more detail survives. This is also why the intensity control matters: dialing it below 100 percent mixes the duotone back with the original photo, which lets you keep a hint of real color when a pure two tone look is too aggressive, for example on skin tones or product shots.
One practical use worth calling out is text over images. A duotone strips a busy photo down to a predictable two color range, so if you choose a dark shadow color you get a background that white or light text sits on cleanly. Web Content Accessibility Guidelines (WCAG) ask for a contrast ratio of at least 4.5:1 for normal body text, and a well chosen dark duotone makes that far easier to hit than the unpredictable colors of the raw photo underneath.
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 exact brand colors.
- Making a striking hero image or background where light text needs to sit cleanly over the photo.
- Turning stock or phone photos into cohesive playlist covers, podcast art or newsletter banners.
- Prepping images for two ink or spot color print jobs where full CMYK is not available or too costly.
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 the darks and lights look inverted and need 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 x 128 + 0.587 x 128 + 0.114 x 128) / 255
- luma = 128 / 255 = 0.502 (this is t)
- Red = 26 + (255 - 26) x 0.502 = 26 + 114.9 = 140.9, rounds to 141
- Green = 26 + (122 - 26) x 0.502 = 26 + 48.2 = 74.2, rounds to 74
- Blue = 64 + (198 - 64) x 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) x 0.95 = 26 + 217.6 = 243.6, rounds to 244
- Green = 26 + (122 - 26) x 0.95 = 26 + 91.2 = 117.2, rounds to 117
- Blue = 64 + (198 - 64) x 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.
The same mid-gray pixel from example one, but at 40 percent intensity so some original color survives.
- At full intensity the duotone value is R=141, G=74, B=131 (from example one).
- The original pixel is R=128, G=128, B=128.
- Red = 128 + (141 - 128) x 0.40 = 128 + 5.2 = 133.2, rounds to 133
- Green = 128 + (74 - 128) x 0.40 = 128 - 21.6 = 106.4, rounds to 106
- Blue = 128 + (131 - 128) x 0.40 = 128 + 1.2 = 129.2, rounds to 129
Result: A gentler tint, R=133, G=106, B=129, that only nudges the photo toward the duotone.
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 |
Duotone versus related two and multi color effects
| Effect | Colors used | How it maps | Best for |
|---|---|---|---|
| Color tint | One | One color overlaid on the whole image | Subtle unifying wash |
| Duotone | Two | Shadow color to highlight color by brightness | Bold branded look |
| Tritone | Three | Shadow, midtone and highlight colors | Smoother tonal control |
| Quadtone | Four | Four inks across the tonal range | Fine art and rich print |
| Gradient map | Two or more | Any gradient mapped to brightness | Custom color grading |
Choosing colors for contrast, from shadow to highlight lightness gap
| Lightness gap | Example pair | Result |
|---|---|---|
| Very small | Gray shadow, light gray highlight | Flat, muddy, low detail |
| Medium | Teal shadow, sand highlight | Balanced, usable contrast |
| Large | Near black shadow, near white highlight | High contrast, crisp detail |
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.
- Using a busy photo and expecting clean text on top. A duotone helps text legibility, but only if the shadow color is genuinely dark. Pairing a light shadow with light text still fails the WCAG 4.5:1 contrast target. Pick a dark shadow when you plan to place light text over the image.
- Saving as JPEG and losing transparency. This tool exports PNG so transparent areas stay transparent and the two tone colors stay crisp. Re saving a duotone as a low quality JPEG can add blocky artifacts around high contrast edges, so keep the PNG for anything going to print.
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 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.
- Tritone and quadtone
- Extensions of the duotone that map the tonal range onto three or four colors or inks for smoother, richer results.
- Spot color
- A single premixed printing ink, such as a Pantone color, often used as the second ink in a printed duotone.
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 wider the lightness gap between the two colors, the more detail survives.
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. This is useful for keeping natural skin tones or product colors.
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 original alpha value. PNG also keeps the two tone colors crisp for print.
What is the difference between a duotone and a gradient map?
They are almost the same thing. A gradient map replaces the brightness scale of an image with any gradient you define, which can have two, three or many colors. A duotone is simply the two color case: a gradient map running from a single shadow color to a single highlight color.
How do I make a duotone in Photoshop or Canva instead?
In Photoshop, convert the image to grayscale then use Image, Mode, Duotone to assign inks, or add a Gradient Map adjustment layer for a live version. In Canva, apply a photo, open Edit image, and choose a Duotone filter, then customize the two colors. This tool does the same job for free with no software to install.
Why does Spotify and so many brands use duotone photos?
A duotone forces every image into the same two brand colors, so a whole feed of mixed photos suddenly looks like one campaign. Spotify made the technique famous in its 2015 rebrand, and it remains popular because it is cheap, instantly recognizable and works across posters, social posts and album covers.
Can I use a duotone background behind text on a website?
Yes, and it is one of the best uses. A duotone flattens a busy photo into a predictable range, so a dark shadow color gives a reliable background for light text. Aim for the WCAG contrast ratio of at least 4.5:1 for normal body text by choosing a genuinely dark shadow color.