Duotone

This is part of the WebGL image processing series and it relies on information in previous articles. See all articles here.

It is designed to be used on desktop.

What is duotone?

Duotone is a simple effect that maps a black-and-white image into a color range. Its usage dates back to the mid-20th Century, with Andy Warhol being one of the most famous people to popularize it. More recently, Spotify made extensive use of it in its brand communications.

Click on the color pairs below to see what happens to this image when you apply a duotone effect:

I'm going to run through a simple method to create this effect by using a gradient map on a black and white image.

First we'll need a black and white image. Let's reuse our desaturated function we covered in the color correction article of this series to create one.

vec4 desaturated(vec4 color) {
  // sRGB colorspace luminosity factor
  vec3 lumFactor = vec3(0.2126, 0.7152, 0.0722);
  vec3 rgb = vec3(dot(color, luminosityFactor));
  return vec4(rgb, color.a);
}

Now we have a black and white (desaturated) image, we want to map black to our low color and white to our high color.

vec4 duotone(vec4 fragColor, vec4 lowcolor, vec4 highcolor) {
  vec4 desaturated = desaturated(fragColor);
  return mix(lowcolor, highcolor, desaturated);
}

In the next article, we'll take a look at how to add a pixelate effect to our image.