Graphics applications are hosting a zoo of blend modes to offer more or less fine-grained control over certain aspects of a composite image. Two of these aspects, brightness and contrast, are studied in the following by means of suitable diagrams.
Starting with brightness, the following table gives a comparison of various blend modes:
html-version (zipped), also taking different opacity values into account
Before delving into the different diagram types, a word about how two layers are blended into each other: for each pixel, the result value gets calculated from the base layer value and the blend layer value . For RGB blend modes — which are solely considered here– these calculations are carried out separately for each of the R,G,B values using a single function . Thus, one such function is sufficient to fully describe a RGB blend mode.
This diagram shows the resulting value for all possible combinations of base and blend layer values. For the ‘multiply’ mode , it looks like this:
Contours are enhanced by using only a few shades of gray to display the result value. In general, blend modes have smooth graphs without steps.
If swapping the input layers doesn’t change the result, a blend mode is said to be commutative. This shows up as the brightness plot being symmetrical with regard to the first diagonal, which is displayed as a dashed green line in the diagram above. Obviously, ‘multiply’ is a commutative blend mode.
For a few non-commutative blend modes, swapping the input layers leads to another well-known blend mode. Such reciprocal pairs have the same brightness graph, just mirrored along the first diagonal. For example, ‘overlay’ is the reciprocal mode of ‘hardlight’ (or reverse mode, if you prefer):
The majority of blend modes features increasing brightness values towards the top or the right of their brightness diagram, but never towards the opposite directions. In the latter case, solarization effects are introduced and the corresponding modes are called inverting (or comparative) modes. For example:
More on that later, when contrast gets examined.
This type of diagram depicts how the image’s brightness changes when a new layer gets blended in. The difference between the result and the base layer gets plotted using a color code. For the ‘multiply’ mode:
It can be seen that the ‘multiply’ mode qualifies for the group of darkening blend modes: there are only greenish and bluish colors present in the plot, which means that the result is always the same as or darker than the base layer value.
With decreasing brightness of the blend layer, the darkening effect gets stronger. The strongest darkening takes place where the blend layer is dark and the base layer is bright, that is in the lower right corner of the plot. Of course, when the base layer itself is already dark (the leftmost region of the diagram), no further darkening is possible. For comparison, the ‘black’ mode exemplifies the maximum amount of darkening possible:
A horizontal line of green indicates the neutral value for the blend value : no changes are done to the image regardless of the base layer’s value . For the ‘multiply’ mode, the neutral value is 1, for ‘overlay’ and ‘dodge’ 0.5 and 0, respectively:
In contrast, the ‘normal’ mode doesn’t feature a neutral value — the image remains unchanged only where the blend layer is identical to the base layer (that is where ).
Inverting both input layers as well as the result creates the complementary blend mode. Graphically, this shows up as a rotation by 180 degrees and swapping of red by blue, like flipping the color scheme. Two complementary pairs for example:
Three more diagram types characterize the contrast effects of blend modes:
When the blend layer has a constant value, blending becomes the same operation as applying a curve to the base layer. For example, adding a black blend layer using the ‘softlight’ mode has the same effect as a gamma correction with : in both cases the result value is .
For each possible value of , distinct curves get applied. So for 8bit-images, a blend mode can alternatively be described as a set of 256 curves. A few of these curves of the ‘multiply’ blend mode:
Each of these curves shows the value along a horizontal cross section of the brightness diagram to the right. For , the neutral curve with a slope of 45° gets applied. With decreasing b, the slope gets reduced — up to 0° at . In this case the result is set to uniform black, removing all contrast from the image.
The slope α of such a curve is a measure for the local contrast change. For example, for a classic s-curve:
Slopes less than 45° reduce the local contrast (blue), whereas slopes bigger than 45° increase it (red). The given s-curve increases the midtones’ local contrast at the expense of reduced contrast for shadows and highlights. During transitions, the neutral range of unchanged contrast (white) is crossed two times.
With the given color code it is now possible to show the contrast change for all possible combinations of layer values. An offset of -45° is introduced, such that 0° now means neutral. For the ‘multiply’ mode this gives:
The diagram to the right shows that the contrast change is independent of the base layer value . With no contrast change happens. With decreasing the local contrast gets gradually reduced until it gets removed completely at .
It is important to note that this interpretation is only valid for uniform blend layers. A ‘contrast angle’ of corresponding to a horizontal curve doesn’t necessarily mean that the result image is uniform. It just says that no ‘contrast information’ is taken from the base layer. This information could very well be taken from the other layer — as is the case with the ‘lighten’ mode, for example. Blending of local contrast gets looked at in more detail in the next section.
The slope gets calculated from the derivative with respect to , so the contrast diagram shows an approximation of
Within the group of darkening blend modes, the ‘burn’ mode is special in that it is the only one which is capable of increasing the local contrast:
The local contrast for midtones and highlights gets increased at the expense of clipping the shadows to pure black. The intensity of this effect depends on the value of :
No changes happen for the neutral value . At , the darker half of the base layer tones is set to black while boosting the contrast for the remaining brighter tones. The most extreme effect is applied for , where all values but are set to pure black.
This diagram type informs about inverting properties and blending of local contrast. The gradient of is a function which points in the direction of greatest brightness increase. With the help of a color code the gradient angle can be shown for all combinations of input values. A black color indicates where the gradient vanishes. Using the example of the ‘multiply’ mode:
The arrows overlayed on the brightness diagram to the left indicate the direction for a few samples of the gradient, whereas the plot on the right displays the gradient angle for all input combinations. The ‘multiply’ mode’s gradient angle features a smooth transition from 0° (red) over 45° (yellow) to 90° (green) when following the diagram clockwise.
For a blend mode to be non-inverting, increases of or must not lead to decreasing brightness. That is, the gradient must not point to the right or to the bottom. Or in other words, the gradient angle has to stay between 0 and 90 degrees.
The color code was chosen such that any amount of blue indicates an inverting blend mode. Obviously, ‘multiply’, as plotted above is a non-inverting blend mode.
The gradient angle reveals from which layer the ‘contrast information’ is taken, that is small variations in brightness:
This can be illustrated by blending two special images: a horizontal gradient from black to white, overlayed with low-contrast horizontal stripes for the base layer, and the vertical version of that image (simply rotated by 90 degrees) for the blend layer. Using the ‘lighten’ mode this gives:
Both the result image in the top left-hand corner as well as the gradient angle plotted on the right accurately reflect the definition of the lighten mode, which says to take either or as the result, whichever is brighter:
Last not least, the definition of the gradient angle is:
Putting it all together, here’s how the difference between ‘grain merge’ and ‘grain extract’ shows up in the various diagrams:
From right to left: the gradient angle diagrams reveal the most prominent difference between the two blend modes: ‘grain extract’ is an inverting mode. Where the gradient angle is defined, it is +45° (yellow) for ‘grain merge’, which indicates an equal share of local contrast from both layers, whereas for ‘grain extract’ the angle of -45° (magenta) means a mix of inverted blend layer and non-inverted base layer.
The brightness diagrams are vertically mirrored versions of each other, which indicates inversion of the blend layer. This shows up in the example image as a dominant orange color, which obviously stems from the inverted blend layer; the brightness characteristics of the base layer can be recognized in the result in non-inverted form.
The brightness difference plots, again, are vertically mirrored versions of each other. Finally, the formulas show that indeed ‘grain extract’ is the same as using ‘grain merge’ with an inverted blend layer.
- 2009-10-08: new blend modes added; complementary modes completed
- Pegtop’s extensive survey of blend modes — the source of most blend mode formulas on this page.
- Photoshop Blend Mode Math — code and examples
- Effectbank — another rich source of blend modes
- SVG Compositing Primer
- GIMP manual on blend modes
- Brightness plots with dynamically enhanced contours — just mouse over
- One ‘killer application’ for each blend mode
- Five Essential Blend Modes For Photo Editing, also gives an overview of blend mode groups
lake image (CC) courtesy of http://www.flickr.com/photos/ennor/
gull image (CC) courtesy of marfis75, http://www.flickr.com/photos/marfis75/
- softlight (pegtop):
- softlight (photoshop):