Algorithms for color blending modes: hue, saturation, color, luminosity

Question

I'm working on a JavaScript utility where I'm trying mix two colors in different ways. I basically want to cover the blend modes provided by Photoshop / the W3C spec on compositing and blending (which are essentially the same).

The algorithms provided in that document aren't too useful for me tough. First, I want to use alpha channels in addition. I was quite successful with that, using the pretty comprehensive algorithms from the SVG compositing spec.

Sadly the spec doesn't cover the modes referred to as non-separable blend modes in the mentioned W3C spec which are: hue, saturation, color and luminosity.

The W3C spec provides algorithms for that but those

a) seem to be a little bit off from the ones Photoshop is using (calculated RGB channels differ from the Photoshop ones by about 16 on a 0-255 scale). This was in fact caused by me messing up my Photoshop settings.

b) don't take into account the alpha channels of the colors.

I feel like having searched half the web but couldn't find any nice and/or authorative formulas for those four blend modes.

Anyone got an idea where to find those? (Preferably in JavaScript but I guess I can work my way from any other programming language or pseudo-code. It should basically boil down to simple math anyway.)

Answer 1

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.