Free Image Duotone Effect

Apply stunning duotone color effects to your images with custom color combinations. Free, fast, and works entirely in your browser with no sign-up required.

Updated

Share:
Home/Image Tools/Image Duotone Effect

Image Duotone Effect

Apply duotone and tritone color effects to images. 40+ presets, batch processing, before/after compare, CSS code export, and more.

Settings

Preview

Click to upload an image

PNG, JPG, WebP supported

Or use "Batch Upload" for multiple images

About Duotone & Tritone Effects

Duotone:

Replaces image colors with a gradient between two colors. Shadows become the dark color, highlights become the light color.

Tritone:

Adds a third color for midtones, giving more control over the color mapping. Great for more complex color effects.

Brand Presets:

Includes color schemes inspired by Spotify, Instagram, YouTube, Discord, and more for on-brand visuals.

Tips:
  • Use the intensity slider to blend the effect with the original image
  • High contrast images work best for dramatic duotone effects
  • Try the tritone presets for more sophisticated color combinations
  • Adjust midtone position to control where the third color appears
  • Use "Compare" mode to see a before/after slider view
  • Batch upload multiple images and apply the same effect to all at once
  • Save your favorite color combos for quick reuse across sessions
  • Generate CSS code to approximate the duotone effect in web projects
  • Click "Random" to discover new harmonious color combinations

Frequently Asked Questions

What is the Image Duotone Effect?

The Image Duotone Effect is a free online tool that applies two-color tone effects to images, creating striking visual styles popular in modern design.

Is the Image Duotone Effect free?

Yes, it is completely free with no registration required. All effects are applied client-side in your browser.

Can I choose my own colors?

Yes, the Image Duotone Effect lets you pick any two colors for the highlights and shadows to create your custom duotone style.

Is my data safe with this tool?

Absolutely. The Image Duotone Effect processes everything client-side in your browser. No data is uploaded to or stored on any server. Your content remains private on your device at all times.

Does the Image Duotone Effect work on mobile devices?

Yes, the Image Duotone Effect is fully responsive and works on smartphones and tablets. You can use it on any device with a modern web browser -- no app download required.

Do I need to create an account to use this tool?

No account or registration is needed. Simply open the Image Duotone Effect in your browser and start using it immediately. There are no sign-up walls or usage restrictions.

What image formats are supported?

The Image Duotone Effect supports common image formats including PNG, JPG/JPEG, WebP, and GIF. Some features may also support SVG and BMP depending on the specific tool.

How do I use the Image Duotone Effect?

Simply enter your input in the provided field, adjust any settings to your preference, and the tool will process it instantly. You can then copy the result to your clipboard or download it.

Which browsers are supported?

The Image Duotone Effect works in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. For the best experience, use the latest version of your preferred browser.

What is the difference between a duotone and a tritone effect?

A duotone maps an image's tonal range onto just two colors: one fills the shadows, the other fills the highlights, and every midtone blends along a gradient between them. A tritone adds a third color in the middle, so shadows, midtones, and highlights each get their own hue. The third color gives you richer, more cinematic transitions than two colors can produce, which is why looks like sunsets, auroras, and vaporwave gradients rely on it. This tool supports both: leave tritone off for a clean two-color treatment, or switch it on to introduce a midtone color, then use the midtone-position slider (10 to 90) to control where that third color peaks in the brightness range. Try toggling tritone on a high-contrast photo to see how much depth the extra color adds.

How does a duotone tool convert a color photo into two tones?

It works in two stages. First, every pixel is converted to grayscale using the standard luminance formula (0.299 times red, plus 0.587 times green, plus 0.114 times blue), which weights brightness the way the human eye perceives it rather than averaging the channels equally. Second, that single brightness value is remapped onto a gradient between your two chosen colors: the darkest pixels take the shadow color, the brightest take the highlight color, and everything in between blends smoothly across the two. All of this runs pixel by pixel on an HTML canvas in your browser, so there is no quality loss from re-uploading. Because the result depends on brightness, photos with clear light and dark areas reproduce best. Upload an image and pick two colors to watch the recolored version appear next to the original in real time.

What do the contrast, brightness, and intensity sliders actually do?

Each slider shapes a different part of the result. Contrast (50 to 200 percent) widens or compresses the tonal range before colors are mapped, so a higher value makes the duotone look more graphic and punchy while a lower value keeps it subtle. Brightness (50 to 150 percent) lifts or lowers the overall exposure, shifting the balance between the shadow and highlight colors. Intensity (0 to 100 percent) blends the finished duotone back toward your original photo, letting you go from a faint color wash at low values to a full two-tone treatment at 100 percent. Used together they give you fine control over mood: crank contrast for poster-style impact, or drop intensity for a gentle on-brand tint over real photography. Start from a preset, then nudge these three sliders until the image matches the look you want.

Which export format should I choose: PNG, JPEG, or WebP?

