Free Duotone Generator for Photos

Duotone generator for turning photos into two-color images

This duotone generator maps the dark tones of your photo to one color and the light tones to another. You see the result instantly, compare it with the original, then download a PNG or copy matching SVG filter code. It is free, runs in your browser and needs no signup.

A duotone image uses just two inks or two colors. Duotone printing began with black plus one spot color, and web designers now use the same idea for hero banners, album art, team photos and brand-consistent galleries.

How to make a duotone image online

You can create a duotone image in under a minute. Follow these steps:

1. Drag an image into the upload area, click it to browse, or paste an image from your clipboard. No photo handy? Press Try a sample photo.
2. Set Shadows (dark tones) and Highlights (light tones) with the color pickers or by typing a HEX code. You can also click one of the eight duotone presets.
3. Press Swap colors if the result looks inverted. A dark highlight color on a light shadow color flips the mood of the picture.
4. Lower the Intensity slider to blend some of the original colors back in.
5. Drag Compare with original to the right to reveal the untouched photo from the left edge.
6. Click Download PNG to save the image, or copy the code from the Duotone SVG Filter and CSS Code panel.

Duotone generator settings you can control

The tool keeps the controls few so you can reach a good result quickly. Each one changes the live preview straight away.

• Shadow and highlight colors: each has a color picker and a text field that accepts HEX codes, short HEX such as #F90, and CSS color names. In supported desktop browsers an eyedropper button also lets you pick a color from your screen.
• Presets: eight ready-made pairs, including Amber Night, Pink Ocean, Cyan Purple and Noir Rose.
• Swap colors: exchanges the shadow and highlight colors in one click.
• Intensity: runs from 10% to 100%. At 100% the photo is fully two-tone. Lower values keep part of the original color.
• Compare with original: a slider that shows the source image on the left and your duotone on the right.
• Quick actions: Copy code, Copy colors (both HEX values), Download PNG, Reset and Share link.

Uploads accept PNG, JPG, WEBP and GIF files up to 25 MB. Processing happens in your browser, so your image is never uploaded.

How does a duotone effect map colors?

A duotone effect first turns each pixel into a gray value, then replaces that gray with a color on a straight line between your shadow color and your highlight color. Black pixels become the shadow color, white pixels become the highlight color, and everything in between blends the two.

The gray value uses the weights 0.2126 red, 0.7152 green and 0.0722 blue, the luma coefficients defined for Rec. 709 and sRGB. Green counts most because the eye is most sensitive to it.

Duotone color math with a real example

Take the default pair: shadow #1E1B4B = rgb(30, 27, 75) and highlight #F59E0B = rgb(245, 158, 11).

Shadow indigo Highlight amber

• A mid-gray pixel rgb(128, 128, 128) has a tone value of 128 / 255 = 0.502. The red channel becomes 30 + (245 - 30) x 0.502 = 138, green becomes 93 and blue becomes 43, giving rgb(138, 93, 43), a warm brown.
• A pure red pixel rgb(255, 0, 0) has a tone value of only 0.2126, so it lands near the shadow end at rgb(76, 55, 61). Saturated reds look dark in a duotone, even when they look bright in the photo.

At lower intensity, the tool mixes that result with the original pixel. At 50%, each channel is the average of the duotone value and the source value.

Duotone preset colors and what they suit

The presets give you a starting point. Click one, then fine-tune the HEX values.

Gold Red and Mint Deep complete the eight presets. For more pairing ideas, the color harmonies generator suggests complementary and analogous partners for any base color.

How to choose duotone colors that look good

Good duotone colors differ clearly in lightness, not just in hue. The effect depends on the gray tone of the photo, so the lightness gap between your two colors decides how much detail survives.

Pick a dark shadow and a light highlight

Choose a shadow color that is noticeably darker than the highlight color. If the two are close in lightness, the image turns flat and faces lose their shape. Check that both HEX values are what you expect with the HEX to RGB converter, which is useful when you hand values to a developer.

Check text contrast on a duotone image

Text over a duotone photo still has to be readable. WCAG 2.2 asks for a contrast ratio of at least 4.5:1 for normal text, as explained on the W3C Understanding Contrast (Minimum) page. Test your text color against both duotone colors with the contrast checker, because the photo area behind the text can be anywhere on the ramp.

Duotone SVG filter and CSS code for websites

The Duotone SVG Filter and CSS Code panel gives you an inline SVG filter that applies the same duotone filter to any image on your site. It uses the same tone mapping as the preview, so the live result and the page result match.

Switch between two tabs: HTML + CSS gives the filter, a style rule and a sample image tag, and SVG filter only gives just the filter markup. Press the copy button, paste it into your page, and replace photo.jpg with your own image. The filter turns the picture gray with a color matrix, then maps gray to your two colors with a component transfer, as described in the MDN documentation for feComponentTransfer.

<filter id="duotone-1e1b4b-f59e0b" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix" result="gray" .../>
  <feComponentTransfer in="gray">
    <feFuncR type="table" tableValues="0.1176 0.9608"/>
    ...
  </feComponentTransfer>
</filter>

When to use the PNG instead of the SVG filter

Use the SVG filter when you want to keep the original file and restyle it later, for example in a theme with several brand colors. Use the downloaded PNG when the image goes to social media, a slide deck or an email, where filters do not run. Very large photos may be scaled down on export to fit browser limits, and the notice tells you the final size.

Duotone photo effect ideas for web, print and social

A duotone photo effect makes mixed imagery look like one set. That consistency is the main reason designers use it.

• Website hero images: tint a busy photo with your brand colors so headline text stays readable on top.
• Team and portrait pages: apply one duotone pair to every headshot, so photos taken in different lighting match.
• Music, podcast and event art: a strong two-color image reads well at thumbnail size.
• Presentations and reports: a subtle duotone at lower intensity keeps stock photos from clashing with your slide theme.
• Campaign moodboards: test a few pairs, then collect the winners in the color mood board generator.

Want the exact HEX of a color in a photo before you choose a pair? Use the image color picker to sample it.

Duotone image tips and common mistakes

• Start with a contrasty photo. Foggy or underexposed pictures have little tonal range, so the duotone looks muddy. Brighten the source first.
• Avoid similar-lightness colors. A red shadow with a green highlight of equal lightness removes depth, even though the hues clash loudly.
• Do not rely on color alone. A duotone removes most hue information, so charts or product photos that depend on color coding may lose meaning.
• Keep the original. The download is a new PNG. Save your source file in case you want different colors later.
• Save your settings. Use Share link to copy a URL that holds your shadow color, highlight color and intensity. It does not contain the image.
• Sample colors from your brand photo. If you need palette ideas from an existing picture, try palette from image and paste the best two HEX codes here.

If you want a smooth color ramp as a page background to go with your photo, build one with the CSS gradient generator, using the same two HEX codes as your duotone.