Four families, and what each is for
A menu of twelve names is not a reference. What makes the set learnable is that the twelve fall into four groups by what they do to brightness, and inside each group the members differ only in how hard they do it.
- Darkening. Multiply, darken and colour burn can never make a pixel brighter than it already was. White in the layer is the identity: it changes nothing. Reach for these when the layer is ink, type, or a shadow you want cast onto the base.
- Lightening. Screen, lighten and colour dodge can never make a pixel darker. Black in the layer is the identity. These are the modes for light: flare, sparks, stars, projections, and the whole double-exposure family.
- Contrast. Overlay, hard light and soft light darken the dark and brighten the bright, pivoting around the middle grey. One of the two frames decides which way each pixel goes; which one depends on the mode, and that is the entire difference between overlay and hard light.
- Comparative. Normal, difference and exclusion do not care about the tonal story. Normal replaces, difference subtracts, exclusion does the same with a softer middle. These are the diagnostic modes as much as the creative ones.
Reading the thumbnails
Each tile carries the mode’s name and its arithmetic, written with b for the base frame and l for the layer on values scaled between nought and one. The formula is not decoration: it predicts the failure. A mode with a division in it — dodge and burn — will clip somewhere, because a division approaching zero has to. A mode built on min or max will show hard boundaries wherever the two frames cross, because nothing in it is averaged. A mode that is a product will go dark fast on two ordinary photographs, since most values in a photograph are below one.
The same arithmetic is also what makes this page checkable. When the engine loads it renders every possible pair of channel values through the browser’s own compositing and compares the answer against the reference implementation on this site. Where they agree, the browser draws. Where they do not, the numbers are worked out here instead, and the mode panel says so.
What this page cannot show you is the four non-separable modes. Hue, saturation, colour and luminosity are not in this build at all, so a comparison that included them would be a comparison against nothing. If you came for luminosity specifically, a layers application is still the right place to be.
Common questions
The divider is at 100% but the layer is not solid. Why?
Because the divider sets how much of the blend is applied, not whether the base takes part. Only normal mode at 100 per cent replaces the base outright; screen, multiply, difference and the rest are functions of both pictures at every setting, so at full strength you see the mode's own answer.
Does my browser compute the blend modes correctly?
This page checks rather than assumes. When the blender loads, it blends a 256-by-256 test frame holding every pair of channel values through the browser's own compositing and compares the result with this site's reference arithmetic. The line under the mode rail says what it found, and the table beneath it lists each mode, which path draws it here and the largest difference measured. Any mode off by more than 1/255 is computed by the pixel loop from the reference instead.
Why do the same two frames look different here than in a desktop editor?
Three things usually account for it, and only one of them is a disagreement about the mode. The first is order: most editors stack the layer above the background, and if your slots are the other way round, every asymmetric mode inverts. The second is colour space: a desktop application may be compositing in a wide gamut or in linear light, and this build composites in sRGB with the values as they are encoded. The third is opacity, which in an editor is often applied to a layer that also carries a mask, producing a different source alpha than the same number here.
What does separable mean, and which modes are missing because of it?
A separable mode decides each channel independently: red is computed from red, green from green, blue from blue, and the three never consult one another. All twelve here are separable, which is why each can be written as one line of arithmetic. The four that are not — hue, saturation, colour and luminosity — take all three channels of both frames, convert to a colour model with brightness on one axis, and rebuild. They are not in this build, and putting a wrong version of them on the rail would have been worse than leaving the rail at twelve.
Which of these modes care about which frame is on top?
Multiply, screen, darken, lighten and exclusion are commutative — swap the slots and the result is identical, because their arithmetic treats the two values symmetrically. Difference is symmetric too, since it takes an absolute value. Overlay and hard light are the same function with the operands exchanged, so swapping the slots turns one into the other. Colour dodge and colour burn change completely, and normal obviously does. Press X and watch: the modes that move are the ones worth being careful about.