The duotone effect on a website

Duotone takes away the background’s original colors and gives it the site’s. The image keeps its lights and shadows, but it first turns to grayscale, then takes on a tint drawn from the palette. A video shot in blues, a phone photo taken under yellow light, a generated scene in unexpected colors: under duotone, they all speak the same language as the titles and buttons.

Without

Duotone

On the demo, the slate and cobalt poster of the “Liquid surfaces” background takes on the colors of this showcase: ember at the top, black at the bottom. The waves, the reflections and the troughs stayed in place; only the colors changed.

Where the effect comes from

The word comes from printing. A duotone is a grayscale image printed with two inks, most often a black and a color; with one, three or four inks, it is called a monotone, a tritone or a quadtone (Corel).

Today it is used mostly to color an image, but the original purpose was technical: to extend the range of tones. A single black ink can’t render the lightest grays. By giving the highlights to a gray ink and the shadows to black, the printer gains nuances in the light areas; by printing the black over the gray, they get a denser black (CreativePro, 2013).

A screen has no inks. Web duotone is therefore an approximation, and owns it: the image is desaturated, then colored with a layer that borrows only its luminosity. The result looks like a printed duotone, without reproducing its ink curves.

When to use it

None of the studio’s twenty-four ready-made layouts applies it by default. In the library, it acts on the background only, whatever its type: the video, its poster, the scenes of a sequence background, the top image of a reveal, the strip of a scrolling background. Gallery photos keep their colors.

It helps when:

• the background’s colors fight with the site’s: a scene shot in blues for an all-ochre brand, a sky too saturated under a red title;
• the images come from everywhere and don’t match one another;
• the brand comes down to one strong color, which you want to find even in the image: a nonprofit and its campaign color, a festival and its poster, a creative agency, a label;
• the background is busy and you want to calm it without darkening it further: an image in a single hue holds the eye less than an image in color.

It is better left out when color is the subject: a restaurant’s cooking, a florist’s bouquets, a painter’s canvases, an upholsterer’s fabrics. A plate turned orange no longer makes you hungry. Same caution with faces: skin tinted a vivid color quickly looks wrong.

The right dose

In the library, the media turns fully to grayscale, with contrast raised by 12%, and the tint layer is set at 85% opacity. Its color follows a diagonal gradient, from the site’s accent color at the top to its background color at the bottom.

This gradient has a consequence worth knowing. The color blend mode (color) takes its hue and saturation from the layer, and its luminosity from the image (MDN). And a near-black site background has almost no saturation: toward the bottom, the image therefore stays almost gray, as on the demo. With a colored site background, a midnight blue, a bottle green, duotone keeps color all the way down the screen.

The library applies only one treatment at a time. Textures, on the other hand, can be added on top, two at most: halftone dots, also inherited from printing, extend the idea well.

What it costs

Two things are added to the background: a CSS filter on the media, and a still layer in blending. On the poster, the filter applies once. On a video, it applies to every frame of the film, which asks a little work of the browser throughout playback: that is the reason to stick to a simple filter, grayscale(), rather than a more faithful frame-by-frame treatment.

The tint layer, for its part, never moves. A browser only cheaply animates a layer’s position and opacity (web.dev); a tint that changed over time would force it to repaint the whole background every frame.

Accessibility

• Contrast. Duotone changes the image behind the first screen’s title, and the raised contrast can create highlights where there were none. Measure the title’s contrast on the tinted image, at the lightest spot: at least 4.5 to 1 for body text, and 3 to 1 for a large heading (W3C, WCAG 2.2).
• Reduced motion. Duotone doesn’t move. When the visitor asks their device for less animation (prefers-reduced-motion), the background video fades out and its poster stays: the poster is tinted like the video, and the page keeps its colors.
• No flashing. The tint is fixed: it doesn’t pulse and doesn’t change over time.

How it is made

Two rules are enough. The first turns the media to grayscale, grayscale(1) meaning a full conversion (MDN), and raises its contrast a little. The second lays a colored layer over the background in color blend mode. This layer is a pseudo-element, ::after: the stylesheet draws it itself, and the page needs no element for it. Wherever the class goes, the tint goes.

.fond.fond--duotone .fond__video,
.fond.fond--duotone .fond__canevas,
.fond.fond--duotone .fond__affiche,
.fond.fond--duotone .fond__scene,
.fond.fond--duotone .fond__dessus,
.fond.fond--duotone .fond__bande { filter: grayscale(1) contrast(1.12); }

.fond.fond--duotone::after {
  content: ""; position: absolute; inset: 0;
  mix-blend-mode: color;
  background: linear-gradient(160deg, var(--accent), var(--bg));
  opacity: var(--duotone, .85);
}

Both rules require the fond class in addition to fond--duotone. Stray on another tag, on the page body for example, the class therefore does nothing: without this guard, the tint layer would cover the text of the whole page.

Order matters. Without the prior desaturation, a layer in color blending lets the most vivid colors of the original image show through in patches: that is why the library goes through the filter first. And because the tint reads --accent and --bg, changing the site’s palette changes the background’s color.

In the studio

Duotone is one of the library’s three treatments, kept apart from the ten textures because they change the image instead of sitting on it. It has no step of its own in the flow, and none of the twenty-four ready-made layouts applies it by default.