<p>To answer the question definitively, I figured out that the blending used is a combination of <strong>Multiply</strong> and <strong>Hue</strong>.</p>

<p>After executing a <em>Multiply</em> blend on the input images, pass the result as the background for a <em>Hue</em> blend while using the same foreground image:</p>

<p><img src="https://i.sstatic.net/rKDMg.jpg" width="292" height="320"> <img src="https://i.sstatic.net/DRvqw.jpg" width="292" height="320"> </p>

<p><em>Background and foreground images for the Hue blend: on the left, the background (generated by a previous Multiply); on the right, the original foreground.</em></p>

<p>The resulting image can be seen <a href="https://jsfiddle.net/f0akv7yq/9/" rel="nofollow noreferrer">on this JSFiddle</a>. Don't panic! If you see the code you'll notice it is using the <em>luminosity</em> blend instead of the <em>hue</em> blend. I talked about this problem at the end of <a href="https://graphicdesign.stackexchange.com/a/106807/116486">my other answer</a>.</p>

<p><a href="https://www.w3.org/TR/compositing-1/" rel="nofollow noreferrer">Equations</a> for <a href="https://www.w3.org/TR/compositing-1/#blendingmultiply" rel="nofollow noreferrer">all</a> <a href="https://www.w3.org/TR/compositing-1/#blendinghue" rel="nofollow noreferrer">these</a> <a href="https://www.w3.org/TR/compositing-1/#valdef-blend-mode-luminosity" rel="nofollow noreferrer">blending</a> modes can be found on <a href="https://www.w3.org" rel="nofollow noreferrer">W3C website</a>.</p>

CC BY-SA 3.0
2018-03-15T05:26:53.837Z
2018-03-15T05:26:53.837Z
karlphillip
<p>That looks like multiplying the front image by the luminance of the shirt behind it.</p>

<p>There are multiple definitions of luminance but for a start, I think you could assume your data is sRGB and follow the <a href="https://en.wikipedia.org/wiki/SRGB#The_reverse_transformation" rel="nofollow noreferrer">transformation to CIE</a> to get the CIE Y component.</p>

CC BY-SA 3.0
2018-03-14T23:48:45.950Z
2018-03-14T23:48:45.950Z
Olivier
<p><a href="https://graphicdesign.stackexchange.com/q/106742/116486">I asked this on Graphic Design</a> but was unable to get any relevant help from them.</p>

<p>I'm trying to reverse engineer a blending mode I've seen <a href="https://i.sstatic.net/uJS8R.png" rel="nofollow noreferrer">on a picture</a>:</p>

<p><img src="https://i.sstatic.net/xQnci.jpg" width="270" height="160"> </p>

<p>This image was created by someone else using <em>Adobe's Scene7</em> during a <em>Displacement Map Filter</em> operation. <strong>I'm only interested in the blending mechanism, not the distortion</strong>. </p>

<p>Unfortunately, I was unable to reproduce this effect on other raster graphics editors. It almost looks like the images were blended with <em>Multiply</em> followed by a recolor operation of some sort. Anyway, I'm trying to figure out the equation used for this type of blending.</p>

<p>If you look at the top left corner of where the images overlap, you can see just a little bit of the background leaking to the foreground image.</p>

<p>The original images have the same dimensions and can be found below:</p>

<p><img src="https://i.sstatic.net/U4AM4.jpg" width="180" height="270">
<img src="https://i.sstatic.net/KKgjQ.jpg" width="180" height="270"></p>

<p>Any idea on how to duplicate this effect?</p>

<shader><image-processing><blending>
What blend mode is this?
karlphillip
# What blend mode is this?

(Asked by: username_0 on 2018-03-14)

[I asked this on Graphic Design](https://graphicdesign.stackexchange.com/q/106742/116486) but was unable to get any relevant help from them.

I'm trying to reverse engineer a blending mode I've seen [on a picture](https://i.sstatic.net/uJS8R.png):

![](https://i.sstatic.net/xQnci.jpg)

This image was created by someone else using *Adobe's Scene7* during a *Displacement Map Filter* operation. **I'm only interested in the blending mechanism, not the distortion**.

Unfortunately, I was unable to reproduce this effect on other raster graphics editors. It almost looks like the images were blended with *Multiply* followed by a recolor operation of some sort. Anyway, I'm trying to figure out the equation used for this type of blending.

If you look at the top left corner of where the images overlap, you can see just a little bit of the background leaking to the foreground image.

The original images have the same dimensions and can be found below:

![](https://i.sstatic.net/U4AM4.jpg)
![](https://i.sstatic.net/KKgjQ.jpg)

Any idea on how to duplicate this effect?

**Tags:** shader, image-processing, blending


---

## 2 answers

### Answer by username_0 on 2018-03-15. Score: 0 | Accepted answer

To answer the question definitively, I figured out that the blending used is a combination of **Multiply** and **Hue**.

After executing a *Multiply* blend on the input images, pass the result as the background for a *Hue* blend while using the same foreground image:

![](https://i.sstatic.net/rKDMg.jpg) ![](https://i.sstatic.net/DRvqw.jpg)

*Background and foreground images for the Hue blend: on the left, the background (generated by a previous Multiply); on the right, the original foreground.*

The resulting image can be seen [on this JSFiddle](https://jsfiddle.net/f0akv7yq/9/). Don't panic! If you see the code you'll notice it is using the *luminosity* blend instead of the *hue* blend. I talked about this problem at the end of [my other answer](https://graphicdesign.stackexchange.com/a/106807/116486).

[Equations](https://www.w3.org/TR/compositing-1/) for [all](https://www.w3.org/TR/compositing-1/#blendingmultiply) [these](https://www.w3.org/TR/compositing-1/#blendinghue) [blending](https://www.w3.org/TR/compositing-1/#valdef-blend-mode-luminosity) modes can be found on [W3C website](https://www.w3.org).


---

### Answer by username_1 on 2018-03-14. Score: 1

That looks like multiplying the front image by the luminance of the shirt behind it.

There are multiple definitions of luminance but for a start, I think you could assume your data is sRGB and follow the [transformation to CIE](https://en.wikipedia.org/wiki/SRGB#The_reverse_transformation) to get the CIE Y component.


---

