Blend modes


Blend modes in digital image editing and computer graphics are used to determine how two layers are blended with each other. The default blend mode in most applications is simply to obscure the lower layer by covering it with whatever is present in the top layer. However, as each pixel has a numerical representation, there exist a large number of ways to blend two layers.
Most graphics editing programs like Adobe Photoshop and GIMP allow the user to modify the basic blend modes, e.g. by applying different levels of opacity to the top "layer". The top "layer" is not necessarily a layer in the application; it may be applied with a painting or editing tool. The top "layer" can also be referred to as the "blend layer" or "active layer".
In the formulas shown on this page, values go from 0.0 to 1.0.

''Normal'' blend mode

This is the standard blend mode which uses the top layer alone, without mixing its colors with the layer beneath it:
where a is the value of a color channel in the underlying layer, and b is that of the corresponding channel of the upper layer. The result is most typically merged into the bottom layer using "simple" alpha compositing, but other Porter-Duff operations are possible. The compositing step results in the top layer's shape, as defined by its alpha channel, appearing over the bottom layer.

Dissolve

The dissolve mode takes random pixels from both layers. With top layer opacity greater than that of the bottom layer, most pixels are taken from the top layer, while with low opacity most pixels are taken from the bottom layer. No anti-aliasing is used with this blend mode, so the pictures may look grainy and harsh.
Adobe Photoshop generates a pseudo-random noise dither pattern on startup, with each pixel location in a 2D raster array assigned a gray value and an alpha value of 1. As the opacity of the top layer is reduced, the alpha value of some of the gray pixels is switched from 1 to 0, with the result that image pixels corresponding to a gray-valued pixel in the raster array are either on or off, with no opacity gradation.

Multiply and Screen

Multiply and Screen blend modes are basic blend modes for darkening and lightening images, respectively. There are several different combinations of them like Overlay or Soft Light and Vivid Light, Linear Light and Pin Light.

Multiply

Multiply blend mode multiplies the RGB channel numbers for each pixel from the top layer with the values for the corresponding pixel from the bottom layer. The result is always a darker picture; since each value is less than 1, their product will be less than either of the initial values.
, where a is the base layer value and b is the top layer value.
This mode is symmetric: exchanging two layers does not change the result. If the two layers contain the same picture, multiply blend mode is equivalent to a quadratic curve, or gamma correction with γ=2. For image editing it is sometimes more convenient to simply go to the Curves dialog of the software, as it gives more flexibility in the shape of the curves. Or one can use Levels dialogue — the middle number is usually 1/γ, so one can just type 0.5.
If one layer contains a homogeneous color, for example the gray color, multiply blend mode is equivalent to a curve which is simply a straight line. This is also equivalent to using this gray value as opacity when doing “normal mode” blend with black bottom layer.

Screen

With Screen blend mode the values of the pixels in the two layers are inverted, multiplied, and then inverted again. This yields the opposite effect to multiply, and results in a brighter picture.
, where a is the base layer value and b is the top layer value.
This mode is symmetric: exchanging two layers does not change the result. If one layer contains a homogeneous gray, Screen blend mode is equivalent to using this gray value as opacity when doing “normal mode” blend with white top layer.

Overlay

Overlay combines Multiply and Screen blend modes.
The parts of the top layer where the base layer is light become lighter, the parts where the base layer is dark become darker. Areas where the top layer are mid grey are unaffected.
An overlay with the same picture looks like an S-curve.
where a is the base layer value and b is the top layer value.
Depending on the value a of the base layer, one gets a linear interpolation between black, the top layer, and white.

Hard Light

Hard Light is also a combination of Multiply and Screen. Hard Light affects the blend layer's relationship to the base layer in the same way Overlay affects the base layer's relationship to the blend layer. The inverse relationship between Overlay and Hard Light makes them "commuted blend modes".

Soft Light

Soft light is most closely related to Overlay and is only similar to Hard Light by name. Applying pure black or white does not result in pure black or white.
There are a variety of different methods of applying a soft light blend. All the flavors produce the same result when the top layer is pure black; same for when the top layer is pure neutral gray. The Photoshop and illusions.hu flavors also produce the same result when the top layer is pure white.
These three results coincide with gamma correction of the bottom layer with γ=2, unchanged bottom layer , and γ=0.5.
The formula used by Photoshop as of 2012 has a discontinuity of local contrast, and other formulas correct it. Photoshop's formula is:
where a is the base layer value and b is the top layer value. Depending on b, one gets a linear interpolation between three gamma corrections: γ=2, γ=1, and γ=0.5.
Pegtop's formula is smoother and corrects the discontinuity at b = 0.5:
This is a linear interpolation between Multiply and Screen blend modes. It can also be seen as a linear interpolation between the gamma correction with γ=2, and a certain tonal curve.
A third formula defined by illusions.hu corrects the discontinuity in a different way, doing gamma correction with γ depending on b:
For b=0, one still gets γ=2, for b=0.5 one gets γ=1, for b=1 one gets γ=0.5, but it is not a linear interpolation between these 3 images.
The formula specified by recent W3C drafts for SVG and Canvas is mathematically equivalent to the Photoshop formula with a small variation where b≥0.5 and a≤0.25:
where
This is also the formula used by Cairo, and in earlier PDF documentation.
It is still a linear interpolation between 3 images for b=0, 0.5, 1. But now the image for b=1 is not γ=0.5, but the result of a tonal curve which differs from the curve of γ=0.5 for small values of a: while gamma correction with γ=0.5 may increase the value of a many times, this new curve limits the increase of a by coefficient 4.

