What is a gradient map?

A gradient map is an image adjustment that replaces each pixel's luminosity with the color at the matching position on a chosen gradient. Shadows take the leftmost stop, highlights take the rightmost, and midtones fall between.

How do I apply a gradient map in Photoshop?

Open Image → Adjustments → Gradient Map or add a Gradient Map adjustment layer from the Layers panel. Double-click the gradient bar to edit the stops, then paste in the hex codes from the recipes above.

Can I use a gradient map in Figma or CSS?

Figma does not have a native gradient map, but you can simulate one by stacking a multiply or color blend mode with a linear gradient over the image. CSS supports a similar effect via background-blend-mode with the gradient on top of the image.

Why is teal and orange the most famous gradient map?

Teal & Orange shifts shadows toward complementary cool blues and pushes highlights into warm oranges, which separates skin tones from cool backgrounds. The grade became standard in Hollywood color suites and shorthand for cinematic.

How many color stops should a gradient map have?

Two for graphic duotones, three for most photo grades, and four to five for complex looks that need separate control of shadows, blacks, midtones, and highlights. Above five, the grade usually becomes hard to tune.

Gradient library · Gradient map

Gradient map recipes for color grading.

A gradient map remaps an image's luminosity through a chosen gradient — shadows take the leftmost color, highlights take the rightmost. Ten recipes for film looks, cinematic grades, and editorial tonemaps, each with the shadow, midtone, and highlight stops.

Teal & Orange · #0F4C5C → #6B7280 → #F59E0B

The hex codes.

Five anchor colors that show up across every preset in this library. Copy any one to use it directly.

Shadow stop
Atlantic Teal
#0F4C5C
Midtone stop
Storm Gray
#6B7280
Highlight stop
Cinema Orange
#F59E0B
Duotone shadow
Indigo Ink
#1E1B4B
Duotone highlight
Orchid Mist
#F0ABFC

The preset library.

Copy the CSS in one tap, or open any preset in the generator to adjust angle, stops, and type.

Teal & Orange
Cinematic grade · linear · 90°
- #0F4C5C· 0%
- #6B7280· 50%
- #F59E0B· 100%
```
background: linear-gradient(90deg, #0F4C5C 0%, #6B7280 50%, #F59E0B 100%);
```
Open in gradient generator →
Faded Film
Editorial · linear · 90°
- #3F3F46· 0%
- #A8A29E· 50%
- #FEF3C7· 100%
```
background: linear-gradient(90deg, #3F3F46 0%, #A8A29E 50%, #FEF3C7 100%);
```
Open in gradient generator →
Sepia Print
Heritage / archival · linear · 90°
- #3C2410· 0%
- #8B6F47· 50%
- #F5E6D3· 100%
```
background: linear-gradient(90deg, #3C2410 0%, #8B6F47 50%, #F5E6D3 100%);
```
Open in gradient generator →
Duotone Indigo
Editorial duotone · linear · 90°
- #1E1B4B· 0%
- #F0ABFC· 100%
```
background: linear-gradient(90deg, #1E1B4B 0%, #F0ABFC 100%);
```
Open in gradient generator →
Forest Grade
Landscape / outdoor · linear · 90°
- #0F2F1F· 0%
- #7FB069· 50%
- #FDF6E3· 100%
```
background: linear-gradient(90deg, #0F2F1F 0%, #7FB069 50%, #FDF6E3 100%);
```
Open in gradient generator →
Moody Blue
Dark cinema · linear · 90°
- #0B1B2A· 0%
- #1E40AF· 50%
- #FDE68A· 100%
```
background: linear-gradient(90deg, #0B1B2A 0%, #1E40AF 50%, #FDE68A 100%);
```
Open in gradient generator →
Hot Coral
Beauty / portrait · linear · 90°
- #7C2D12· 0%
- #FB7185· 50%
- #FFF1F2· 100%
```
background: linear-gradient(90deg, #7C2D12 0%, #FB7185 50%, #FFF1F2 100%);
```
Open in gradient generator →
Black & Cream
Monochrome / luxury · linear · 90°
- #000000· 0%
- #737373· 50%
- #FAF5E9· 100%
```
background: linear-gradient(90deg, #000000 0%, #737373 50%, #FAF5E9 100%);
```
Open in gradient generator →
Risograph
Illustration / print · linear · 90°
- #1E40AF· 0%
- #EC4899· 50%
- #FEF3C7· 100%
```
background: linear-gradient(90deg, #1E40AF 0%, #EC4899 50%, #FEF3C7 100%);
```
Open in gradient generator →
Sun Bleach
Editorial / summer · linear · 90°
- #451A03· 0%
- #F97316· 50%
- #FFFBEB· 100%
```
background: linear-gradient(90deg, #451A03 0%, #F97316 50%, #FFFBEB 100%);
```
Open in gradient generator →

