pngtoolskit.org
PNG and image utilities, in the browser
Workflows Sign in Create accountSign up

Apply a Gradient Map

three-stop colour ramp · shadows / mids / highlights · batch

A gradient map throws away the original colours and repaints the image purely by brightness: the darkest pixels take your shadow colour, the brightest take your highlight colour, everything between is interpolated. It's the single most powerful colour-grading move available in one step.

Drop images here

Multiple files allowed

    no files
    Ready.

    Why it works so well

    Because it operates on luminance, a gradient map preserves everything that makes an image readable — shape, depth, contrast, where the light is coming from — while replacing the entire palette. That's why the results look like a deliberate colour grade rather than a filter slapped on top. Two images shot in completely different lighting will come out sharing a coherent look.

    Untick the midtone colour for a straight two-colour ramp, which is a cleaner and more classical effect. The third stop is where the interesting grades live, though: real film looks are almost never a straight line between two colours.

    Combinations that work

    Teal and orange — deep teal shadows, warm orange midtones, pale cream highlights. The default here, and the most-used grade in modern cinema, because skin tones sit in the midtones and everything else falls into cool shadow.

    Cyanotype — near-black navy to bright white through mid blue. The classic blueprint and early-photographic look.

    Duotone — one brand colour in the shadows, white in the highlights, midtone off. This is the Spotify-poster treatment and the fastest way to make mixed stock photography look like it belongs to one brand.

    Thermal — black → red → yellow-white gives a heat-map appearance. Effective, though remember it's mapping brightness, not temperature.

    Related: Duotone for the simpler single-colour tint, Sepia for the fixed vintage version, and Grayscale if you want to see the luminance the map is reading.

    FAQ

    Do the original colours matter at all?

    Only through their brightness. A red and a green of identical luminance map to the same output colour — which is why a gradient map can flatten detail that was only distinguishable by hue. Adjust contrast first to separate the tones you care about.

    Can I use more than three stops?

    Not here. Three covers the great majority of real grades; more stops start needing a curve editor.

    Is transparency preserved?

    Yes — only the colour channels are remapped. Fully transparent pixels stay invisible.

    Why does my image look flat?

    Your three colours are probably too close in brightness, so the whole tonal range compresses. Make the shadow colour genuinely dark and the highlight colour genuinely light.

    Part of: Turn a photo into poster art

    Flatten the tone before you colour it. Posterising after a duotone gives you banded duotone, which is rarely what anyone wants.

    1. 1 Posterize Cut the tonal range to a handful of steps
    2. 2 Duotone Map the result onto two colours
    3. 3 Gradient map Or onto a whole gradient, for more than two
    4. 4 Halftone Add the print-dot texture
    5. 5 Add outline Outline it if it will sit on a coloured ground

    All 28 step-by-step workflows