Dodge and burn

Dodge and burn change the lightness of the pictures, inspired by the dodging and burning performed in a darkroom. Dodging lightens an image, while burning darkens it. Dodging the image is the same as burning its negative.

Divide

This blend mode simply divides pixel values of one layer with the other, but it's useful for brightening photos if the color is on grey or less. It is also useful for removing a color tint from a photo. If you create a layer that is the color of the tint you wish to remove - such as a pale blue, for scenes that are too cool in color temperature - Divide mode will return that color to white in the resulting composite, as any value divided by itself equals 1.0.

Addition

This blend mode simply adds pixel values of one layer with the other. In case of values above 1, white is displayed. "Linear Dodge" produces the same visual result. Since this always produces the same or lighter colors than the input it is also known as 'plus lighter'. A variant subtracts 1 from all end values, with values below 0 becoming black; this mode is known as 'plus darker'.

Subtract

This blend mode simply subtracts pixel values of one layer with the other. In case of negative values, black is displayed.

Difference

Difference subtracts the bottom layer from the top layer or the other way round, to always get a positive value. Blending with black produces no change, as values for all colors are 0. Blending with white inverts the picture.
One of the main utilities for this is during the editing process, when it can be used to verify alignment of pictures with similar content.
Exclusion is a very similar blend mode with lower contrast.

Darken Only

Darken Only creates a pixel that retains the smallest components of the foreground and background pixels. If the foreground pixel has the components, and the background has, the resultant pixel is

Lighten Only

Lighten Only has the opposite action of Darken Only. It selects the maximum of each component from the foreground and background pixels. The mathematical expression for Lighten Only is

Boolean arithmetic blend modes

Rarely, applications such as Aviary's Peacock will supply boolean arithmetic blend modes. These combine the binary expansion of the hexadecimal color at each pixel of two layers using boolean logic gates. The top layer's alpha controls interpolation between the lower layer's image and the combined image.

Hue, saturation and luminosity

Photoshop's hue, saturation, color, and luminosity blend modes are based on a color space with hue, chroma and luma dimensions. Note: this space is different from both HSL and HSV, and only the hue dimension is shared between the three. See the article HSL and HSV for details.
Unlike all of the previous blend modes described, which operate on each image channel independently, in each of these modes, some dimensions are taken from the bottom layer, while the remainder are taken from the top layer. Colors which end up out of gamut are brought inside by mapping along lines of constant hue and luma. This makes the operations uninvertible – after a top layer has been applied in one of these blend modes, it is in some cases impossible to restore the appearance of the original layer, even by applying a copy of the bottom layer in the same blend mode above both.
Because these blend modes are based on a color space which is much closer than RGB to perceptually relevant dimensions, it can be used to correct the color of an image without altering perceived lightness, and to manipulate lightness contrast without changing the hue or chroma. The Luminosity mode is commonly used for image sharpening, because human vision is much more sensitive to fine-scale lightness contrast than color contrast. See Contrast.
Few editors other than Photoshop implement this same color space for their analogs of these blend modes. Instead, they typically base their blend modes on HSV or HSL. Blend modes based on HSV are typically labeled hue, saturation, and brightness. Using HSL or HSV has the advantage that most operations become invertible, but the disadvantage that the dimensions of HSL and HSV are not as perceptually relevant as the dimensions of the space Photoshop uses.

Relation to masking

The result of applying several of these modes depends linearly on the pixel level of the top layer. In such cases, when the top layer is purely black, one gets a certain transformation of the bottom layer. When the top layer is purely white, one gets another such transformation. The intermediate gray values are described above using the opacity slider on the second transformation.
In such cases, applying the blending mode is equivalent to Normal blending:
Some applications allow the user to apply blending modes to painting tools, such as the Brush tool in Photoshop. When blending modes are used with these tools, the result is calculated based on pixels already existing on the target layer. If no pixels currently exist, then the 'painted' pixels are created as if in Normal blending mode. Subsequent strokes that overlap are then calculated based on the tool's blending mode, and the result is applied directly to the layer. A key difference with tool versus layer blending is that the results of tool blends are generally not able to be adjusted after the stroke is made, with the exception of stepping backward with the application's Undo command; layer blends may be adjusted with opacity or even switched, as they are applied dynamically between layers.
This distinction is useful to create various effects on a single layer, such as when applying dodge and burn techniques, where painting with a low opacity in screen or multiply modes allows the user to build up or reduce the results in a more organic way on a single layer.