Applying Duotone Filters to Change Color Effects

In this workshop, we will explore how to use the duotone filter to create different effects on your images. You can choose colors from your theme’s palette, or a custom color of your choice.

Learning outcomes

1. Applying a default duotone filter to an image or video.
2. Using shadows or highlights to create a custom duotone filter.

Comprehension questions

1. Why do duotone filters work better on high-contrast images?
2. What are the benefits of using a duotone filter on your site?

Transcript

Hi, and welcome to Learn WordPress. Let me show you how to use this really cool feature called duotone. And if you haven’t heard of it, duotone means combining two colours as a filter and then applying it to an image or video background. Depending on your needs duotone can make your images pop, and it allows you to further your branding through colors and create even more striking designs. Let’s look at a few examples.

With duotone, you can completely change the look and feel of an image. In the next example, we will contrast two different types of duotone filters. You can even use the duotone filter in the Featured Image block to meet your design requirements. It’s a great way to bring character to your photos. Duotone can be anything from a simple greyscale to a mixture of any two colors. And something to take note of, the duotone effect works best on high contrast images. And don’t be worried, images and videos in your Media Library will remain unchanged, so the image or video is never modified in your library.

To add a duotone filter, click on the Inserter and select an image from your Media Library. When the image is selected, you will have access to your block toolbar. Click on the Apply duotone filter which appears as a dotted circle within the menu. You will see a few duotone filters that come with your theme. You can easily just click and it will make the change for you. And if you want to change it, click on the duotone icon again and select a new filter. If you would like to undo the changes you’ve made the image, go back to duotone and click on Clear.

You can also click on shadows or highlights and select one of the colors from your palette. So you can go ahead and change and modify your duotone filter to meet your requirements and design needs.

A duotone filter can be added to a video in the Cover block. So let’s go ahead and add a Cover block and select the video from our Media Library. And I will change it to wide width. And now we can follow the same process by selecting one of the default duotone filters or by creating our own and as you will notice, it really does have a remarkable impact on an image or video. And you can play around with the colours to find exactly what you are looking for.

So now it’s your turn to find the right do turn filter for your website. Visit Learn WordPress for more workshops and training material.