Lighten

Blending modes that lighten the image.

Color Dodge

Similar to Divide. Inverts the top layer, and divides the lower layer by the inverted top layer. This results in a image with emphasized highlights, like Dodging would do in traditional darkroom photography.

../../_images/Blending_modes_Color_Dodge_Sample_image_with_dots.png

Left: Normal. Right: Color Dodge.

Gamma Light

Outputs the upper layer as power of the lower layer.

../../_images/Blending_modes_Gamma_Light_Sample_image_with_dots.png

Left: Normal. Right: Gamma Light.

Hard Light

Similar to Overlay. A combination of the Multiply and Screen blending modes, switching between both at a middle-lightness.

Hard light checks if the colour on the upperlayer has a lightness above 0.5. Unlike overlay, if the pixel is lighter than 0.5,it is blended like in Multiply mode, if not the pixel is blended like in Screen mode.

Effectively, this decreases contrast.

../../_images/Blending_modes_Hard_Light_Sample_image_with_dots.png

Left: Normal. Right: Hard Light.

Lighten

With the darken, the upper layer’s colors are checked for their lightness. Only if they are Lighter than the underlying color on the lower layer, will they be visible.

../../_images/Blending_modes_Lighten_Sample_image_with_dots.png

Left: Normal. Right: Lighten.

Lighter Color

../../_images/Blending_modes_Lighter_Color_Sample_image_with_dots.png

Left: Normal. Right: Lighter Color.

Linear Dodge

Exactly the same as Addition.

Put in for compatibility purposes.

../../_images/Blending_modes_Linear_Dodge_Sample_image_with_dots.png

Left: Normal. Right: Linear Dodge (exactly the same as Addition).

Linear Light

Similar to Overlay.

Combines Linear Dodge and Linear Burn. When the lightness of the upper-pixel is higher than 0.5, it uses Linear dodge, if not, Linear burn to blend the pixels.

../../_images/Blending_modes_Linear_Light_Gray_0.4_and_Gray_0.5.png

Left: Normal. Right: Linear Light.

../../_images/Blending_modes_Linear_Light_Light_blue_and_Orange.png

Left: Normal. Right: Linear Light.

../../_images/Blending_modes_Linear_Light_Sample_image_with_dots.png

Left: Normal. Right: Linear Light.

Pin Light

Checks which is darker the lower layer’s pixel or the upper layer’s double so bright. Then checks which is brighter of that result or the inversion of the doubled lower layer.

../../_images/Blending_modes_Pin_Light_Gray_0.4_and_Gray_0.5.png

Left: Normal. Right: Pin Light.

../../_images/Blending_modes_Pin_Light_Light_blue_and_Orange.png

Left: Normal. Right: Pin Light.

../../_images/Blending_modes_Pin_Light_Sample_image_with_dots.png

Left: Normal. Right: Pin Light.

Screen

Perceptually the opposite of Multiply.

Mathematically, Screen takes both layers, inverts them, then multiplies them, and finally inverts them again.

This results in light tones being more opaque and dark tones transparent.

../../_images/Blending_modes_Screen_Gray_0.4_and_Gray_0.5.png

Left: Normal. Right: Screen.

../../_images/Blending_modes_Screen_Light_blue_and_Orange.png

Left: Normal. Right: Screen.

../../_images/Blending_modes_Screen_Sample_image_with_dots.png

Left: Normal. Right: Screen.

Soft Light(Photoshop) & Soft Light SVG

These are less harsh versions of Hard Light, not resulting in full black or full white.

The SVG version is slightly different to the Photoshop version in that it uses a slightly different bit of formula when the lightness of the lower pixel is lower than 25%, this prevents the strength of the brightness increase.

../../_images/Blending_modes_Soft_Light_Photoshop_Sample_image_with_dots.png

Left: Normal. Right: Soft Light (Photoshop).

../../_images/Blending_modes_Soft_Light_SVG_Sample_image_with_dots.png

Left: Normal. Right: Soft Light (SVG).

Vivid Light

Similar to Overlay.

Mixes both Color Dodge and Burn blending modes. If the color of the upper layer is darker than 50%, the blending mode will be Burn, if not the blending mode will be Color Dodge.

Warning

This algorithm doesn’t use color dodge and burn, we don’t know WHAT it does do but for Color Dodge and Burn you need to use Hard Mix

../../_images/Blending_modes_Vivid_Light_Sample_image_with_dots.png

Left: Normal. Right: Vivid Light.