blending mode formula for hard-light, soft-light, color-dodge, color-burn?

Question

I'm trying to implement poor-man's blending modes for CSS, in anticipation of browsers rolling out support. (The CSS preprocessor I'm using is Stylus, which isn't important to the discussion.) I've found a source for blending mode calculations from the W3C SVG spec, but some of the equations give wildly different results from what's expected - specifically, hard-light, soft-light, color-dodge, and color-burn.

Does anyone know of more correct, reliable formulae for the blending modes in question? I'm premultiplying the RGB channels of each colour by their alpha.

Here's what I've got so far. https://github.com/pdaoust/stylus-helpers/blob/master/blend.styl

Sula

See my answer here which points to Adobe's spec on how alpha blending works. It includes the above modes. – Demand

@Demand Thank you for the link! However, the spec seems to merely describe the effects of the above modes, rather than giving formulae for them. – Infold

Weird, they seem to have some of them, but not all. I thought they had them all. Dang. – Demand

Oh, I see - those ones describe how they work in terms of the other ones. You should be able to work them out from there. See pages 414-417. – Demand

Hm, interesting. I re-read those descriptions, and it does seem the HardLight and SoftLight are quite explicitly described, and it'll allow me to DRY a bit of my code. The ColorDodge and ColorBurn (which SoftLight relies on) are more ambiguously described -- I'm not sure what 'brighten' and 'reflect the source colour' mean in mathematical terms. Any ideas? – Infold

See the Wikipedia page on blend modes for dodge and burn. Dodge is basically bg / (1 - fg), and burn is basically [1 - (fg / (1 - bg))]. – Demand

Answer 1

https://mouaif.wordpress.com/2009/01/05/photoshop-math-with-glsl-shaders/

Download the PhotoShopMathFp.hlsl all the equations are dont there for OPengl es

Annulus

Answer 2

Follow this link. The formulas are very straightforward.

http://en.wikipedia.org/wiki/Blend_modes

• Soft Light has the complete description.
• HardLight is the same of Overlay, but with the images inverted. Follow the Overlay formula.
• "The Color Dodge blend mode divides the bottom layer by the inverted top layer"

Greenwich

Hey, thank you for your answer! However, the term "images inverted" might be a bit misleading, as it implies a unitary operation over the image. Inverting images and then applying Overlay wouldn't actually result in HardLight. I think what you meant to say is that HardLight is similar to Overlay, but with the roles of the layers switched. This difference in layer roles is what distinguishes the two blending modes. – Nuke