Use Duotone Filters to Change Color Effects

In this lesson, you will earn how to colorize your image, and cover it with duotone filters. Duotone means combining two colors as a filter, then layer it into an image or video background. The first color can be used for the shadows on the dark section and the second one which is a light color can be used for highlight. Duotone can be anything from a simple grayscale to a mixture of any two colors.

Objectives

After completing this lesson, participants will be able to:

  • Add duotone filter to your images.
  • Demonstrate duotone filter and its uses.

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

Readiness Questions

  • Do you know how to create posts and use blocks?
  • Are you familiar with how to insert blocks?

Materials Needed

  • A local install of WordPress.
  • Theme files downloaded or beneficial if installed, You can use any block theme. You can find a list of freely available block themes in the WordPress Themes directory.
  • For demonstration, we are using the Twenty Twenty Two theme in this lesson plan

Notes for the Presenter

  • Understanding of block editor and creating blocks
  • Demonstrate how to use the Duotone filter on an image.
  • Ask participants to either complete the exercise independently, or guide them through how to complete the exercise.
    • If some participants don’t have a computer, having them guide you through the exercise is a great way to ensure everyone understands the steps.

Lesson Outline

  1. Demonstrate how to add image block.
  2. Then show how to set duotone filters.
  3. Finish with having attendees configure block settings beyond the example.

Exercises

Adding an image block, ask participants to search and insert image block into a page or post using the inserter, and apply duotone filter to an image.

Participants have watched you apply a duotone filter to an image block. Have them try their own duotone filters to an image or video background.

Assessment

You can add your own colors to duotone filters?.

  1. True
  2. False

Answer: 1. True

Will Duotone filter Overwrite Images in My Media Library?

  1. Yes
  2. No

Answer: 2. No

Additional Resources

Example Lesson

WordPress provides an eight duotone color set by default, including grayscale (black and white), dark grayscale shades, and various combinations. You can think of the duotone effect as a black and white filter, but instead of the shadows being black and the highlights being white, you pick your own colors for the shadows and highlights.

For example, a grayscale filter can be created by selecting black and white as shadow/highlight colors, and a sepia filter by choosing brown and tan.

How Do I add a Duotone filter?

You can give creative effect to your image by using the duotone effect, which is now possible within the block editor without overwriting your image file.

The duotone effect works best on high-contrast images, so start with an image with a lot of large dark and light areas. From the block toolbar, use the filter button and choose a preset:

Insert an image block to your post/page and select from the duotone filter options. Now You can choose color of your choice by clicking on the duotone circle.

Shows a image blox with with popup has default duotone colors and an arrow pointing to it.
Duotone filter

Now I have applied some default color filters, have a look at how it looks,

Purple and Yellow duotone filter applied to an image
Purple and Yellow filter used on image
Blue and Red duotone filter applied to an image
Blue and Red filter used on image

Here is the image comparison of how it looks before or after using duotone filters.

Image compare of with or without duotone filter

The duotone is a cool filter you can use to create different effects on your images! You just need an image that has lots of light areas and dark ones (high-contrast), plus some patience. From the block bar button go down towards the filters button and choose a preset. There are tons out there with unique tones so have fun exploring until you find what works best.

You can also choose colors from your theme’s palette, or a custom color of your choice.

You can Customize using the color picker. Clicking the shadows/highlight option will reveal a color palette that is part of your theme’s color palette.

The clear button will remove all effects.

Purple and green color filter with arrow pointed to shadows
Customize using the color picker

Creating WordPress duotone theme options

Theme developers and website creators may want to give clients more control over duotone options. For that, we’ll look at Theme.json.

Theme.json is a new method to manage all the options available to those who use your theme (or child theme).

To see an example of specific theme.json code, check the example from the WordPress Developer Documentation:

{
    "version": 1,
    "settings": {
        "color": {
            "duotone": [
                {
                    "colors": [ "#000", "#FFF" ],
                    "slug": "black-and-white",
                    "name": "Black and White"
                }
            ]
        }
    }
}

See also the documentation for Supports Color in the Block Editor Handbook to style options in specific blocks.

In addition to the image block, duotone can be applied to both images and video backgrounds in the cover block.

Will This Overwrite Images in My Media Library?

Images and videos in your 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. Users can still use their original media elsewhere on the site without uploading another copy.

This means that you can apply a filter to an image, which doesn’t exist in your media library. On the other hand, this means that the filter won’t show up in RSS feeds or places that use the image URL directly.

Lesson Wrap Up

Follow with the Exercises and Assessment outlined above.

Duotone is a great way to add some creativity and uniqueness to your designs without having the hassle of switching out colors every time you want something new.