Below is a quick reference for how the various
BlendMode cases work in SwiftUI. I've used the three primary colors to show how they interact when placed atop on another. For reference, red is on top, then yellow in the middle, and blue on the bottom.
Before getting started, please consider subscribing using this link, and if you aren't reading this on TrailingClosure.com, please come check us out sometime!
The Color blend mode preserves the luma of the bottom layer, while adopting the hue and chroma of the top layer.
The Color Burn mode divides the inverted bottom layer by the top layer, and then inverts the result. This darkens the top layer increasing the contrast to reflect the color of the bottom layer. The darker the bottom layer, the more its color is used. Blending with white produces no difference. When top layer contains a homogeneous color, this effect is equivalent to changing the black point to the inverted color.
The Color Dodge blend mode divides the bottom layer by the inverted top layer. This lightens the bottom layer depending on the value of the top layer: the brighter the top layer, the more its color affects the bottom layer. Blending any color with white gives white. Blending with black does not change the image.
Darken Only creates a pixel that retains the smallest components of the foreground and background pixels.
The existing content is kept where it doesn't overlap the new shape.
Content is drawn behind the existing canvas content.
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. (The RGB value for black is (0,0,0).) Blending with white inverts the picture.
Blending with white inverts the base color values, while blending with black produces no change. However, Blending with 50% gray produces 50% gray.
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"
The Hue blend mode preserves the luma and chroma of the bottom layer, while adopting the hue of the top layer.
Lighten Only has the opposite action of Darken Only. It selects the maximum of each component from the foreground and background pixels.
The Luminosity blend mode preserves the hue and chroma of the bottom layer, while adopting the luma of the top layer.
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.
This is the standard blend mode which uses the top layer alone, without mixing its colors with the layer beneath it.
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.
This blend mode simply adds pixel values of one layer with the other then subtracts 1 from the end values.
This blend mode simply adds pixel values of one layer with the other.
The Saturation blend mode preserves the luma and hue of the bottom layer, while adopting the chroma of the top layer.
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.
Soft light is most closely related to Overlay and is only similar to Hard Light by name. Different for every program.
The Source Atop and Destination Atop composition modes combine the alpha channels of the source and destination images, before blending the source on top of the destination or vice versa.