The image block in gutenberg has a built in Duotone filter
Core WordPress includes several duotone sets, and there are provisions for themes to adjust these sets and/or add new ones.
Once a pair has been selected a class is assigned to the block that assigns CSS filters to the container thereby changing the how the image appears:
While the CSS behind this is pretty complex, essentially what is happening is that a “replacement” color is being applied to the dark elements of the image (shadow) and another replacement color is being applied to the lighter elements.
For a deep dive into the CSS at play:
The Duotone selector also will allow the selection of custom colors for the “shadow” and “highlight” colors
In the case of a single color logo or icon there is only one color that can be applied – the shadow … besides the default selections you can set any custom hex value by clicking in the checkered region.
this would allow a color change from black to any color you like!
BEFORE
AFTER