Duotone

Applies a duotone effect—a gradient with two different colors as its endpoints—to the image.

To achieve this effect, the image is first converted to greyscale. Two colors, usually contrasting, are then mapped to that gradient. In duotone={color1},{color2}, the first color is mapped to the darker parts of the image, and the second to the lighter parts. If you were to set a light color as color1 and a dark color as color2, you would create a duotone with a photo negative effect.

The duotone parameter accepts colors, expressed as either color keywords or 3- (RGB), 6- (RRGGBB) or 8-digit (AARRGGBB) hexadecimal color values. See Transparent Colors for what the 8-digit form does. The opacity of the duotone effect can also be set separately using the parameter duotone-alpha. The default value is 100, which makes the duotone fully opaque. To blend the duotone with the original image, set a lower duotone-alpha value.

More Than Two Colors

duotone takes exactly two colors. For three or more, use gradient-map, which maps the same greyscale range onto a list of up to 16 colors and adds control over stop positions, interpolation color space and equalization.

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. A single-color gradient-map is not valid, so in that case the duotone still applies.

Transparent Colors

An 8-digit hexadecimal color carries its own alpha, and that alpha now makes the output translucent rather than simply darker. For example, duotone=80732321,4ccffa produces a half-transparent result. Under auto=format, a JPEG source with such a URL may therefore be served in a format that supports transparency.

This is separate from duotone-alpha, which blends the whole duotone effect back with the original image.