Blend ModesΒΆ
P9ofPFcB2SOpenRaster Supported blend and composite modes
See below an overview of all currently specified layer combining modes in the ORA spec. Many of the descriptions were taken verbatim from the w3c spec draft on which many of the ORA modes are based.
Note that "Browser" here refers to the native browser css blend mode. Note that it does not always produce exactly the same effect as other implementations. In order to attain the same blend modes cross browser it may be required to use the jsora library, which is slower but more consistent.
| ORA Attribute | Description | Lower (behind) Layer | Upper (above) Layer | Result (Krita) | Result (pyora) | Result (Browser) | Browser support? |
|---|---|---|---|---|---|---|---|
| svg:src-over | This is the default attribute which specifies no blending. The blending formula simply selects the source color. |  |
 |
 |
|
|
Yes |
| svg:multiply | The source color is multiplied by the destination color and replaces the destination. The resultant color is always at least as dark as either the source or destination color. Multiplying any color with black results in black. Multiplying any color with white preserves the original color. | |
|
 |
 |
|
Yes |
| svg:screen | Multiplies the complements of the backdrop and source color values, then complements the result. The result color is always at least as light as either of the two constituent colors. Screening any color with white produces white; screening with black leaves the original color unchanged. The effect is similar to projecting multiple photographic slides simultaneously onto a single screen. | |
|
 |
 |
|
Yes |
| svg:overlay | Multiplies or screens the colors, depending on the backdrop color value. Source colors overlay the backdrop while preserving its highlights and shadows. The backdrop color is not replaced but is mixed with the source color to reflect the lightness or darkness of the backdrop. Overlay is the inverse of the hard-light blend mode. See the definition of hard-light for the formula. | |
|
 |
 |
|
Yes |
| svg:darken | Selects the darker of the backdrop and source colors. The backdrop is replaced with the source where the source is darker; otherwise, it is left unchanged. | |
|
 |
 |
|
Yes |
| svg:lighten | Selects the lighter of the backdrop and source colors. The backdrop is replaced with the source where the source is lighter; otherwise, it is left unchanged. | |
|
 |
 |
|
Yes |
| svg:color-dodge | Brightens the backdrop color to reflect the source color. Painting with black produces no changes. | |
|
 |
 |
|
Yes |
| svg:color-burn | Darkens the backdrop color to reflect the source color. Painting with white produces no change. | |
|
 |
 |
|
Yes |
| svg:hard-light | Multiplies or screens the colors, depending on the source color value. The effect is similar to shining a harsh spotlight on the backdrop. | |
|
 |
 |
|
Yes |
| svg:soft-light | Darkens or lightens the colors, depending on the source color value. The effect is similar to shining a diffused spotlight on the backdrop. | |
|
 |
 |
|
Yes |
| svg:difference | Subtracts the darker of the two constituent colors from the lighter color. Painting with white inverts the backdrop color; painting with black produces no change. | |
|
 |
 |
|
Yes |
| svg:color | Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color. This preserves the gray levels of the backdrop and is useful for coloring monochrome images or tinting color images. | |
|
 |
 |
|
Yes |
| svg:luminosity | Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color. This produces an inverse effect to that of the Color mode. | |
|
 |
 |
|
Yes |
| svg:hue | Creates a color with the hue of the source color and the saturation and luminosity of the backdrop color. | |
|
 |
 |
|
Yes |
| svg:saturation | Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color. Painting with this mode in an area of the backdrop that is a pure gray (no saturation) produces no change. | |
|
 |
 |
|
Yes |
| svg:plus | Display the sum of the source image and destination image. | |
|
 |
|
No | |
| svg:dst-in | Destination which overlaps the source, replaces the source. | |
|
 |
|
No | |
| svg:dst-out | Destination is placed, where it falls outside of the source. | |
|
 |
|
No | |
| svg:src-atop | Source which overlaps the destination, replaces the destination. Destination is placed elsewhere. Note that this is commonly used the implement the "Clipping layer" functionality of many raster graphics programs. | |
|
 |
|
No | |
| svg:dst-atop | Destination which overlaps the source replaces the source. Source is placed elsewhere. | |
|
 |
|
No |