---
title: "Combine Modes"
canonical: https://www.graphicsmill.com/docs/gm/combine-modes.htm
product: "Graphics Mill"
---

# Combine Modes
 
One of the major Graphics Mill features is the ability to combine multiple images into a single one. The basics of combining images, including code snippets, are presented in the [Overlaying Images](https://www.graphicsmill.com/docs/gm/overlaying-images-advanced-drawing.htm.md) topic. Everything is pretty simple if you just need to place one image on the top of another, but things become much more interesting if you want to blend images. This topic sheds light on how images can be blended in Graphics Mill:
 
- Copy
- Alpha, AlphaOverlapped, AlphaOverlay
- Behind
- Add, Subtract, Multiply, Divide, Difference
- Hue, Saturation, Luminosity, Color
- Screen, Overlay
- And, Or, Xor
- IfDarker, IfLighter
- Invert, Texturize

In this topic the *source image* refers to the base bitmap and the *overlaying image* refers to the bitmap added atop. The following two images are used throughout the topic to demonstrate combining modes:
 
![Source bitmap](https://www.graphicsmill.com/docs/gm/CombineModesSource.jpg) 
 **Figure 1.** Source bitmap
 
![Overalying bitmap](https://www.graphicsmill.com/docs/gm/CombineModesMask.jpg) 
 **Figure 2.** Overlaying bitmap
 
The overlaying bitmap comes with two levels of transparency. The background is completely transparent and the yellow part comes with an opacity level of `0.7` (70%).
 
## Copy
  
Each overlaying pixel replaces the corresponding source pixel. The opacity value is ignored, as a result the transparent zones become black.
 
![Copy mode](https://www.graphicsmill.com/docs/gm/CombineModesCopy.jpg)
 
**Figure 3.** Bitmaps are blended using the [Copy](https://www.graphicsmill.com/docs/gm/T_Aurigma_GraphicsMill_Transforms_CombineMode.htm.md) mode.
 
## Alpha, AlphaOverlapped, AlphaOverlay
  
### Alpha
 
In the **Alpha** mode, each overlaying pixel is blended with the corresponding source pixel. The opacity value of the overlaying image is taken into account, therefore this mode is useful only when the overlaying bitmap has the alpha channel.
 
![Alpha mode](https://www.graphicsmill.com/docs/gm/CombineModesAlpha.jpg)
 
**Figure 4.** Bitmaps are blended using the **Alpha** mode.
 
### AlphaOverlapped
 
The **AlphaOverlapped** mode is almost the same as the **Alpha** mode, but the resulting alpha channel is calculated as the maximum between the source and overlaying alpha channels. This mode is useful only when both the source and the overlaying bitmaps have alpha channels.
 
For demonstration purposes the source and overlaying images were modified. In the first case (Figure 5.1) the opacity of the source image was set to `0.3` (30%) and the alpha channel of the overlaying bitmap was multiplied by `0.8`. In the second case (Figure 5.2) the opacity of the source image was set to `0.8` (80%) and the alpha channel of the overlaying bitmap was multiplied by `0.3`.
 
![AlphaOverlapped mode](https://www.graphicsmill.com/docs/gm/CombineModesAlphaOverlapped_03_08.jpg)
 
**Figure 5.1.** Bitmaps are blended using the **AlphaOverlapped** mode.
 
![AlphaOverlapped mode](https://www.graphicsmill.com/docs/gm/CombineModesAlphaOverlapped_08_03.jpg)
 
**Figure 5.2.** Bitmaps are blended using the **AlphaOverlapped** mode.
 
### AlphaOverlay
 
The **AlphaOverlay** mode is an associative version of the `over` operator (normal painting operation). Normal painting is one of the simplest solutions to the visibility problem in computer graphics. The computer paints distant objects first, followed by closer objects, and as a result hides the objects, which non-visible to the observer. Thus, the **AlphaOverlay** mode allows you to set the order of the blending images.
 
For demonstration purposes the source and overlaying images were modified. In the first case (Figure 6.1) the opacity of the source image was set to `0.3` (30%) and the alpha channel of the overlaying bitmap was multiplied by `0.8`. In the second case (Figure 6.2) the opacity of the source image was set to `0.8` (80%) and the alpha channel of the overlaying bitmap was multiplied by `0.3`.
 
![AlphaOverlay mode](https://www.graphicsmill.com/docs/gm/CombineModesAlphaOverlay_03_08.jpg)
 
**Figure 6.1.** Bitmaps are blended using the **AlphaOverlay** mode.
 
![AlphaOverlay mode](https://www.graphicsmill.com/docs/gm/CombineModesAlphaOverlay_08_03.jpg)
 
**Figure 6.2.** Bitmaps are blended using the **AlphaOverlay** mode.
 
## Behind
  
Colors are blended only in the semi-transparent areas of the overlaying bitmap. The opaque areas are ignored.
 
![Behind mode](https://www.graphicsmill.com/docs/gm/CombineModesBehind.jpg)
 
**Figure 7.** Bitmaps are blended using the **Behind** mode.
 
## Add, Subtract, Multiply, Divide, Difference
  
### Add
 
The **Add** mode simply sums pixel values of the source and overlaying images taking into account their transparency. In case if the resulting image is RGB and all channels are above 255 (65535), white is displayed.
 
![Add mode](https://www.graphicsmill.com/docs/gm/CombineModesAdd.jpg)
 
**Figure 8.** Bitmaps are blended using the **Add** mode.
 
### Subtract
 
In the **Subtract** mode, the source and overlaying colors are added, and then the maximum luminosity value is subtracted from the resulting value. The maximum luminosity value is 255 for common pixel formats and 65535 for the extended ones.
 
![Subtract mode](https://www.graphicsmill.com/docs/gm/CombineModesSubtract.jpg)
 
**Figure 9.** Bitmaps are blended using the **Subtract** mode.
 
### Multiply
 
In the **Multiply** mode, the source color is multiplied by the overlaying one. The resulting value is normalized to the maximum luminosity value. The maximum luminosity value is 255 for common pixel formats and 65535 for extended ones. The resulting color is always a darker color. Multiplying any color with black produces black. Multiplying any color with white leaves the color unchanged.
 
![Multiply mode](https://www.graphicsmill.com/docs/gm/CombineModesMultiply.jpg)
 
**Figure 10.** Bitmaps are blended using the **Multiply** mode.
 
### Divide
 
In the **Divide** mode, the source color is divided by the overlaying one.
 
![Divide mode](https://www.graphicsmill.com/docs/gm/CombineModesDivide.jpg)
 
**Figure 11.** Bitmaps are blended using the **Divide** mode.
 
### Difference
 
In the **Difference** mode, the resulting value is the difference between the source and overlaying colors, whichever has the greater luminosity. Blending any color with white in this mode inverts the color. Blending any color with black in this mode leaves the color unchanged.
 
![Difference mode](https://www.graphicsmill.com/docs/gm/CombineModesDifference.jpg)
 
**Figure 12.** Bitmaps are blended using the **Difference** mode.
 
## Hue, Saturation, Luminosity, Color
  
In the **Hue**, **Saturation**, **Luminosity**, and **Color** modes the source and overlaying images are converted to the HSL color space before blending. The resulting image is transformed back to the original color format. If the destination image has alpha channel, then the resulting image will have the same alpha channel. The alpha channel of the overlaying image is considered when calculating the color components of the resulting image.
 
### Hue
 
In the **Hue** mode, the hue of the resulting color is taken from the overlaying color, and the other components, saturation and luminosity, are taken from the source color.
 
![Hue mode](https://www.graphicsmill.com/docs/gm/CombineModesHue.jpg)
 
**Figure 13.** Bitmaps are blended using the **Hue** mode.
 
### Saturation
 
In the **Saturation** mode, the saturation of the resulting color is taken from the overlaying color, and the other components are taken from the source color. If the overlaying color has a saturation equal to zero (the overlaying color is gray), then the source color remains unchanged.
 
![Saturation mode](https://www.graphicsmill.com/docs/gm/CombineModesSaturation.jpg)
 
**Figure 14.** Bitmaps are blended using the **Saturation** mode.
 
### Luminosity
 
In the **Luminosity** mode, the luminosity of the resulting color is taken from the overlaying color, and the other components are taken from the source color. Blending in this mode produces the opposite effect to the **Color** mode.
 
![Luminosity mode](https://www.graphicsmill.com/docs/gm/CombineModesLuminosity.jpg)
 
**Figure 15.** Bitmaps are blended using the **Luminosity** mode.
 
### Color
 
In the **Color** mode, hue and saturation of the resulting color are taken from the overlaying color, and the luminosity is taken from the source color. This mode is useful for tinting images.
 
![Color mode](https://www.graphicsmill.com/docs/gm/CombineModesColor.jpg)
 
**Figure 16.** Bitmaps are blended using the **Color** mode.
 
## Screen, Overlay
  
### Screen
 
In the **Screen** mode, the overlaying color is inverted and multiplied by the source one. The resulting value is normalized to the maximum luminosity value, which is 255 for common pixel formats and 65535 for extended ones. The resulting color is always a lighter color. Blending any color with black in this mode will leave the color unchanged. Blending any color with white in this mode produces white.
 
![Screen mode](https://www.graphicsmill.com/docs/gm/CombineModesScreen.jpg)
 
**Figure 17.** Bitmaps are blended using the **Screen** mode.
 
### Overlay
 
The **Overlay** mode combines the **Screen** and **Multiply** modes. Depending on the source pixel luminosity the **Screen** (lightening) or the **Multiply** (darkening) mode is used to calculate the resulting pixel. The lighter the source pixel, the lighter the resulting pixel; and the darker the source pixel, the darker the resulting pixel. As a result, the **Overlay** mode preserves highlights and shadows.
 
![Overlay mode](https://www.graphicsmill.com/docs/gm/CombineModesOverlay.jpg)
 
**Figure 18.** Bitmaps are blended using the **Overlay** mode.
 
## And, Or, Xor
  
### And
 
In the **And** mode, the bitwise AND operation is applied to the source and overlaying colors.
 
![And mode](https://www.graphicsmill.com/docs/gm/CombineModesAnd.jpg)
 
**Figure 19.** Bitmaps are blended using the **And** mode.
 
### Or
 
In the **Or** mode, the bitwise OR operation is applied to the source and overlaying colors.
 
![Or mode](https://www.graphicsmill.com/docs/gm/CombineModesOr.jpg)
 
**Figure 20.** Bitmaps are blended using the **Or** mode.
 
### Xor
 
In the **Xor** mode, the bitwise XOR operation is applied to the source and overlaying colors.
 
![Xor mode](https://www.graphicsmill.com/docs/gm/CombineModesXor.jpg)
 
**Figure 21.** Bitmaps are blended using the **Xor** mode.
 
## IfDarker, IfLighter
  
### IfDarker
 
In the **IfDarker** mode, the resulting color is defined as the darkest between the colors of the source and overlaying images. If a pixel of the source image is darker than the corresponding pixel of the overlaying image, then the source pixel remains untouched. Otherwise, it is replaced by the overlaying pixel.
 
![IfDarker mode](https://www.graphicsmill.com/docs/gm/CombineModesIfDarker.jpg)
 
**Figure 22.** Bitmaps are blended using the **IfDarker** mode.
 
### IfLighter
 
In the **IfLighter** mode, the resulting color is defined as the lightest between the colors of the source and overlaying images. If a pixel of the source image is lighter than the corresponding pixel of the overlaying image, then the source pixel remains untouched. Otherwise, it is replaced by the overlaying pixel.
 
![IfLighter mode](https://www.graphicsmill.com/docs/gm/CombineModesIfLighter.jpg)
 
**Figure 23.** Bitmaps are blended using the **IfLighter** mode.
 
## Invert, Texturize
  
### Invert
 
In the **Invert** mode, the overlaying image is inverted and blended with the source image in the same way as in the **Alpha** mode.
 
![Invert mode](https://www.graphicsmill.com/docs/gm/CombineModesInvert.jpg)
 
**Figure 24.** Bitmaps are blended using the **Invert** mode.
 
### Texturize
 
In the **Texturize** mode, the overlaying image is converted to grayscale and blended with the source image in the same way as in the **Alpha** mode.
 
![Texturize mode](https://www.graphicsmill.com/docs/gm/CombineModesTexturize.jpg)
 
**Figure 25.** Bitmaps are blended using the **Texturize** mode.
 
## See Also
  
### Reference
 
- [CombineMode Class](https://www.graphicsmill.com/docs/gm/T_Aurigma_GraphicsMill_Transforms_CombineMode.htm.md)
- [Combiner Class](https://www.graphicsmill.com/docs/gm/T_Aurigma_GraphicsMill_Transforms_Combiner.htm.md)
- [Bitmap.Draw Overload](https://www.graphicsmill.com/docs/gm/O_T_Aurigma_GraphicsMill_Bitmap_Draw.htm.md)

### Manual
 
- [Overlaying Images](https://www.graphicsmill.com/docs/gm/overlaying-images-advanced-drawing.htm.md)