Uwarp

Or try an example

Brightness
Contrast

Help Us Improve

—

(—)

Duotone effect online

Apply a duotone filter online to create duotone photo and duotone picture styles. Pick two colors, preview instantly, and download PNG.

What is a duotone effect?

A duotone effect maps each pixel brightness to a blend of two colors, often called a gradient map. This page applies a duotone filter workflow: desaturate the photo, optionally invert tones, adjust brightness and contrast on the grayscale layer, then interpolate between first and second color. The result creates bold duotone photo styling for posters, headers, and playlist-like artwork. Upload a photo, pick presets or custom hex values, preview live, and download PNG in your browser.

Duotone controls

Duotone filter controls with presets and tone sliders.

  1. Brightness and contrast: Shape the grayscale pass before two-color mapping (−100 to +100 each).
  2. Presets A through I: Eight curated shadow/highlight pairs per section, plus custom hex pickers.
  3. First and second color: Shadow and highlight endpoints with swatch and hex input.
  4. Invert toggle: Flip luminance before the gradient map.
  5. Live preview: Output refreshes when any option changes.
  6. PNG download: Save as duotone-effect-spotify.png.

How to create a duotone image

Steps for duotone photo and duotone picture edits.

  1. Upload your photo: Use a portrait or graphic with clear light–dark separation.
  2. Pick a color section: Try presets A–I or switch to Custom for brand hex values.
  3. Tune brightness and contrast: Raise contrast for punch; lower brightness for moodier shadows.
  4. Download PNG: Export for social headers, posters, or playlist-style art.

Tips for duotone photos

Get cleaner duotone picture and photo results.

  1. Start with section A preset 2: Red and navy is a classic high-contrast pair for portraits.
  2. Contrast shapes the look: Higher contrast pushes midtones toward highlights; lower contrast feels moodier.
  3. Separate shadow and highlight brightness: Pick a dark first color and a lighter second color for readable faces.
  4. Try invert for variety: Invert swaps which color lands in shadows without changing the hex pair.
  5. Pair with /grayscale-image: Compare against straight grayscale if you only need black and white.
  6. Export PNG: PNG keeps edges sharp for overlays and social crops.

When to use duotone

Typical uses for two-color gradient maps.

  1. Playlist and album art: Bold shadow/highlight pairs echo streaming cover aesthetics.
  2. Social headers: Unify campaign photos under two brand colors.
  3. Posters and flyers: High-contrast duotone reads well in print and thumbnails.
  4. Brand mockups: Test palette pairs on real photography before design lock-in.

Why use this duotone tool

Browser-based gradient-map editing.

  1. No account: Upload, preview, and download without signing in.
  2. Private processing: Images stay on your device.
  3. Preset library: 72 built-in pairs across sections A–I.
  4. Instant feedback: See color and tone changes before export.
  5. Free: Unlimited previews and PNG downloads.

Technical details

How duotone processing works here.

  1. Pipeline: Desaturate → optional invert → brightness/contrast on luminance → two-color gradient map.
  2. Luminance weights: 0.3 red + 0.59 green + 0.11 blue for grayscale and color ordering.
  3. Tone sliders: Brightness and contrast values are divided by 100 (−1 to +1) before processing.
  4. Alpha channel: Transparency on PNG uploads is preserved; only RGB is remapped.
  5. Input limits: 15 MB; longest edge 8192 px.
  6. Browser support: Chromium, Firefox, Safari with Canvas 2D.

Frequently Asked Questions

Have questions? We have answers.

Related tools

More tools from Image & Conversion.

View all Image & Conversion