Color and layer blending modes

Log-in or register.

Color blending modes

Blending of colors occurs whenever:

  • Color gradient is generated.
  • Semitransparent color is used.
  • Layer opacity is less than 100%.
  • A pixel is only partially covered.

In each scenario, there are 2 colors with opacity values and possibly a separate coverage factor.

Layer blending modes

Color blending are performed in the RGB color space. In most cases, the color channels are processed independently.

rsrc/layers-panel.png image

Layer blending mode is set in the lower part of the Layers panel using the Blending mode box.

Sample images: rsrc/blend-red.png image rsrc/blend-green.png image

The following images demonstrate the result of a blending operation of the two sample images. Each contains a rectangle filled with a single color with opacity decreasing to the right or downwards.

rsrc/blend-normal.png image Normal blending mode

In this mode, the opacity/coverage value of the upper layer controls how much of the lower layer is visible. If the upper layer is opaque, nothing of the lower layer gets through. If the opacity of the upper layer is at X%, the final color is a sum of X% * upper_color + (100%-X%) * lower_color

Gamma correction is taken into account. Color values are linearized before the blending occurs.

rsrc/blend-multiply.png image Multiply blending mode

Photographers may know this blending mode as Burn.

Multiplication produces the same effect as would putting 2 slides into a slide projector.

In this mode, the resulting color is obtained by multiplying the two source colors. Since the color are in range 0..1, multiplying them lowers the values (0.5*0.5 = 0.25). This means the resulting color is darker.

rsrc/blend-screen.png image Screen blending mode

Photographers may know this blending mode as Dodge.

The screen mode is an inverse of the Multiply mode.

The resulting color is obtained by multiplying the inverted values of the source colors and the result is then again inverted. The resulting color is always brighter.

rsrc/blend-add.png image Add blending mode

The color values are simply added together. If the resulting value is bigger than the maximum, the maximum is used instead.

rsrc/blend-subtract.png image Subtract blending mode

The upper color is subtracted from the lower color. If the result is negative, 0 is used instead.

rsrc/blend-average.png image Average blending mode

As the name indicates, the average of the 2 colors: upper_color/2 + lower_color/2

rsrc/blend-difference.png image Difference blending mode

The two colors are subtracted from each other. If the result is negative, the sign is changed.

rsrc/blend-minimum.png image Minimum (darken) blending mode

The lower value of the two colors is used.

rsrc/blend-maximum.png image Maximum (lighten) blending mode

The higher value of the two colors is used.

rsrc/blend-overlay.png image Overlay blending mode

A combination of screen and multiply modes. Increases contrast.

rsrc/blend-hue.png image Replace hue blending mode

The colors are converted to the HLS color space and then the Hue component is taken from the upper color and the rest from the lower color.

rsrc/blend-saturation.png image Replace saturation blending mode

The colors are converted to the HLS color space and then the Saturation component is taken from the upper color and the rest from the lower color.

rsrc/blend-brightness.png image Replace brightness blending mode

The colors are converted to the HLS color space and then the Brightness component is taken from the upper color and the rest from the lower color.

rsrc/blend-color.png image Replace color blending mode

The colors are converted to the HLS color space and then the Hue and Saturation components are taken from the upper color and the remaining one from the lower color.

rsrc/blend-silhouette.png image Silhouette blending mode

The opacity of upper layer is used to delete pixels from the lower layer.

Color blending for drawing tools

While using the drawing tools, users can choose one of 3 in-layer blending modes called "Paint over", "Replace" and "Paint under" with button in the toolbar (see Drawing modes).

rsrc/blend-normal.png image The Paint over blending mode is equal to the Normal blending mode in the layers.

rsrc/blend-under.png image The Paint under blending mode works similarly as the Paint over mode, but the colors are swapped.

rsrc/blend-replace.png image In the Replace mode, the old pixels are deleted before the new pixels are drawn. Replace mode only differs from the Paint over mode, if the used color is semitransparent.

Recent comments

user icon Anonymous
Select background
Vista & Win 7 icons