WordPress.com is passionate about making website design available to everyone, no matter their level of experience. That’s why there are regular updates that make changing the look and feel of your site simple and seamless.
The duotone image filter is a tool that you may not know a lot about, but that can make a big difference in the design and feel of your site. Let’s take a look!
What is duotone and how can it benefit your images?
To explain the concept of duotone photos, let’s take a look at something you might be a bit more familiar with — black and white images. The picture below, of course, is in black and white:
The image’s shadows (the darkest areas) are black and the image’s highlights (the lightest areas) are white. Everything in between is a shade of gray.
Duotone filters work very similarly, except instead of black and white, you can choose any two colors that you’d like. Let’s say that your brand has a pop art feel and features purple and yellow. If you applied a duotone filter using those two colors, your image would look like this:
As you can see, the shadows are now purple and the highlights are yellow. Pretty cool, huh?
So what does this mean for you as a site owner? Well, here are just a few reasons you might want to use a duotone image filter:
- Add a playful look to your image. While you can pick any two colors (including darker shades), the duotone filter can be a great way to add playful pops of bright colors.
- Match the feel of your brand. If your brand features specific color palettes or image styles, this is a great way to match that feel across your website.
- Grab attention immediately. If you use this filter every once in a while, it can really make an image stand out — say, in a gallery of photos or list of blog posts. Making a big announcement? That’s the perfect time to use a duotone filter.
- Establish a consistent tone across your site. By adding the same filter to all images throughout your website, you can establish consistency and ensure that people know exactly whose site they’re visiting.
- Help text stand out. It can sometimes be very difficult to read text on top of a background image. However, with a duotone image filter, you can change the colors of the background to be more conducive to text overlays.
How can I use the duotone image filter in WordPress?
All WordPress.com accounts have the duotone image filter built right into the block editor. It’s easy and simple to use, but can pack a big punch!
Start by navigating to the page you’d like to edit. There are two ways you can add a duotone filter: with image blocks and cover blocks.
Adding a duotone filter to an image
Add an image block to your page, then either upload a new picture or choose one from the Media Library. When you click on the Image block, a floating block menu will appear. Click on the icon that looks like a dotted circle — when you hover over it, the tooltip will say “Apply duotone filter.”
Now you can either use a preset filter or choose your own colors. To use a preset filter, simply click one of the two-colored circles. You can choose between dark grayscale, grayscale, purple and yellow, blue and red, purple and green, and blue and orange.
Or, if you want to choose your own colors, click Shadows and/or Highlights. Click on the colored box that appears for each one and either drag the sliders to pick a color or type in a specific HEX code. If you have specific brand guidelines for your site or company, a HEX code is usually the way to go. You’ll be able to see the changes you make to your image in real time. But don’t worry — your original image isn’t lost and you can always revert if you’d like.
Adding a duotone filter to a Cover block
A Cover block allows you to set a background image, then add other content — like headings and paragraphs — on top of it. This is an excellent way to set page titles, for example. And as we mentioned earlier, adding a duotone filter can help your text stand out from the background image.
Begin by adding a Cover block to your page. Either upload an image or choose one from your Media Library, then add any content you’d like on top. In the example below, you’ll notice that the headline we added is nearly impossible to read on top of the background image. Let’s change that!
To add a filter, click on the Cover block and, in the floating menu that appears, click the icon that resembles a dotted sun. When you hover over this icon, it will say “Apply duotone filter.”
Now you can either use a preset filter or choose your own colors. To use a preset filter, simply click one of the two-colored circles. You can choose between dark grayscale, grayscale, purple and yellow, blue and red, purple and green, and blue and orange. In this case, we selected the blue and red filter — you can see that the text is much easier to read now.
Or, if you want to choose your own colors, click Shadows and/or Highlights. Click on the colored box that appears for each one and either drag the sliders to pick a color or type in a specific HEX code.
And that’s it! Adding a duotone filter is as simple as clicking, dragging, and dropping.
Tips for using the duotone image filter
We’ve established that the duotone image filter is a fun and useful tool and we’ve looked at how you can use it on your WordPress site. So let’s take a look at a few tips to help you make the most of this feature.
1. Be consistent or use it sparingly
Be really thoughtful about how you use the duotone image filter. If you use it too much, but inconsistently, your site may seem jumbled.
One approach is to use it every once in a while to really call out an image or block post. This is great for announcements or special features.
Or, you might want to use it for the cover block on every page, or every post within a certain category. This establishes consistency and helps visitors know where they are on your site. In this case, you may want to take advantage of WordPress reusable blocks to ensure settings are exactly the same each time you use the filter.
2. Keep color contrast in mind
Color contrast is the difference in brightness between foreground and background colors — e.g. text found on top of an image. So when playing with the colors of your images, make sure that any content on top of it can be easily read by everyone who visits your site, including those with vision impairments.
How do you know if your image meets accessibility guidelines? A11y has a super handy tool that grades the color contrast of any URL that you enter. It will flag any problems, so you can increase the contrast and check your page again.
You also want to consider the colors that you use from a color blindness perspective. For example, eight percent of men are red-green color blind — if you use those two colors in your duotone filter, everything will blend together for them.
3. Consider the mood of your brand, page, or post
When setting your filter, think about the feeling you want to convey for that specific page or your brand as a whole. Bright colors can seem fun and quirky. Muted colors can be cool and artsy. Dark shades or black and white can appear moody or sophisticated.
Add style to your site with the duotone image filter
Now that you know what you can do with the duotone image filter, dive in! Play around on some test pages and see how you can adjust the mood and feel of your pictures, hero images, or graphics.
Want even more information? Check out our announcement post.
You might also like: WordPress Image Carousels: Dos, Don’ts, and Top Tips
ABOUT THE AUTHOR
Go WordPress 