Two colors, one mood
A duotone takes a photo and remaps it onto a gradient between exactly two colors. The dark parts of the image become your shadow color. The bright parts become your highlight color. Everything in between gets a smooth blend of the two. That’s the whole trick, and it’s why a flat indigo-and-yellow portrait can feel like an album cover instead of a snapshot.
You’ve seen this everywhere. Spotify built half its early brand on it. Conference sites, app onboarding screens, that one band poster taped to your wall, all duotone. It flattens busy color into a single coherent palette, so a messy stock photo suddenly matches your brand.
Drop in an image and you’ll see the effect render live. Change the colors, the preview updates. Nothing uploads anywhere, the pixel math happens right in your browser on a canvas.
How to make one
- Drag an image onto the box (or click to browse). JPEG, PNG, WebP, all fine.
- Set the shadow color and the highlight color with the pickers, or paste a hex code.
- Tap a preset if you want a starting point. Blue/yellow is the classic.
- Hit Download PNG.
The preview is capped to fit your screen, but the download renders at the image’s full resolution. So a 4000px photo comes out at 4000px, not the shrunk preview size.
What’s happening under the hood
Each pixel gets boiled down to one number: its luminance. The formula is 0.299*R + 0.587*G + 0.114*B, which weights green heaviest because your eyes are most sensitive to it. A bright sky scores near 255, deep shadow near 0.
Then that single value picks a spot on the line between your two colors. Luminance 0 lands exactly on the shadow color, 255 on the highlight, and a mid-gray pixel at 128 sits halfway, blended channel by channel. Color hue from the original gets thrown out completely, which is the point. A red shirt and a blue shirt of the same brightness end up identical.
Want maximum contrast? Pick a near-black shadow and a near-white highlight, then nudge one toward a tint. Pure black and pure white technically gives you plain grayscale, so most duotones use a colored dark and a colored light instead.
Picking colors that actually work
Go for real contrast between the two. If your shadow and highlight are both mid-brightness, the result turns muddy and flat, like a photo left in the sun. The shadow should read clearly darker than the highlight.
Complementary pairs pop hardest. Teal and orange. Magenta and cyan. Indigo and gold. Analogous pairs (two neighbors on the color wheel, say navy and teal) give a calmer, more tonal look that’s great for backgrounds you’ll put text over.
Honestly, the fastest way to learn is to grab a preset and start dragging the color picker around. You’ll find a combo you like in about ten seconds.
Questions people ask
Is this the same as a gradient map?
Basically, yeah. A two-stop gradient map in Photoshop does the exact thing: maps luminance to a color ramp. Duotone is the two-color version. The math here matches a clean two-stop map with no curve adjustments.
Will it keep transparent backgrounds?
Yep. PNGs with transparency keep their alpha channel untouched, only the visible pixels get recolored. The download is always a PNG so transparency survives.
Why does my photo look washed out?
Your two colors are probably too close in brightness. Darken the shadow, lighten the highlight, and the contrast comes back. A flat result almost always means not enough tonal range between the pair.
Can I match an exact brand color?
Sure. Both pickers accept a hex code, so paste your brand’s #1DB954 or whatever and it’ll use it precisely. Grab a value from the Image Color Picker first if you need to pull it off an existing asset.
Does anything get sent to a server?
No. The whole effect runs locally on a canvas element. Your image never leaves the tab, which also means it works offline once the page has loaded.