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.
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 ...?
[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.
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 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.
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.)
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)
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.
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".
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
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
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).
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
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
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.
Somewhere, there’s an oral history of blending modes waiting to be told, and I can’t wait to read it.