The short version
- A gradient map replaces each tone in an image, from its darkest to its lightest, with the colour at the matching point on a gradient.
- The left end of the gradient colours the shadows, the right end colours the highlights, and everything in between colours the mid-tones.
- A good gradient map ramp gets steadily lighter from left to right; if lightness jumps around, the image looks solarised.
- Gradient maps are ideal for making sets of photos consistent, recolouring textures and illustrations into brand colours, and colour grading.
- A duotone is simply a gradient map with two colours; three or more stops give much finer control over the mid-tones.
On this page
A gradient map recolours an image by replacing each of its tones with a colour from a gradient. The image is first read as brightness only, from black to white, and then every brightness is swapped for the colour at the same point along the gradient: the left end paints the shadows, the right end paints the highlights. The shapes, light and detail of the picture stay exactly the same. Only the colours change, and you choose all of them.
How a gradient map works
Think of the gradient as a lookup table. A pixel at 0% brightness takes the colour at the far left; a pixel at 50% brightness takes the colour in the middle; a pixel at 100% takes the far right. Because the lookup depends only on brightness, two very different original colours with the same brightness, such as a red jumper and a green hedge, end up the same colour. That is what makes gradient maps so good at unifying images.
| Tone in the image | Position on the ramp | Colour in Brand violet |
|---|---|---|
| Deepest shadow | 0% | Ink #120b1f |
| Dark tones | 25% | Amethyst #3b1d6e |
| Mid-tones | 50% | Violet #7c3aed |
| Light tones | 75% | Orchid #f0abfc |
| Brightest highlight | 100% | Lilac white #fdf4ff |
Gradient map ramps that work
The single most important rule: the ramp should get lighter steadily from left to right. Then dark things stay dark and light things stay light, and the image keeps its sense of depth. You can shift hue as much as you like along the way. Classic photographic looks, such as sepia and cyanotype, are just ramps like this.
Ramp that breaks the image
- Lightness that goes up and down along the ramp
- A pale colour at the far left, so shadows turn light
- Opposite hues side by side, so mid-tones go grey
- Only two stops far apart in hue
Ramp that holds the image
- Lightness rising steadily from left to right
- A near-black at the left, a near-white or pale tint at the right
- Neighbouring hues, or a bright bridge between distant ones
- Three to five stops to control the mid-tones
Breaking the lightness rule on purpose gives a solarised, psychedelic look, which can be fun for posters. For anything that should still look like a photo, keep the ramp steady. If a mid-tone goes grey, the fix is the same as for any gradient: see muddy gradients.
What to use gradient maps for
- Consistent photo sets: stock photos, phone photos and old archive images all come out in one palette; see brand consistency
- Brand textures: turn any greyscale texture, such as clouds, concrete, fabric or noise, into a background in your brand colours; see background texture
- Illustrations and icons: recolour a whole set at once by mapping its greys
- Colour grading: set a gradient map layer to Soft Light or Color at low opacity for a subtle film look over the original colours
- Data and science: heat maps and false colour images are gradient maps of measurements
- Duotone and tritone: two or three stops for bold poster treatments; see the duotone effect
How to apply a gradient map in an image editor
- 1
Add a gradient map adjustment
Photoshop, Affinity Photo and GIMP all have one. Use an adjustment layer where you can, so the original stays untouched.
- 2
Set the ends first
Put a near-black version of your darkest brand colour at the left and a pale tint at the right. Check the image still reads.
- 3
Add mid-tone stops
Place your main brand colour around 50% and adjust its position until skin, skies or key objects look right.
- 4
Blend it back if needed
For grading rather than full recolouring, change the layer's blend mode to Soft Light or Color and lower the opacity.
- 5
Save the ramp
Save the gradient as a preset and use it on every image in the set, so they all match.
A gradient map in CSS
Browsers can apply a gradient map with an SVG filter. feColorMatrix turns the image to greyscale, and feComponentTransfer maps it through a table of values for each channel. Each list below is the Brand violet ramp: the five stop colours' red, green and blue values divided by 255, at evenly spaced positions.
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<filter id="brand-violet-map" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0 0 0 1 0"/>
<feComponentTransfer>
<!-- #120b1f #3b1d6e #7c3aed #f0abfc #fdf4ff -->
<feFuncR type="table" tableValues="0.071 0.231 0.486 0.941 0.992"/>
<feFuncG type="table" tableValues="0.043 0.114 0.227 0.671 0.957"/>
<feFuncB type="table" tableValues="0.122 0.431 0.929 0.988 1"/>
</feComponentTransfer>
</filter>
</svg>
<img src="texture.jpg" alt="" style="filter: url(#brand-violet-map)">Gradient maps are how you get from any picture to a palette you own. If you would rather start from the picture, match a picture finds its palette and the closest Marks. In Gradiently you can also tint any photo in the Studio in the colours of the Mark you are using, as mono, duotone or a softer wash, which is a gradient map built for you.
Questions people ask
What is a gradient map?
A gradient map recolours an image by replacing each tone, from darkest to lightest, with the colour at the matching point on a gradient.
What is the difference between a gradient map and a duotone?
A duotone is a gradient map with only two colours. Gradient maps can have three or more stops for finer control of the mid-tones.
Why does my gradient map look strange?
The ramp's lightness probably goes up and down. Make it get steadily lighter from left to right so shadows stay dark and highlights stay light.
How do I use a gradient map for colour grading?
Add the gradient map as an adjustment layer, then set its blend mode to Soft Light or Color and lower the opacity.
Can I use a gradient map in CSS?
Yes, with an SVG filter that converts to greyscale and then maps each channel through feComponentTransfer table values.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile
