Blending Modes | Hacker News Reader

Blending Modes

typefully.com

239 pointsclairity39 comments

This is a great technical explainer on the blend modes, but it makes me want to go deeper: Where did the canonical 18 blending algorithms that we take for granted today originate? Was it a brainstorming session between John and Thomas Knoll in 1992? A paper by Ed Catmull in 1979? Did Adobe invent them, or merely popularize them?

Somewhere, there’s an oral history of blending modes waiting to be told, and I can’t wait to read it.

https://en.wikipedia.org/wiki/Darkroom_manipulation

https://en.wikipedia.org/wiki/Dodging_and_burning

That's only a small part of the available blend modes. I've always wondered how the digital versions of dodge and burn compare to the darkroom versions.

They are typically referred to as Porter Duff blend modes, so I assume that these algorithms were invented mainly by those guys. (by Thomas Porter and Tom Duff)

This set me on an interesting trail. I haven’t found anything yet that links Porter and Duff to the modern blend modes as we know them, but I did find this 1984 SIGGRAPH paper they authored that appears to have laid much of the groundwork! https://graphics.pixar.com/library/Compositing/paper.pdf

I don't know the history, but there is supposedly a fixed set of Porter Duff blend modes, specific algorithms. For example, this C++ library:

> Blend2D supports all Porter & Duff compositing operators

https://blend2d.com/

Also, the link shared by one of the sibling comments can be searched for "Porter" to see how they are referenced:

https://drafts.fxtf.org/compositing/

I wouldn't call this list "canonical", rather it's the list of agreed blend modes set out in the W3C Compositing and Blending Level 2 specification[1][3]. Other products have different views on what sort of blend modes to include - for instance Photoshop defines 29 of them[2], compared to the 16 defined in the W3C spec.

Concerning the Hue, Saturation, Color and Luminosity blends - I've been wondering if there would be anything to gain from creating similar types of blend from colors defined using the LCH and/or LAB color spaces ...?

[1] - W3C spec - https://drafts.fxtf.org/compositing/#blending

[2] - Normal, Dissolve, Behind, Clear, Darken, Multiply, Color Burn, Linear Burn, Lighten, Screen, Color Dodge, Linear Dodge (Add), Overlay, Soft Light, Hard Light, Vivid Light, Linear Light, Pin Light, Hard Mix, Difference, Exclusion, Subtract, Divide, Hue, Saturation, Color, Luminosity, Lighter Color, Darker Color - see https://helpx.adobe.com/uk/photoshop/using/blending-modes.ht...

[3] - I spent far too long on the W3C spec page last Christmas when I built a blend filter for my canvas library (maths is not my strongest talent); even now I'm not convinced that I got all the calculations right - https://scrawl-v8.rikweb.org.uk/demo/filters-102.html

