Color Gradient Mapper

Map a gradient across an image by replacing brightness values with custom gradient colors.

Tested tool guide Tested browser tools Checked August 16, 2026

What Color Gradient Mapper does and how it behaves

Instead of tinting an image uniformly, Color Gradient Mapper converts its light-to-dark structure into positions on a user-defined color gradient. Shadows, midtones, and highlights receive colors according to their measured brightness, while the image's spatial structure supplies the detail. The common surprise is that original hue is not preserved: two differently colored pixels with the same brightness can receive the same gradient color. Use it when a new palette should follow tonal values rather than the source image's existing colors.

How the result is produced

Brightness selects color

The mapper treats each source pixel's brightness as a position on the ordered custom gradient, then replaces that pixel with the color at the corresponding position. Dark, middle, and light regions therefore retain their relative tonal placement while receiving new colors. This is tonal recoloring, not a uniform color overlay or a hue-by-hue substitution.

Gradient order matters

The chosen gradient establishes the replacement scale. Its first and last colors define opposite ends, with intermediate gradient colors occupying positions between them. Reordering those colors changes which tonal regions receive each hue. The mapping runs entirely in the browser, so the selected source image is not uploaded for this transformation.

Good uses

Create a two-color duotone treatment from a grayscale portrait, poster image, or product photograph.
Recolor a heightmap, mask, or monochrome texture so different value ranges appear in a chosen palette.
Test how brand colors distribute across the shadows, midtones, and highlights of an existing image.

Limits and checks

The map follows brightness rather than semantic regions; a face and its background can receive the same color when their brightness values match.
Original hue differences can disappear when their brightness values coincide, so the result cannot identify or recover the source colors.
A flat or clipped source provides few distinct tonal values; adding more gradient colors cannot restore detail missing from the image.

Common questions

Does the mapper preserve the image's original colors?

No. Original pixel colors contribute to the brightness values being mapped, but the displayed colors come from the selected gradient. Source pixels that have different hues but the same measured brightness can become the same output color. Use a tint, overlay, or blending operation instead when retaining the original hues is necessary.

Does a gradient with two endpoint colors produce only two output colors?

No. A two-endpoint gradient includes intermediate colors for intermediate brightness positions, producing a continuous duotone-style remap rather than a strict two-color threshold. Pixels assigned between the gradient ends receive blends between the chosen colors. The result should not be interpreted as two physical spot-color separations for printing.

References and verification

The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.