Created by Alex Lende
Beginning with WordPress 5.8, you can colorize your image and cover blocks with duotone filters! Duotone can add a pop of color to your designs and style your images to integrate well with your themes.
Filters? Like on Instagram?
Duotone doesn’t work in quite the same way as Instagram filters. Whereas Instagram filters do color adjustments (color levels/curves and sometimes a vignette for the photo editors among us), the new duotone filters entirely replace the colors of your images.
Photo by Charles Pragnell.
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.
https://i2.wp.com/wordpress.org/news/files/2021/05/image6.png?resize=300... 300w, https://i2.wp.com/wordpress.org/news/files/2021/05/image6.png?resize=768... 768w, https://i2.wp.com/wordpress.org/news/files/2021/05/image6.png?w=1368&ssl=1 1368w, https://i2.wp.com/wordpress.org/news/files/2021/05/image6.png?w=1264&ssl=1 1264w" sizes="(max-width: 632px) 100vw, 632px" data-recalc-dims="1" />
Analogous colors can add a subtle effect and work well for cover backgrounds where the overlaid text still needs to stand out.
https://i1.wp.com/wordpress.org/news/files/2021/05/image1.png?resize=300... 300w, https://i1.wp.com/wordpress.org/news/files/2021/05/image1.png?resize=768... 768w, https://i1.wp.com/wordpress.org/news/files/2021/05/image1.png?w=1368&ssl=1 1368w, https://i1.wp.com/wordpress.org/news/files/2021/05/image1.png?w=1264&ssl=1 1264w" sizes="(max-width: 632px) 100vw, 632px" data-recalc-dims="1" />
Much more vibrant and interesting effects can be made with complementary colors.
https://i2.wp.com/wordpress.org/news/files/2021/05/image2.png?resize=300... 300w, https://i2.wp.com/wordpress.org/news/files/2021/05/image2.png?resize=768... 768w, https://i2.wp.com/wordpress.org/news/files/2021/05/image2.png?w=1368&ssl=1 1368w, https://i2.wp.com/wordpress.org/news/files/2021/05/image2.png?w=1264&ssl=1 1264w" sizes="(max-width: 632px) 100vw, 632px" data-recalc-dims="1" />
How Do I Add Duotone Filter?
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:
You can also choose colors from your theme’s palette, or a custom color of your choice.
In addition to the image block, duotone can be applied to both images and video 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. On the one hand, this means that you can apply a filter to an image that you link to that 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.
Can I Add Duotone Colors to Blocks or Themes That I Develop?
The API for adding duotone colors to blocks is experimental in Gutenberg v10.6. Still, the documentation for using it in your own blocks can be found and will be updated under Supports Color in the Block Editor Handbook. Themes can add duotone presets with theme.json. More information can be found under Global Settings & Styles Presets in the Block Editor Handbook.
Try it Out Now Using the Gutenberg plugin
The duotone feature was released in version 10.6 of the Gutenberg plugin, so you can try it out now prior to the WordPress 5.8 release in July.
Thanks to @joen and @mkaz for assistance writing and reviewing this post.