On this page
- What Is a Duotone Effect?
- How to Make a Duotone Effect in Photoshop (Gradient Map Method)
- How to Make a Duotone Image Online for Free
- How to Make a Duotone Photo with AI in One Click
- Duotone Color Combinations That Actually Work
- Putting Text on a Duotone Without Losing Legibility
- Duotone for Carousels, Covers and Thumbnails
- When Not to Use a Duotone
- Frequently Asked Questions
You found a photo you love, but it clashes with everything else in your feed. Or the shot is fine and the layout around it is fine, yet together they look like they belong to different brands. A duotone effect fixes that in about a minute: it swaps every color in the photo for a blend of just two, so any image can match your palette.
This guide walks through what a duotone actually is, how to build one in Photoshop with a gradient map, how to get the same look without paid software, and how to do it in one prompt with AI. You also get a table of tested color pairs (with hex codes), plus the part most tutorials skip: which pairs work for social posts, carousels, covers and thumbnails, and when a duotone is the wrong call in 2026.
What Is a Duotone Effect?
A duotone is a photo recolored with two colors: one for the shadows and one for the highlights. Everything in between becomes a smooth blend of the two. Think of the gradient-heavy, punchy artist images you see on streaming apps, gig posters and album covers.
Under the hood, the image is converted to grayscale first. Then each brightness level gets mapped to a point on a two-color gradient. Pure black becomes your shadow color, pure white becomes your highlight color, and the midtones land somewhere between.
The look comes from print. In traditional printing, a duotone is a halftone reproduction made by overprinting one contrasting ink over another, most often black plus a second color, which is how a single-color photo could gain depth on a tight budget. Today it is a digital style, and it is a close cousin of the halftone look (dots instead of smooth gradients).
Why Designers Keep Using It
Three reasons, and they are all practical:
- It unifies messy photos. Ten photos from ten sources look like one set once they share two colors.
- It makes text easier to place. Removing color noise leaves you with clean light and dark regions.
- It is instantly on-brand. Use your brand's two main colors and every image becomes yours.
If you are building a consistent look across a feed, a duotone is one of the fastest levers. It pairs well with the ideas in our guide on building a social media aesthetic that actually builds your brand.
How to Make a Duotone Effect in Photoshop (Gradient Map Method)
There are two ways to do this in Photoshop. The older one is Image > Mode > Duotone, which only works on 8-bit grayscale images and is built around print inks. The one most designers use for screens is the gradient map, because it is non-destructive and works on a normal RGB photo. Here is the gradient map version.
Per Adobe's documentation, the Gradient Map adjustment maps the grayscale range of an image to the colors of a gradient: shadows go to one endpoint color, highlights go to the other, and midtones fall in the gradations between. That is exactly a duotone, so a two-stop gradient is all you need.
Step 1: Open Your Photo and Pick a Strong Image
Open the image in Photoshop. Pick a photo with real contrast: a clear light source, a dark background, or a bright subject on a mid-tone. Flat, foggy photos give muddy duotones, and no color choice will rescue them.
Step 2: Add a Gradient Map Adjustment Layer
Go to Layer > New Adjustment Layer > Gradient Map. Use the adjustment layer instead of Image > Adjustments > Gradient Map, because the layer version keeps your original pixels untouched and lets you change colors any time.
Step 3: Open the Gradient Editor
In the Properties panel, click the gradient preview bar. This opens the Gradient Editor. If a black-to-white gradient is loaded, you will see the photo turn grayscale, which is a good sign.
Step 4: Set Your Two Colors
Double-click the left color stop (the shadows) and choose your dark color. Double-click the right stop (the highlights) and choose your light color. Try the violet and orange pair from the table below: #5A17DD on the left and #F98F03 on the right.
Click OK. The photo now shows your duotone. If it looks backwards, with a dark sky where you wanted a light one, tick the Reverse option in the Properties panel to flip the gradient.
Step 5: Tune Contrast with Curves or Levels
This step separates a good duotone from a flat one. Add a Curves or Levels adjustment layer and place it below the gradient map, so it changes the grayscale before the colors are applied. Drag the shadow and highlight points inward slightly until the image has a real dark and a real light.
Enable Dither in the gradient map options if you notice banding in smooth areas like skies.
Step 6: Export
Export as a PNG or high-quality JPG for social. Keep the PSD with its adjustment layers so you can re-color the whole image in seconds when your brand palette changes.
How to Make a Duotone Image Online for Free
You do not need a subscription to get a duotone. Most free online editors offer a duotone filter or a two-color gradient overlay, and the method is nearly always the same:
- Upload your photo.
- Find the duotone or "color overlay" filter (sometimes under effects or filters).
- Choose a shadow color and a highlight color, either from presets or by typing hex codes.
- Adjust intensity, then download the result.
Free tools are fast, but watch for three limits. Presets can be generic, exports may be low resolution or watermarked, and you rarely get control over contrast before the colors are applied.
There is also a manual trick that works almost anywhere with layers. Convert the photo to black and white, place a solid shadow color layer above it set to Lighten, then a solid highlight color layer above that set to Multiply or Screen depending on the tool. It takes more fiddling than a gradient map, but the logic is the same.
If you do not know what colors to use, grab them from something you already have. Krumzi's free color picker from image pulls exact hex codes from any image, so you can lift a duotone pair straight from a logo or a product shot. For a background to sit behind a duotone photo, the mesh gradient generator makes smooth two- and three-color gradients you can match to your pair.
How to Make a Duotone Photo with AI in One Click
The AI route swaps the manual work for a sentence. In Krumzi, duotone is a one-click image filter, sitting alongside vintage, grain, high-contrast black and white and cinematic. You describe the design in plain language, for example:
"Make this photo a violet and orange duotone with the headline in white."
Krumzi builds the layout from your description, applies the filter and sets the text. Because everything stays editable, you can then adjust blend modes, add a background overlay, use an image mask to reshape the photo, or give the headline an outline or highlight for extra legibility. You are not stuck with the first result.
This is where duotone becomes a system rather than a one-off. Once you know your two brand colors, you can describe the same treatment for every post and get a matching set. If you want prompt wording that gets consistent results, our list of AI design prompts is a good starting point, and branded AI images for social media covers keeping a visual identity across generated images.
Duotone Color Combinations That Actually Work
Most guides tell you to "pick two colors" and stop. Here is what you really want: pairs where the shadow color is dark enough to anchor the image and the highlight color is light enough to make the subject pop. Use these hex codes as starting points.
| Shadow color | Highlight color | Mood | Best use |
|---|---|---|---|
| #5A17DD (violet) | #F98F03 (orange) | Bold, energetic, modern | Brand posts, product launches, carousel covers |
| #111827 (near black) | #F97316 (orange) | Poster-like, high contrast | Event announcements, sports, gig posters |
| #1E1B4B (deep indigo) | #FEF3C7 (warm cream) | Editorial, warm, calm | Quote posts, blog covers, personal brands |
| #3B0764 (dark purple) | #F0ABFC (pink) | Dreamy, nightlife, playful | Music, fashion, beauty |
| #064E3B (forest green) | #A7F3D0 (mint) | Fresh, natural, soft | Wellness, sustainability, food and lifestyle |
| #0F766E (teal) | #FDE68A (soft yellow) | Optimistic, sunny | Travel, community, education |
| #7F1D1D (deep red) | #FCA5A5 (light rose) | Dramatic, romantic | Campaigns, fundraising, announcements |
A quick way to choose: start with your brand color as the shadow, then pick a lighter, warmer or cooler color from across the color wheel for the highlight. Complementary pairs like violet and orange give the strongest punch. Analogous pairs like teal and yellow-green feel calmer.
Putting Text on a Duotone Without Losing Legibility
A duotone background gives you clean zones, but the midtones (the middle of the gradient) are the trap. There, the background often sits at a brightness close to your text color, and the headline disappears.
Try these rules:
- Put text over the shadow color, not the middle. Place headlines in the darkest area and use white or your highlight color.
- Check contrast, not your eyes. WCAG asks for at least 4.5:1 for normal text and 3:1 for large text (roughly 24px and up, or 18.5px bold). Type your hex codes into a checker like the WebAIM contrast checker.
- Know your pair. White on #5A17DD works out to about 8:1, which is comfortable. White on #F98F03 is only about 2.3:1, so use a dark color like #111111 (about 8:1) on the orange side instead.
- Darken the shadow end a little. A slightly deeper shadow color adds room for light text.
- Add an overlay or text outline. A semi-transparent dark overlay behind text, or an outline or highlight on the headline, fixes stubborn spots without redoing the image.
The numbers above are contrast ratios computed from the hex values with the standard WCAG formula, so you can verify them yourself.
Duotone for Carousels, Covers and Thumbnails
Social is where duotone earns its keep, because each format rewards a slightly different approach.
Carousels. Use one pair across every slide so the set reads as a unit. Alternate which color is dominant (violet-heavy on slide 1, orange-heavy on slide 2) for rhythm without breaking the palette. Keep the same layout grid for text. If you are building a swipe-through panorama, see our guide to a seamless Instagram carousel.
Covers and banners. Duotone makes a photo behave like a background, so it is ideal behind a big headline. Leave a calm, dark area for text and let the highlight color sit around the subject.
Thumbnails. Small sizes reward extreme contrast. Push the pair toward a dark shadow and a bright highlight, and keep the subject large. Our YouTube thumbnail guide covers the rest of the layout.
When Not to Use a Duotone
A duotone throws away real color, so skip it when color carries information or trust:
- Skin tones and portraits meant to look natural. Two-color skin can look sickly or theatrical. Fine for an artistic look, wrong for a headshot on a team page.
- Product photos. If a customer needs to know the true color of a sweater or a lipstick, do not recolor it. Use duotone on lifestyle or background shots instead.
- Food. Appetizing color disappears fast.
- Charts and anything color-coded. Legends stop working.
- Flat, low-contrast photos. They turn muddy. Fix contrast first or pick a different image.
A good compromise for product-led brands: keep the product in true color, cut it out, and place it on a duotone background. Our guide on making a transparent PNG shows how to get a clean cutout.
Frequently Asked Questions
What is the difference between a duotone and a gradient map?
A duotone is the look: a photo shown in two colors. A gradient map is a tool that produces it by assigning colors to brightness levels. In Photoshop, a two-stop gradient map gives you a duotone, while a gradient map with three or more stops gives you a tritone or a more complex color grade.
Can I make a duotone without Photoshop?
Yes. Many free online editors include a duotone or two-color overlay filter, and design tools like Krumzi offer duotone as a one-click image filter. You can also fake it in any layer-based editor by converting to black and white and stacking two solid color layers with blend modes.
What colors work best for a duotone?
Pick a dark shadow color and a lighter highlight color with clear brightness difference between them. Complementary pairs such as violet #5A17DD and orange #F98F03 give a bold result, while analogous pairs feel softer. Always test text contrast before you finalize.
Does a duotone work on any photo?
It works best on photos with strong contrast and a clear subject. Flat, low-contrast or busy images can turn muddy, and photos where accurate color matters, such as products or food, are better left in full color.
A month of posts, designed before your coffee cools
Describe the post. Krumzi designs it from scratch, on your brand, fully editable.
Start your free trial7-day free trial. No charge until day 8. Cancel in one click.
