Update: During the implementation of all the algorithms I realized that this would probably make for a pretty nice package. In case you're interested you can get it on npm.
So good guy Christos Lytras put together an excellent answer on my corresponding question over at StackOverflow.
I'm going to take the vital part of it and rephrase it here:
The appropriate algorithm is to be found in Adobe's Document management - Portable document format - Part 1: PDF 1.7 specification. That document also seems to be the source for the algorithms in the W3C specs linked in the question. The part we missed until now is called the color composition formula on page 328:
11.3.6 Interpretation of Alpha
The colour compositing formula
This formula is the missing link for the above question.
It is to be applied to the already blended color in retrospect which means it takes the source and backdrop color as well as the composite of those generated by the algorithms already mentioned in the question.
Written in (JavaScript) code this colour compositing would look as follows:
// The colors to blend
var source = { r: 255, g: 213, b: 0, a: 0.6 }
var backdrop = { r: 141, g: 214, b: 214, a: 0.6 }
// This example shows the result of blending 'source' and 'backdrop' with the 'hue' blending mode, according to the W3C or Adobe spec
// However the composite could also be calculated by 'saturation', 'color' or 'luminosity' mode
var composite = { r: 151, g: 224, b: 224 }
// The mentioned colour compositing formula as a function
var colourCompositingFormula = function(as, ab, ar, Cs, Cb, Bbs) {
return (1 - (as / ar)) * Cb + (as / ar) * Math.round((1 - ab) * Cs + ab * Bbs);
}
// Calculate the opacity of the result
var resultingAlpha = source.a + backdrop.a * (1 - source.a) // Adobe PDF Format Part 1 - page 331
var result = {
// Adobe PDF Format Part 1 - page 328
r: colourCompositingFormula(source.a, backdrop.a, resultingAlpha, source.r, backdrop.r, composite.r),
g: colourCompositingFormula(source.a, backdrop.a, resultingAlpha, source.g, backdrop.g, composite.g),
b: colourCompositingFormula(source.a, backdrop.a, resultingAlpha, source.b, backdrop.b, composite.b),
a: resultingAlpha
}
That's it.
Big shoutout at this point to Christos Lytras from StackOverflow who broke that problem down to pieces small enough to chew for anyone not that familiar with color blending.
Note: In case you'd want to read the linked Adobe specs, consider not to do it with an in-browser PDF reader. Chrome's very own PDF viewer messed up the page numbers which will make you not seeing the formula on the page you'd expect to find it.
