How to Color Images with Duotone Filters in WordPress

What is Duotone?

Duotone is a use of two contrasting colors. As its name describes, the word “duotone” has two parts: “duo,” meaning double, and “tone,” meaning color.

What is the Duotone Effect?

The duotone effect is achieved by recreating an image with just two colors. While one color is used for the dark part of the image, the other one is used for the light parts. This colorful effect is inspired by a popular printmaking technique. 

In photography, toning is the process of recoloring grayscale images, and duo-toning describes doing so with two colors—replacing the darks with one and the lights with another.

Duotone Filters and WordPress

Although duotone filters will only be a part of WordPress core with the release of WordPress 5.8 in July, you can still try out the filter by installing version 10.6 of the Gutenberg plugin. 

How to Add Duotone Filters to Images in WordPress

Once you install and activate the plugin go to Posts > Add New.

Step 1 – Upload the image

Now you can upload the image, on which you wish to try the duotone filters.

When choosing the image you need to consider the following points.

• The duotone effect works best on high-contrast images, so start with an image with a lot of large dark and light areas. Keep your highlights high and your shadows low.
• Be mindful of which colors you choose to map onto the darks and lights of your image. For example, a vibrant, saturated color may be overpowering when mapped onto the shadows. Experiment with reversing the gradient map and different saturation values until you get the result you want.

Step 2 – Locate the Duotone Filter Icon 

Once you open the image tools, you can find the duotone filter icon as a dotted circle. When you click on it, a small popup showing different filters appear.

Step 3 – Apply Duotone Filter 

Here is how the image looks when you apply a  greyscale filter. 

Now you can try applying with different duotone filters available. 

Here is how the image looks when the purple & yellow filter is applied.

When the blue and red filter is applied.

Like this, you can try different filters or combinations of colors.

Does Adding Duotone Filters Make Changes to the Media Library Images?

Images and videos in your WordPress media library will remain unchanged. The duotone effect works using SVG filters and the CSS filter property, so the image or video is never modified in your library. 

Duotone and Instagram Filters – The Difference

Although both are filters used to modify an existing image, Duotone and Instagram filters work quite differently. While Instagram filters let you do color adjustments like color levels and curves, duotone filters replace the colors of your images.

Different Uses of Duotones on your Website

You can use duotone in a variety of ways on your website. Here are some.

Background/Hero image

Adding duotones to hero images creates a great visual appeal for the background and allows text and buttons to stand out compared to a multitone image. You can use your brand colors as duotone or add a trendy color or technique into your design without having to change the design on a full scale. 

For increased readability

Use duotone to act as a color stabilizer that gives the text plenty of space and contrast. A duotone color overlay can help “flatten” color variations in an image so that text can be placed using a single color almost anywhere on the image and still be readable.

Duotone color choices won’t be as bright for this use and will likely appear more muted, but can serve a great purpose. 

Conclusion

Duotones can work well on pretty much any brand, so it’s no wonder that duotone designs are getting popular. You can manage to create visually appealing images even without great design skills when using duotone.