It depends on what you need. PNG is lossless, so it keeps edges crisp and color transitions clean, making it the safest pick for graphics, logos over duotone, or anything you may edit again later. JPEG and WebP are lossy but support a quality setting (50 to 100 percent), letting you trade a little detail for a smaller file, which matters for web pages and email. WebP usually produces noticeably smaller files than JPEG at the same visual quality and is supported by all modern browsers, so it is often the best choice when page-load speed counts. For sharing on platforms that still expect older formats, JPEG remains the most universally compatible. This tool lets you download in all three, and for lossy formats you can dial in the quality before exporting your duotone image.

Can I apply the same duotone to multiple images at once?

Yes. Batch mode lets you upload several images and apply identical colors and settings to all of them in one pass, so a whole set comes out visually consistent without re-editing each photo by hand. This is ideal for a product gallery, a row of team headshots, or a social campaign that needs to look unified. You set up the look you want first, choosing your two colors (or three for tritone), contrast, brightness, and intensity, then run the batch so every image is recolored with the same treatment. When processing finishes you can download the results in your chosen format. Because everything runs client-side in your browser, none of the images are uploaded to a server, and processing speed depends on your own device and image sizes rather than a queue. Switch on batch mode to standardize a full image set quickly.

Embed This Tool

Add a free, live version of this widget to your own website or blog post — it runs entirely in your visitors' browsers, with a credit link back to The Toolbox.

Copy & paste this HTML
<iframe src="https://getthetoolbox.com/embed/duotone" title="Free Image Duotone Effect — The Toolbox" width="100%" height="320" style="max-width:480px;border:1px solid #e2e8f0;border-radius:12px" loading="lazy"></iframe>
<p style="font-size:12px;margin:4px 0 0"><a href="https://getthetoolbox.com/image-tools/duotone?utm_source=embed&utm_medium=widget" target="_blank" rel="noopener">Free Image Duotone Effect</a> by The Toolbox</p>

About the Image Duotone Effect

A duotone is an image rendered in just two colors — one mapped to the shadows and one to the highlights — with every tone in between blended along a gradient between them. The look is a staple of Spotify covers, magazine layouts, conference branding, and poster design because it strips a photo down to mood and contrast. This Image Duotone Effect recreates that style in your browser: upload a photo, pick two colors, and watch the recolored version appear next to the original in real time.

It is built for designers, marketers, and anyone who wants an on-brand image without opening Photoshop. The tool is free, needs no account, and processes everything on your own device — your photos are never uploaded to a server.

How the duotone effect works

The tool first converts your image to grayscale using the standard luminance formula (0.299 × red + 0.587 × green + 0.114 × blue), which weights brightness the way the human eye perceives it. It then remaps that brightness range onto a gradient between your chosen dark and light colors, so pure shadows take the dark color, pure highlights take the light color, and midtones blend smoothly across the two. All of this happens on an HTML canvas, pixel by pixel, with no quality loss from re-uploading.

A few controls shape the result:

  • Contrast (50–200%) — widens or compresses the tonal range before color mapping, making the effect more graphic or more subtle.
  • Brightness (50–150%) — lifts or lowers overall exposure.
  • Intensity (0–100%) — blends the duotone back toward the original photo, so you can go from a faint color wash to a full two-tone treatment.

Presets, custom colors, and tritone

You can start from 41 built-in presets grouped into Classic, Vibrant, Soft, Dark, Brand, and Tritone categories — ready-made pairings like Classic Blue, Cyberpunk, and Sepia. Or build your own: the dark (shadow) and light (highlight) pickers accept any hex value, a single click swaps the two colors, and a randomize option generates harmonious pairings when you want a quick starting point.

For more depth there is a tritone mode, which adds a third midtone color between the shadows and highlights. A midtone-position slider (10–90) controls where that third color peaks in the brightness range. Tritone presets such as Sunset Glow, Aurora, and Vaporwave use this to create richer, more cinematic color transitions than a standard two-color duotone can.

Exporting and batch processing

When you are happy with the look, download the result as a PNG, JPEG, or WebP file. PNG is lossless and keeps edges crisp; JPEG and WebP support a quality setting (50–100%) so you can trade a little detail for a smaller file. WebP often produces noticeably smaller files than JPEG at the same visual quality — useful where page load speed matters.

Working on a set of images that all need the same treatment — a product gallery, a row of team headshots, or a social campaign? Batch mode lets you upload multiple images and apply identical colors and settings to all of them at once, so a whole set comes out visually consistent without redoing each photo by hand.

Privacy and how to get the most from it

Because the Image Duotone Effect runs entirely client-side in your browser, nothing is sent to or stored on any server, and it keeps working even after the page has loaded offline. Processing speed depends on your own device and image size rather than a server queue.

For the strongest results, start with a photo that has clear contrast between light and dark areas — flat, evenly lit images leave the effect little tonal range to work with. Try a preset first, then fine-tune the colors, contrast, and intensity until the image matches your brand or mood.