Dublin Library

The Publishing Project

What Are Duotones And How They Work

  • 3 min. read

 

Duotone is a graphic design technique that makes for contrasting graphics that can be combined with text and other CSS effects.

This post will look at what are duotone colors and how to create duotone colors in CSS to use with images.

How To Create Duotone Colors in CSS? #

The CSS portion of the process consists of three layers:

  • A base layer (layer1) with a background image
    • grayscale and brightness (CSS) filters
  • Two (2) layers (layer2 and layer3)
    • Each with a background color and mix-blend-mode to blend the layer with the other layers
.layer {
  position: absolute;
  width: 100%;
  height: 100%;
}

.layer1 {
  background-image: url(./waves.webp);
  background-size: cover;
  filter: grayscale(0.5) brightness(110%);
}

.layer2 {
  background: oklch(45.93% 0.308 265.15);
  mix-blend-mode: screen;
}

.layer3 {
  background: oklch(73.12% 0.1946 351.856);
  mix-blend-mode: multiply;
}

The HTML is just placeholders for the styles:

<div class="image-container">
	<div class="layer layer1"></div>
	<div class="layer layer2"></div>
	<div class="layer layer3"></div>
</div>

My main issue is to select the right blend mode for each layer.

For the example above, I've chosen to use the screen blend mode in one layer and multiply on the other.

For reference, these are the possible values for background-blend-mode and mix-blend-mode. Note that modes may produce different, and unexpected, results.

For a detailed explanation see Blending Modes: A Complete Guide for Graphic and Web Design

  • No blending:
    • normal
  • Darken:
    • darken
    • multiple
    • color-burn
  • Lighten:
    • lighten
    • screen
    • color-dodge
  • Adjust Contrast:
    • overlay
    • soft-light
    • hard-light
  • Invert Colors:
    • difference
    • exclusion
  • Change individual HSL/OKLCH components:
    • hue
    • saturation
    • luminosity
    • color

To have a better understanding, I've created a playground where we can experiment with blend modes in general and duotone specifically.

You can play with the repository to test the different possible value combinations. The full CSS code for layers one, two, and three is displayed under the controls.

If you want to use your own images you can edit the CSS for layer1. Change the image's background-image URL value or you can fork the repo to work on your own.

The code is also available on this GitHub Repo and the repo's GitHub Pages.

Edit on Github