BYTETOOLS

Gradient Map

Apply a Photoshop-style gradient map online. Map each pixel's brightness to a custom color gradient for cinematic color grading and duotone-style looks.

Drop an image to apply a gradient mapProcessed locally — never uploaded

What is the Gradient Map?

A gradient map recolors an image by reading the brightness of every pixel and mapping it onto a color gradient — dark tones take the shadow color, bright tones take the highlight color, and everything in between blends smoothly.

  • Photoshop-style gradient map with three color stops
  • Rec.709 luminance mapping for accurate tone response
  • Blend slider to mix the effect with the original
  • Live preview updates as you tune colors
  • Great for color grading, duotone and poster looks
  • 100% private — images never leave your browser

How to use the Gradient Map

  1. 1

    Drop an image into the upload area, or click to browse.

  2. 2

    Pick a shadow color for the dark tones and a highlight color for the bright tones.

  3. 3

    Choose a midtone color to control the color of the mid-range.

  4. 4

    Adjust the blend slider to mix the gradient map with the original photo.

  5. 5

    Click Download PNG to save the recolored image.

About the Gradient Map

A gradient map recolors an image by reading the brightness of every pixel and mapping it onto a color gradient — dark tones take the shadow color, bright tones take the highlight color, and everything in between blends smoothly. It is the same technique photographers and designers use in Photoshop for cinematic color grading and stylized poster art.

This gradient map generator uses three color stops — shadows, midtones and highlights — so you get richer, split-toned results than a simple two-color duotone. Adjust each color and a blend slider to dial the effect from subtle grade to full recolor, with the preview updating instantly.

Every pixel is mapped locally on an HTML canvas in your browser using Rec.709 luminance. Your image is never uploaded, so photos and brand assets stay private on your device and the tool works even offline.

Frequently asked questions

What is a gradient map?

A gradient map recolors an image by mapping each pixel's brightness to a position on a color gradient. Dark pixels take the shadow color, light pixels take the highlight color, and midtones blend in between, giving a cohesive graded look.

How do I apply a gradient map online?

Upload a photo, then pick shadow, midtone and highlight colors. The tool converts each pixel to its luminance and maps it onto your gradient. Use the blend slider to control intensity, then download the result as a PNG.

What is the difference between a gradient map and a duotone?

A duotone maps brightness between just two colors. A gradient map can use several stops — here shadows, midtones and highlights — so you get split-toned, more nuanced color grades that a two-color duotone cannot produce.

How is pixel brightness calculated?

Brightness uses the Rec.709 luma formula, 0.2126 red + 0.7152 green + 0.0722 blue, normalized to a 0 to 1 range. This weights the channels the way human vision perceives them, so the mapping looks natural.

Is my image uploaded to apply the gradient map?

No. All processing runs in your browser with the canvas API, so nothing is sent to a server. Your photos and brand assets stay private on your device.

Related tools