Understanding duotone filter abstraction

[colorful-tones]

Duotone can be a useful style, but it is impossible to understand the abstraction of what it is doing. I'm aware of the general application of how the SVG element covers and filters the colors over the image. This I'm quite familiar with, but how to reverse engineer the colors, color stops in the gradient and overall outcome is quite complex and not well-documented.

Let's focus on an example: https://wpengine.com/builders/ 👈 all of these images have duotone applied.

The outputted, pertinent CSS is filter: url('#wp-duotone-002838-f4f7fa-17');. I understand that it is taking the two hexadecimal values: #002838 & #f4f7fa and doing something with them, but what that something is is definitely dark magic.

I even went so far as to peruse the code for duotone.php and I'm not able to figure out how everything is being mixed. I know that hexadecimal is being converted to RGB for final output, but it also seems there is likely a gradient at play. How would I recreate the effect in Figma to precisely match this screenshot? Are there precise gradient stops or angles to account for? It would be amazing to see how the duotone.php truly works and perhaps a follow-up pull request to clarify in the docblocks.

[colorful-tones]

FWIW - I know how to create these effects in Figma, but I want to know how to match the exact gradient stops and make sure the end colors match precisely, and it is tough to decipher based on the SVG filter abstraction and to compare the code.

[marybaum]

Gotta say — since seeing the revival of the duotone in Core I have been thoroughly bemused, muttering under my breath, OMG I frickin hate duotones ... Back in the day, people used duotones to dress up black-and-white photography with a second color when color photo processing and full-color printing (plus OMG the prepress!) were expensive. So at first, it was the cheaper alternative — and then it went out of style by the time I was old enough to produce any printed pieces. One color that wasn’t black, on a colored paper, was the better cheap alternative. (Also, pick the wrong color for a duotone and you had pictures of blue- and green-tinted people and food in your brochure!) Now, of course, I see WordPress users giving a little more thought to the colors they’re using in the effect, and duotones make a little more sense to me. But it’s still taking me some time to get over what my mother (1924-2009), in the communications business in the 50s, used to call bolts-and-screws design after all those parts catalogues of the middle of the last century! Mary Baum 314.609.7844 Twitter <http://twitter.com/marybaum> Github <http://github.com/marybaum> WordPress <https://profiles.wordpress.org/marybaum/> Speaking <https://wordpress.tv/speakers/mary-baum/>

…

On Jan 19, 2023, at 2:49 PM, Damon Cook ***@***.***> wrote: Duotone can be a useful style, but it is impossible to understand the abstraction of what it is doing. I'm aware of the general application of how the SVG element covers and filters the colors over the image. This I'm quite familiar with, but how to reverse engineer the colors, color stops in the gradient and overall outcome is quite complex and not well-documented. Let's focus on an example: https://wpengine.com/builders/ <https://wpengine.com/builders/> 👈 all of these images have duotone applied. <https://user-images.githubusercontent.com/405912/213555096-52c95c3a-078f-4e79-be9d-c8fc115c1b40.png> The outputted, pertinent CSS is filter: url('#wp-duotone-002838-f4f7fa-17');. I understand that it is taking the two hexadecimal values: #002838 & #f4f7fa and doing something with them, but what that something is is definitely dark magic. I even went so far as to peruse the code for duotone.php <https://github.com/WordPress/wordpress-develop/blob/3dc123624556efbe8953c377e777c12c985ba339/src/wp-includes/block-supports/duotone.php> and I'm not able to figure out how everything is being mixed. I know that hexadecimal is being converted to RGB for final output, but it also seems there is likely a gradient at play. How would I recreate the effect in Figma to precisely match this screenshot? Are there precise gradient stops or angles to account for? It would be amazing to see how the duotone.php truly works and perhaps a follow-up pull request to clarify in the docblocks. — Reply to this email directly, view it on GitHub <#62>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4CJY66WYOXQF57ANEMEUTWTGSELANCNFSM6AAAAAAUAZKWAE>. You are receiving this because you are subscribed to this thread.

[colorful-tones]

Some follow up here. Found these resources, which may make the need for this less relevant, but still might be worthy of surfacing the info in WP Developer context...

• https://css-tricks.com/using-svg-to-create-a-duotone-image-effect/
• https://twitter.com/plasticmind/status/1616206561482838021?s=20&t=N1wwHgDyU8P_icRdxm64BQ