Learn in this article
- what a Blend Mode is and
- how the individual Blend Modes are calculated.
1. Introduction
Blend Modes can be applied to entire objects or to their individual parts and entire object groups. Behind each Blend Mode is a defined blend function. The blending takes place between the foreground color (CS = source color) and the background color (Cb = background color). The result is the result color (Cr). The variables cr , cb and cs in the function describe the corresponding values for the colors Cr , Cb and Cs expressed in additive form.
2. Blend Modes
In various graphics or layout programs as well as in HTML, a defined number of Blend Modes are available. In the following list, on the one hand the description with the corresponding formula and on the other hand an example is given. The example assumes an image (foreground) that is positioned on a gradient (background). The Blend Mode is applied to the foreground object (image), resulting in the corresponding effect.
Figure 1: Left: Image and Right: Gradient
2.1. Normal
With the Normal Blend Mode, no interaction between background and foreground color is allowed. The foreground color is left out compared to the background color.
Formula: B(cb, cs) = cs
Figure 2: The result of the calculation with the Normal Blend Mode
2.2. Multiply
The Blend Mode Multiply (blend multiply) multiplies the foreground color by the background color. The result is always a darker color. If the color is multiplied by black, the color becomes black, if it is white, the color of the object is not changed.
Formula: B(cb, cs) = cb x cs
Figure 3: The result of the calculation with the Multiply Blend Mode
Multiply versus Overprint
Note that in many cases the same result can be achieved. However, if an additional Blend Mode is applied to a group of objects, the result may differ more significantly. With regard to RIP times, it should generally be mentioned here that Blend Modes are more complex to calculate than overprinting objects.
2.3. Screen
In contrast to the Multiply Blend Mode, Screen multiplies the complementary colors together. This always results in a lighter color.
Formula: B(cb, cs) = 1 - [(1-cb) x (1-cs)]
Figure 4: The result of the calculation with the Blend Mode Screen
2.4. Overlay
The Overlay Blend Mode causes the foreground color to be multiplied or screened depending on the background color. Blending with the foreground color preserves the brightness level of the original color, the highlights and the shadows of the background color.
Formula: See Multiply and Screen Blend Mode.
Figure 5: The result of the calculation with the Blend Mode Overlay
2.5. Soft Light
With the Softlight Blend Mode, color values are either multiplied or screened. If the foreground color is lighter than 50%, the background color is lightened as if it had been dimmed. If, however, the foreground color is darker than 50%, the background color is darkened, as if color had been dithered. The effect is equivalent to shining a diffuse spotlight on an object.
Formula: See Multiply Blend Mode and Screen.
Figure 6: The result of the calculation with the Soft Light Blend Mode
2.6. Hard Light
With the Hard Light Blend Mode, you achieve the opposite effect. Everything that was previously said for the Soft Light Blend Mode is reversed here. The effect is the same as shining a bright spotlight on an object.
Formula: See Multiply Blend Mode and Screen.
Figure 7: The result of the calculation with the Hard Light Blend Mode
2.7. Color Dodge
The Dodge Color Blend Mode lightens the background color to reflect the foreground color. Thereby, the blend color lightens relative to the background color. If a color value is black, no adjustment is performed.
Figure 8: Dodge the result of the calculation with the Blend Mode Color Dodge
2.8. Color Burn
Use to darken the background color to reflect the foreground color.
Figure 9: The result of the calculation with the Blend Mode Color Burn
2.9. Darken
The Darken Blend Mode replaces background colors with foreground colors if the background color is darker than the foreground color.
Formula: B(cb, cs) = min(cb,cs)
Figure 10: The result of the calculation with the Darken Blend Mode
2.10. Lighten
The Lighten Blend Mode replaces background colors with foreground colors if the background color is lighter than the foreground color.
Formula: B(cb, cs) = max(cb,cs)
Figure 11: The result of the calculation with the Blend Mode Lighten
2.11. Difference
When using the Difference Blend Mode, the darker color values are subtracted from each of the lighter colors.
Figure 12: The result of the calculation with the Blend Mode Difference
2.12. Exclusion
When using the Exclusion Blend Mode, the same effect is produced as with the Difference Blend Mode, but here the contrasts are not as strong.
Figure 13: The result of the calculation with the Blend Mode Exclusion
2.13. Hue
When using the Blend Mode Hue, color values are created that have the hue of the foreground color and the saturation or luminosity of the background color. In our example, the gradient from the background object would thus replace the image in the foreground object.
Figure 14: The result of the calculation with the Blend Mode Hue
2.14. Saturation
When using the Saturation Blend Mode, color values are created that have the saturation of the foreground color and the hue or luminosity of the background color. In our example, even with this Blend Mode, the gradient from the background object would replace the image in the foreground object.
Figure 15: The result of the calculation with the Blend Mode Saturation
2.15. Color
When using the Blend Mode Color, color values are created that have the hue and saturation of the foreground color and the luminosity of the background color. In our example, even with this Blend Mode, the gradient from the background object will replace the image in the foreground object.
Figure 16: The result of the calculation with the Blend Mode Color
2.16. Luminosity
When using the Luminosity Blend Mode, color values are created that have the luminosity of the foreground color and the hue and saturation of the background color. In our example, this Blend Mode would hide the gradient from the background object and show only the foreground colors.
Figure 17: The result of the calculation with the Blend Mode Luminosity
Article Update: Version 1.12.2 06/2022