The Gutenberg image block has some tools that I feel like most WordPress users ignore. I get it, you have stuff to do + learning new icons is not one of those to-do list items. But, duotone in Gutenberg could be your new favorite thing.
What if I told you those icons + tools make it painfully easy to change image colors?
The duotone icon in Gutenberg
Image blocks have a triangle icon that’s half black + half white. Clicking that icon opens up the ability to add duotone to your image.
You’ll be able to set the Shadows + Highlights color with the color picker tool. Think about it this way… shadows are what to replace the darker colors with + highlights are what to replace the lighter colors with. If your theme is set up properly, your brand colors will be available. Otherwise you can add their hex values.
It’s a fun way to add some brand spice to an image, but where I use this cool tool the most is actually in those “as seen on” logo rows.
Take this logo from one of my clients. The version I have is dark gray but I can make it blue with the duotone icon.
Provided logo
Duotone logo
If you have a collection of logos to display but want to make them a single color, this is how you do it! Spoiler, you don’t have to use 2 different colors for duotone in Gutenberg. If all of the icons you have are black, just set the shadow color. Alternatively, if they are all white, set the highlight color.
Without needing to open Photoshop, or reach out to your designer, you can add a row of clients you’ve worked with, press you’ve been featured in, or places your books can be purchased while keeping them on brand with your site.