Table of Contents
Duotone is the latest trend in the design world. With the popular music app, Spotify using duotone designs on various promotional micro-sites, more and more websites have started following this trend and changing to a duotone format.
Beginning with WordPress 5.8, you can color your images and cover blocks with duotone filters. If you wish to give duotone filters a try before the release of WordPress 5.8, this article will show you how.
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.
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.