Blend Mode

Share

What is a "Blend Mode" in the Computer?

The blend mode means which method will be used to blend the pixels of one object (such as a layer in an image editor) with another object.

The default blend mode is usually called "Normal," which mixes the colors of the pixels according to their alpha value in the RGBA format. The mathematical equation for this is topRGB * alpha + bottomRGB * (1 - alpha)[How to Read Math].

A panel labelled "Layers." In it, a dropdown list button reads "normal," and a spinner reads "Opacity: 100%." A filter icon button and a hamburger menu button can be seen. The main area is a list with 3 items, labelled "Group 2," "Paint Layer 1," and "Background." The paint layer is indented to indicate that its a child of the group. Several icons can be seen on each layer: an eye icon, a checkbox, a padlock, an icon with the Greek latter alpha, and checkerboard icon, and a brick wall icon. At the bottom, several buttons: a plus with a dropdown, a duplicate icon, a down arrow and up arrow, an icon that resembles sliders with a dropdown, and a trash icon.
Krita's "Layers" docker, featuring a group layer, a paint layer (selected), and a locked background. Observe that the blend mode of the currently selected layer is set to "Normal."

To my knowledge, all blend modes are defined in terms of simple mathematical equations that express how to mix the colors of pixels in isolation. In other words, blend modes do not take in consideration the location or coordinates of pixels, nor does it blend one pixel with neighboring pixels. Blend modes operate strictly on the colors of the pixels.

For example, a common blend mode is "Multiply," which multiplies the RGB values of one color with the other. In this case we need to think of RGB values as ranging from 0 to 100%. Therefore, if one red is 50%, and the other red is 25%, the resulting color would have a red component with the value 50% * 25% = 12.5%. Red, green, and blue are multiplied separately such that the value of one component doesn't affect the others.

Other common blend modes refer to other mathematical operations: Addition, Subtract, Divide, etc. The blend mode Difference is the absolute of a subtraction, |topRGB - bottomRGB|. The blend modes Darken and Lighten are simply "the smallest of the two" and "the largest of the two," respectively, since the smaller the RGB values are, the closer the color is to black, so the darker it is, and the greater they are, the closer to white, thus the brighter.

Because blend modes operate directly on the RGB components, it's important to understand what the RGB represents to make better use of them. For example, Addition is a blend mode that may make more sense is a linear RGB color space than in a gamma-corrected RGB color space, because in linear RGB the numbers just mean how much light is emitted, while in gamma-corrected RGB we don't have a linear relationship between the numbers and how much light is emitted, so what 2 + 2 means is completely different.

Some blend modes convert the RGB values to a different color model and replace them. For example, a blend mode called "Hue" may convert the RGB colors to HSL (Hue, Saturation, Lightness), replace the hue of the bottom layer with the hue of the top layer, then convert the result back to RGB.

Some blend modes specifically operate on the concept on alpha without touching the color. For example, Krita has an "Erase" blend mode that is pretty straightforward: if a pixel is opaque in the top layer, it completely erases the bottom layer, i.e. makes that pixel transparent by setting its alpha to 0. In this case, the formula would be alpha = bottomAlpha - topAlpha. Similar blend modes include Destination Atop and Destination In, which work like clipping masks, and Behind, which is the opposite of Normal and works as if the top layer and the bottom layer had their positions reversed.

Written by Noel Santos.

About the Author

I'm a self-taught Brazilian programmer graduated in IT from a FATEC. In a world of increasingly complex and essential computers, I decided to use my technical expertise in hardware, desktop applications, and web technologies to create an informative resource to make PC's easier to understand.

View Comments