Gradient Map
gradient-map
The gradient-map parameter recolors an image by mapping its lightness onto a list of colors. The darkest pixels take the first color, the brightest take the last, and everything in between is interpolated. It works like Photoshop’s Gradient Map, and it is effectively a duotone that accepts more than two colors.
Specifying Colors
gradient-map takes 2 to 16 comma-separated colors, ordered from shadows to highlights. Each color is either a hexadecimal value (3, 6 or 8 digits, where the 8-digit form is AARRGGBB) or a CSS color keyword. A longer list gives finer control over the midtones.
A list with fewer than 2 colors, more than 16 colors, or a single unparseable color is ignored in its entirety, and the image is returned without a gradient map.
Companion Parameters
| Parameter | What it controls |
|---|---|
gradient-map-stops | Where each color sits on the shadow-to-highlight range |
gradient-map-cs | The color space the colors are interpolated in |
gradient-map-hue | Which way around the hue wheel cylindrical color spaces travel |
gradient-map-alpha | How strongly the map is mixed with the original image |
gradient-map-equalize | Spreads the colors evenly across the tones actually present |
Relationship to Duotone
A valid gradient-map takes precedence over duotone. When both are present, the duotone parameters are ignored and dropped from the X-Imgix-Params response header. Because a one-color list is not a valid gradient map, a gradient-map with a single color leaves any duotone in place.
Order of Operations
The gradient map is applied after hue, sat, bri, con and sepia, and before invert and threshold. Tonal adjustments therefore change which colors a pixel lands on, while invert acts on the mapped result.
mark, txt and blend layers are drawn after the gradient map and keep their own colors.