BYTETOOLS

How to Make a Duotone Image Online in Your Browser

To make a duotone image, upload a photo to the ByteTools Duotone tool, choose one color for the shadows and one for the highlights, and the tool maps every pixel's brightness onto a gradient between the two colors — then download the PNG. The whole process takes under a minute and never uploads your file to a server.

A duotone is that bold two-tone look you see on Spotify covers, conference posters and modern brand headers. Instead of full color, the image is reduced to a smooth gradient that runs from a dark shadow color to a bright highlight color. Below is exactly how to create one, plus what each step controls.

What the Duotone tool actually does

The tool reads the luminance (perceived brightness) of each pixel in your photo. Dark pixels get pushed toward your chosen shadow color, light pixels toward your highlight color, and everything in between lands on a straight gradient across those two colors. Because it works on brightness rather than the original hues, a duotone looks cohesive no matter how colorful the source photo was. It runs in a single pass on an HTML canvas, so the preview updates the instant you change a color.

Step-by-step: making your first duotone

  1. Add an image. Drag a JPG or PNG into the upload area, or click to browse your device. Portraits and high-contrast photos convert especially well.
  2. Pick a shadow color. This replaces the darkest tones. A deep, saturated color like navy, maroon or forest green anchors the image.
  3. Pick a highlight color. This replaces the brightest tones. A light, warm or vivid color such as gold, cyan or pink gives the gradient somewhere to travel.
  4. Watch the live preview. The result recolors instantly, so swap colors freely until the mood feels right.
  5. Download the PNG. Click Download to save the finished duotone to your device at full resolution.

Choosing colors that map cleanly

The gap between your two colors is what makes a duotone read well. If shadow and highlight are too close in brightness, the image looks flat and muddy. The table below shows reliable starting pairs.

Shadow colorHighlight colorMood
Deep navyWarm goldPremium, editorial
Dark purpleBright yellowMusic / poster energy
TealSoft pinkModern, friendly
BlackWhiteClassic monochrome

Why it stays private

Every step above happens locally in your browser using the canvas API. Your photo is read into memory on your own device, recolored, and offered back as a download — it is never transmitted anywhere. That means brand assets, client photos and personal images stay on your machine, and the tool even works offline once the page has loaded.

Try the Duotone Image tool — free and 100% in your browser.

FAQ

What image formats can I upload for duotone?

Common web formats like JPG, PNG and WebP work. The output is delivered as a PNG, which keeps the recolored gradient crisp and supports transparency where the source has it.

Can I make a duotone without any design software?

Yes — that is the whole point. You do not need Photoshop or a subscription. A browser and a photo are enough, and the two color pickers replace what would otherwise be an adjustment-layer workflow.

Does a larger image take longer to convert?

Very large photos take marginally longer because there are more pixels to map, but the single-pass approach keeps it near-instant for typical web and social sizes. The preview reflects any color change immediately.

Will the duotone lose detail from my photo?

Duotone intentionally discards original color, but it preserves tonal detail — shadows, midtones and highlights all remain distinct because the mapping follows brightness. High-contrast source photos keep the most detail.

Related free tools

Built by ByteVancer

ByteTools is a free product of ByteVancer, a software and web development studio that builds web apps, SaaS platforms and custom software. If you need a polished product or a bespoke tool built for your team, explore what ByteVancer can create with you.