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.
  • 01

    Start with section A preset 2

    Red and navy is a classic high-contrast pair for portraits.

  • 02

    Contrast shapes the look

    Higher contrast pushes midtones toward highlights; lower contrast feels moodier.

  • 03

    Separate shadow and highlight brightness

    Pick a dark first color and a lighter second color for readable faces.

  • 04

    Try invert for variety

    Invert swaps which color lands in shadows without changing the hex pair.

  • 05

    Pair with /grayscale-image

    Compare against straight grayscale if you only need black and white.

  • 06

    Export PNG

    PNG keeps edges sharp for overlays and social crops.

Duotone Effect Tools Compared — Which One Fits Your Workflow

How this free duotone effect tool stacks up against other popular online options for creating Spotify-style duotone images.

  1. Canva.com

    Duotone effect in design editor with color picker. Requires account. Spotify-style duotone available as preset.

  2. Adobe Express

    Duotone filters in photo editor. Free plan includes basic duotone effects.

  3. Fotor.com

    Duotone effect with customizable color pairs. Pro required for watermark-free high resolution exports.

  4. PineTools.com

    Basic duotone effect. Limited preset choices without exact Spotify-style color mapping.

  5. Duotone Effect Spotify

    Create Spotify-style duotone images with customizable two-color combinations. Adjustable brightness and contrast. Real-time preview. All processing in browser.

When to use duotone

Typical uses for two-color gradient maps.

  • Playlist and album art

    Bold shadow/highlight pairs echo streaming cover aesthetics.

  • Social headers

    Unify campaign photos under two brand colors.

  • Posters and flyers

    High-contrast duotone reads well in print and thumbnails.

  • Brand mockups

    Test palette pairs on real photography before design lock-in.

Why use this duotone tool

Browser-based gradient-map editing.

  • No account

    Upload, preview, and download without signing in.

  • Private processing

    Images stay on your device.

  • Preset library

    72 built-in pairs across sections A–I.

  • Instant feedback

    See color and tone changes before export.

  • Free

    Unlimited previews and PNG downloads.

Technical details

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

Sources & References

Authoritative references on duotone halftone reproduction, Canvas API pixel processing, and the PNG format.
  • “Duotone is a halftone reproduction of an image using two colors.”
    — Wikipedia — Duotone

    Duotone halftone reproduction: This tool maps luminance between two user-selected colors to create a modern duotone effect, inspired by the classic halftone duotone printing process. en.wikipedia.org/wiki/Duotone

  • “The Canvas API provides a means for drawing graphics via JavaScript and the HTML canvas element.”
    — MDN Web Docs — Canvas API

    Canvas API (gradient map): This tool uses Canvas 2D to desaturate the image, apply brightness/contrast adjustments, then interpolate between two colors based on luminance values. developer.mozilla.org/en-US/docs/Web/API/Canvas_API

  • “PNG supports lossless data compression, making it useful for storing graphics that need to be edited repeatedly without losing quality.”
    — W3C — PNG Specification (overview)

    PNG image format: The duotone output downloads as PNG to preserve the two-color gradient map without compression artifacts, maintaining clean transitions between shadow and highlight tones. w3.org/TR/PNG/

  • “Color grading is the process of altering and enhancing the color of a motion picture or video image.”
    — Wikipedia — Color grading

    Color grading in digital imaging: Duotone is a stylized color grading technique. This tool applies a two-color gradient map as a creative grade, commonly seen in album art and poster design. en.wikipedia.org/wiki/Color_grading

Frequently Asked Questions

Quick answers about this tool—open a question to read more.