Duotone

Duotone is a printing word before it is a design one. A duotone press run laid a photograph down in two inks rather than one, typically black plus a spot colour, because a single plate of black could not hold the full tonal range of a halftone. The second ink filled in what the first could not. Interfaces borrowed the look and dropped the reason: today a duotone is a full colour photograph flattened to luminance and then repainted, so that its darkest pixels become one brand colour and its lightest become another, with everything in between interpolated along the line connecting them.

Mechanically it is a gradient map. Read each pixel’s lightness, throw the hue away, then use that number to look up a position in a two stop ramp. In CSS the quick version is a sandwich: a greyscale image with a dark solid over it in lighten and a light solid over that in darken, which clamps every value between the two colours. The accurate version is an SVG filter, where feColorMatrix does the desaturation and feComponentTransfer maps each channel through explicit tableValues, referenced from CSS as filter: url(#duotone). The SVG route is the one that survives a designer asking for a ramp that is not a straight line between two points.

The look went everywhere after Spotify’s 2015 identity, and the appeal is systemic rather than decorative. A product with a big monochromatic palette and a photo library it does not control has a consistency problem that art direction cannot solve at scale. A duotone treatment solves it mechanically: any photograph, from any source, comes out in the two colours the brand already owns, and headline type sits over it predictably because the range of values underneath is now known.

The costs are worth stating. Flattening to luminance destroys skin tone, which makes duotone a poor default for photographs of people when the photograph is about who those people are. Two colours that are close in lightness produce a flat, muddy image, so the pair wants real separation in L* before it wants an interesting hue relationship, and text over the result still has to clear its contrast ratio against the lightest area it crosses, not against the average. It is also a blend mode effect in most implementations, so it inherits the stacking context trap: isolate the figure or the tint will reach the page behind it.