As far as I know, they were an Adobe invention. Might not seem like it now, but Adobe did at one time have a pretty massive and respectable graphics R&D team who invented so many things that we take as standard now. The formulas were reverse-engineered elsewhere, but not perfectly (Macromedia Fireworks and GIMP's blend modes did not behave the same way). As far as I know, the exact formulas were first documented in the PDF Specification v1.4 by Adobe: https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandard... . At the time, this was an ISO specification and not freely available. Also, the formulas for Color Burn and Color Dodge in this specification have some bugs which don't match Adobe products. These formulas have since been copied into the SVG standard (which Adobe co-authored), and the CSS blend mode standard (which Adobe co-authored), where the bugs are now fixed.

Porter-Duff compositing was more of a general theory for compositing A on top of B with a mask C, and the operators defined in their paper were the 3-way truth table of those bits. It only defines coverage, not the underlying color.

I learned all about blending modes and filters this past week figuring out how to split an image into its CMYK components using just HTML and CSS. It was not straightforward, but I did finally get it right.

https://deepf.art/cmyk.html

Two things of interest: I saw some weird off-by-1 errors between the expected color and what Firefox's inspector measured even with pretty simple filters like invert(). I'd like to dig into that more. And I had precision issues with how much grayscale() would scale the blue channel, especially since the color channels are 8 bit, which I improved by using luminance() instead.

The MDN and the CSS spec was a great resource for figuring out exactly what calculation each blend mode and filter was doing.

Interesting. I'll just mention, perhaps you knew, that CMYK is a little tricky since it is a little over-specified: 100% CMY the same as 100% ... in theory. What is it called, undercolor removal? (Yeah: [1])

Grayscale could be weird if gamma is taken into account. (I recall that there are blending modes at least that assume you convert to a 1.0 gamma, do the blend, then convert back to the original gamma.)

[1] http://printwiki.org/Undercolor_Removal

>100% CMY the same as 100% ... in theory.

Isn't this just rich black? I thought the result also differed depending on the printing medium (due to just more ink and different absorbency of the medium)

https://en.wikipedia.org/wiki/Rich_black

Thanks for mentioning it, I'm not familiar with the printing process in general. I learned CMYK is always used in the context of printing, and RGB doesn't have a defined transformation to CMYK, but because I was displaying this digitally I chose to ignore a lot of details. But I definitely wanted to mimic the undercolor removal, which to me meant making the CMY channels as light as possible. I didn't think about gamma at all, there's no CSS filter for it.

> When you have Screen and Multiply, there is no good reason to use Lighten or Darken.

reMarkable uses the darken blend mode very successfully in its monochrome and colour renderings of highlighter strokes. Multiply would make the strokes darker the more you drew (and there is a separate highlighter colour that uses multiply for this effect), but darken gets just one level of darkening however many times you draw over it, which is normally what you want, and achieving that result by any other means would be much, much more effort, especially once you get to overlapping highlighter and non-highlighter strokes of various colours of each.

And in digital painting, these are very useful. Darken, for example is great for tweaking values without changing your shadow intensity.

Great article and all but there's no way I'm going to remember any of it. I think I'm going to stick to "click different blending modes until it sort of looks right".

Unfortunately, seems the author already thought about you.

> Do you just click different blending modes until it sort of looks right?

> Well, that probably won't change after you read this but at least you probably won't use Lighten or Darken again.

Exactly, also I typically layer a ton of different colored gradients on top of each other while clicking through each blending mode for each layer.

There's no way I'm going to compute in my head "Well this gradient with three colors is going to look like this after I mix it on top of these 3 bottom gradients each with different colors, oh and an image underneath"

Clicking a button beats computing an image in my head in terms of mental energy cost.

Speaking of energy, a physical dial, or scroll control, would be nice to cycle through quickly.

Edit: I do really admire this author's technical deep dives though, very beautifully made

In my few journeys into image manipulation, I played around the first tries and then settled for specific blend modes for specific results.

I mean, I didn't calculate what I wanted, but I built a mental model of what each mode does and when to choose which later.

At least in some versions of Adobe software, on some platforms (was years since I used Adobe so I can't remember if it was on Windows or OS X), once you've selected one blending mode, the drop-down control is still in focus so you can use the scrollwheel on your mouse to cycle through them.

Mouse scrolling through the blending dropdown is still a thing in Photoshop CC. It sometimes catches me out when I want to mouse-zoom the window immediately after choosing a blending mode

To integrate the article with Creative Commons implementations in glsl:

- [Photoshop blends by ben](https://www.shadertoy.com/view/XdS3RW)

- [Photoshop Blends Branchless by poljere](https://www.shadertoy.com/view/Md3GzX)

Good explanation of these things really. Would have loved more examples or some interactivity though.

yes, i was excited about finding this explanatory article because i knew there was a mathematical basis behind the scenes for these blend modes, but it's not obvious from the names. just the grouping of the modes should help with recall in the future.

If you wonder how the `opacity` and `fill` in Photoshop layers differ (other than `fill` not affecting layer effects like shadow): the color of the layer is multiplied by the `fill`, then the result + color of the layer below are used to calculate the color based on blend mode, and then opacity lerps between the result of this calculation and the layer below. Lerp is simply linear interpolation TOP × OPACITY + BOTTOM × (1-OPACITY).

Seeing this just allowed me to connect two mild obsessions from different stages of my life:

Conway operators are blending modes for geometry.

I need to go away and think about this some more...

This sounds like a really cool interactive demo/tutorial. :)

Blend modes are methods to combine two inputs into one output. Conway operators to my understanding are procedures to transform an input to something else (an output).

If you start with an initial (blank) canvas, each layer blending can be thought of as transforming that canvas into new state, making this a monad, and blending an unitary operation within that monad

This is a great writeup, but it's the simplified view. The hard part comes when you need to consider pixels that aren't 100% opaque.

It's probably better to fiddle around with some OpenGL / WebGL blendmode tool and see what's actually happening, and why you'd use certain modes in certain cases

Looks like a nice article, but can't read it on my phone because zoom is disabled and i can't read the text in the images :-(

I always used this, on rare times I need a layered image editor: https://en.wikipedia.org/wiki/Blend_modes

Informative article, but non-zoomable interface with tiny images on mobile is not great.

I cannot believe how many creative professionals I know that uses blending modes for a living, still just flips through them one by one to see which one looks good.

> Do you just click different blending modes until it sort of looks right?

Yes, guilty as charged when I work with Blender's mix color shader node...

You might be interested in this great post by Marty Fouts:

https://blender.stackexchange.com/questions/253936/what-does...

Typefully is a great app by the way, I use it often to compose and schedule Twitter threads.

Is it really that difficult to add just the tiniest bit of context to let me know what the article is about?

As is, it could be any of:

* Kitchen appliances

* Urban stealth

* Image processing

* Fashion contagion

* Music and rhythm

* ...

So you're telling me you don't run an ML text classification model on it like we all do here?

The second easiest way is to read the comments before the post.

I clicked the article and got the context, but it did take a click and couple of lines of text to "get".

I complain because I come here for news, not for riddles.

Reply on news.ycombinator.com