Tone mapping

How to use this gradient family.

What a gradient map actually does.

A gradient map is an image adjustment, not a CSS effect. It takes the luminosity of each pixel — 0 for pure shadow, 255 for pure highlight — and substitutes the color at that position on a chosen gradient. A pixel that was 50% gray becomes the gradient's midpoint color; a pixel that was nearly black becomes the leftmost stop. This remaps every tonal step in the image to a designer-chosen color, which is why gradient maps are the fastest way to color-grade a photo without painting on it.

Reading a gradient map recipe.

Every gradient map needs at least two stops — a shadow color and a highlight color — and most cinematic grades use three so the midtones can be controlled separately. The recipes above list each stop with its hex code and position. Drop them into Photoshop's Gradient Map adjustment layer (Image → Adjustments → Gradient Map, then double-click the gradient bar to edit), Procreate's gradient map filter, or any image editor's curves/gradient tool. The 0% stop maps to your image's shadows, the 100% stop maps to highlights.

When to reach for a gradient map.

Gradient maps shine when a single photo needs to match a brand palette or a series needs to feel like one set. Teal & Orange unifies disparate stock photography into one cinematic look; Sepia Print pulls modern shots into a heritage register; Duotone Indigo turns any portrait into editorial cover art. They are also the cheapest way to retint social-media photography in bulk — load the gradient map as a preset and every image in a feed inherits the same grade.

Gradient map versus duotone.

A duotone is a special case of gradient map with exactly two stops, no midtone control. Duotone Indigo (#1E1B4B → #F0ABFC) is the duotone in this library — flat, graphic, editorial. Three-stop gradient maps add midtone color, which lets you separate the look of skin tones from sky or foliage. For brand-led photo grading, three stops give the most control without becoming difficult to manage.

How to use the tone mapping gradient library.

Step 1
Open the gradient map tool
In Photoshop, choose Image → Adjustments → Gradient Map or add a Gradient Map adjustment layer.
Step 2
Paste the stops
Double-click the gradient bar to open the editor, then enter the hex codes and positions from the recipe.
Step 3
Tune for the photo
Adjust stop positions or lower the layer opacity to 50–80% if the grade is too strong for the source image.

Frequently asked questions.

What is a gradient map?: A gradient map is an image adjustment that replaces each pixel's luminosity with the color at the matching position on a chosen gradient. Shadows take the leftmost stop, highlights take the rightmost, and midtones fall between.
How do I apply a gradient map in Photoshop?: Open Image → Adjustments → Gradient Map or add a Gradient Map adjustment layer from the Layers panel. Double-click the gradient bar to edit the stops, then paste in the hex codes from the recipes above.
Can I use a gradient map in Figma or CSS?: Figma does not have a native gradient map, but you can simulate one by stacking a multiply or color blend mode with a linear gradient over the image. CSS supports a similar effect via background-blend-mode with the gradient on top of the image.
Why is teal and orange the most famous gradient map?: Teal & Orange shifts shadows toward complementary cool blues and pushes highlights into warm oranges, which separates skin tones from cool backgrounds. The grade became standard in Hollywood color suites and shorthand for cinematic.
How many color stops should a gradient map have?: Two for graphic duotones, three for most photo grades, and four to five for complex looks that need separate control of shadows, blacks, midtones, and highlights. Above five, the grade usually becomes hard to tune.