Blend modes
Blend modes, also known as blending modes or mixing modes, are computational techniques in digital image editing and computer graphics that determine how the colors of two or more overlapping layers or images are combined to produce a resulting pixel color.[1] These modes operate by applying mathematical formulas to the color channels (typically RGB) or components (such as hue, saturation, and luminosity in HSL space) of the source and base images, often in conjunction with alpha transparency values to control opacity and coverage.[1] The foundational framework for blend modes stems from alpha compositing, introduced in the 1984 SIGGRAPH paper "Compositing Digital Images" by Thomas Porter and Tom Duff at Lucasfilm, which defined 12 Porter-Duff operators for combining images based on their alpha channels, enabling operations like "over," "in," and "out" for realistic layering without manual pixel manipulation.[2] This model was later expanded to include color blending functions, separating the process into a blending step (mixing colors) followed by compositing (applying alpha-based placement), as standardized in specifications like the W3C's Compositing and Blending Level 1.[1] In practice, blend modes are categorized into groups based on their effects: normal modes (e.g., Normal, Dissolve) simply overlay or mix pixels without alteration; darken modes (e.g., Multiply, Darken, Color Burn) produce darker results by selecting or multiplying lower values; lighten modes (e.g., Screen, Lighten, Color Dodge) yield brighter outcomes through inversion or addition; contrast modes (e.g., Overlay, Soft Light, Hard Light) enhance contrast by varying multiplication and screening based on luminosity; comparative modes (e.g., Difference, Exclusion) highlight discrepancies between layers; and component modes (e.g., Hue, Saturation, Color, Luminosity) isolate and blend specific color attributes for targeted adjustments.[1] These 16 standard modes, as defined in the W3C Compositing and Blending Level 1 specification, which builds upon the Porter-Duff compositing model by separating color blending from alpha compositing, form the core of implementations in graphics software and web standards, though applications like Adobe Photoshop expanded to 27 modes since their introduction with layers in version 3.0 in 1994, enabling creative applications in photo retouching, compositing, and visual effects.[1][3] Blend modes are essential for non-destructive editing, allowing artists and designers to achieve effects like shadows, highlights, and color corrections efficiently, with computations typically performed in linear RGB space to ensure perceptual accuracy.[1]Fundamentals of Blend Modes
Definition and Common Applications
Blend modes are mathematical operations used in digital image editing and computer graphics to combine the colors of overlapping layers or elements on a per-pixel basis, typically within color spaces such as RGB, where colors are represented additively through red, green, and blue channels.[2] These operations take the base layer color (a) and the blend layer color (b) as inputs, producing a resulting color through a function f(a, b) that alters how the pixels interact, often simulating effects like darkening, lightening, or contrast enhancement. Understanding blend modes requires familiarity with underlying color models, such as the RGB additive color space, which defines how light intensities combine to form visible colors.[4] The general structure of blend mode computation yields a result = f(base, blend, opacity), where opacity modulates the influence of the blend layer, allowing for partial transparency and seamless integration between layers.[5] When opacity is 100%, the blend mode fully applies the function; lower values blend the result with the base layer proportionally, enabling nuanced control over visibility and interaction.[6] The normal blend mode serves as the default baseline, simply compositing layers based on opacity without additional color manipulation. Blend modes originated from foundational work in computer graphics compositing, notably the 1984 paper by Thomas Porter and Tom Duff, which introduced algebraic operations for combining digital images and laid the groundwork for modern blending techniques.[7] They were popularized in consumer software through Adobe Photoshop version 3.0 in 1994, which integrated them with layers for widespread use in digital art.[5] Common applications include photo editing in tools like Photoshop and GIMP for non-destructive adjustments and creative effects, web design via the CSS mix-blend-mode property for dynamic visual interactions, and compositing in film post-production software like Adobe After Effects to merge footage realistically.[6][8]Normal Blend Mode
The normal blend mode serves as the foundational blending operation in digital image editing and computer graphics, where the top layer (denoted as the blend layer b) is displayed opaquely over the base layer (a), effectively replacing the underlying pixels without any color interaction or modification.[1] This mode operates according to the simple formula f(a, b) = b, ignoring the base layer's color entirely except in cases involving transparency.[9] As the default setting in applications like Adobe Photoshop, it enables straightforward layering where the blend layer's pixels directly determine the result, preserving the integrity of both layers for non-destructive editing workflows.[10] When the blend layer incorporates partial transparency via an alpha channel, the normal mode aligns with alpha compositing principles, specifically as the source-over operator in the Porter-Duff model.[11] The resulting color is computed as C_o = C_b + C_a (1 - \alpha_b), where C_b and \alpha_b are the premultiplied color and alpha of the blend layer, and C_a is the base layer's color, ensuring the blend layer covers the base proportionally to its opacity.[12] Layer opacity further modulates this by applying a uniform scalar, yielding \text{result} = b \cdot \text{opacity} + a \cdot (1 - \text{opacity}), which facilitates simple, linear layering without altering the inherent colors of either layer.[13] This behavior supports core compositing tasks, such as stacking elements in graphic design or video editing, where unaltered visibility of the top layer is essential.[10] In essence, the normal blend mode exemplifies a special case of Porter-Duff operations, prioritizing the blend layer's contribution while leveraging alpha for seamless integration, distinct from modes like dissolve that introduce randomized pixel sampling for textured transparency effects.[11]Dissolve Blend Mode
The dissolve blend mode operates by randomly selecting pixels from either the base layer or the blend layer for each position in the resulting image, with the probability of selecting the blend layer pixel determined by its opacity value.[3] For instance, at 50% opacity, approximately half of the pixels will display the blend layer color, while the other half show the base layer color, creating a probabilistic mosaic effect without any intermediate color blending or arithmetic operations between the layers.[5] This mechanism differs from the normal blend mode, which achieves opacity through smooth, linear interpolation rather than random selection.[3] Unlike arithmetic blending modes, dissolve relies on pseudo-random noise generation to determine pixel visibility, producing a granular, dithered appearance that simulates spatial on/off patterns based on opacity thresholds, without anti-aliasing or color interpolation.[14] The output resembles a noisy overlay, where the randomness ensures no predictable pattern, making it computationally straightforward as it involves only selection rather than complex calculations.[3] In applications such as Adobe Photoshop, the dissolve mode is commonly used to create dithered fade transitions between layers, adding a textured, speckled quality that evokes artistic effects like simulated film grain or granular patterns.[14] It proves effective for introducing controlled randomness in composite images, such as enhancing textures on patterns or achieving vintage, noisy aesthetics without dedicated filter tools.[5] However, the mode's noisy, abrupt output limits its suitability for scenarios requiring smooth or precise blends, as the random pixel replacement can appear visually harsh and lacks the subtlety of opacity-based transparency in other modes.[3] This simplicity in computation comes at the cost of predictability, often necessitating additional adjustments like blurring to mitigate the stark granularity.[14]Darken and Lighten Composite Modes
Multiply Mode
The Multiply mode is a fundamental darkening blend operation in digital compositing and image editing software, where the color values of the base layer and blend layer are multiplied channel by channel. The resulting color is computed using the formula f(a, b) = a \times b, with values normalized to the range [0,1] and the output clamped to prevent overflow, ensuring the final color is always darker or equal to the base unless blending with white. This arithmetic approach simulates light absorption, where midtones progressively darken and pure black remains unchanged regardless of the blend layer.[1][3] In terms of behavior, the mode preserves deep shadows since any value multiplied by 0 yields 0, while whites in the blend layer (value 1) act as neutral, producing no alteration to the base layer. Successive applications with non-black or non-white colors accumulate darkening effects, enhancing depth without introducing highlights, which makes it ideal for subtle tone adjustments. For instance, blending a mid-gray base of RGB(0.5, 0.5, 0.5) with a lighter gray of RGB(0.8, 0.8, 0.8) results in RGB(0.4, 0.4, 0.4), demonstrating uniform darkening across channels.[3][15] Common applications include adding realistic shadows to illustrations, creating vignettes to draw focus in photographs, and overlaying textures like grunge or dirt maps to age digital artwork without harsh edges. In print design, Multiply closely mimics the physical process of ink layering in CMYK workflows, where each successive ink application absorbs more light from the substrate, building density in a subtractive manner.[16][17] It serves as the inverse of the Screen mode, which instead lightens through a complementary inversion of the multiplication operation.[1]Screen Mode
The Screen mode is a blend mode used in digital image compositing that lightens the base layer by simulating the additive effect of multiple light sources. It operates on each color channel independently, applying the formula f(a, b) = 1 - (1 - a)(1 - b), where a is the base color value (normalized between 0 and 1) and b is the blend color value.[18] This equation is equivalent to a + b - a \cdot b, which multiplies the inverses of the input colors and then inverts the result, ensuring the output is always at least as light as the lighter of the two inputs.[18] In terms of behavior, Screen mode preserves highlights in the base layer while gradually lightening midtones and shadows based on the blend layer's intensity. Black values in the blend layer (0) act as neutral, leaving the base unchanged, whereas white (1) results in pure white output, effectively erasing darker areas.[3] This mode is the inverse of the Multiply mode, providing a balanced counterpart for lightening operations.[18] Screen mode finds common applications in image editing for brightening overall tones, creating glowing effects around subjects, or applying subtle color tints without altering highlights. For instance, it is often used to simulate light flares or to composite ethereal overlays in photography and digital art.[3] A practical example illustrates its lightening effect: blending a base gray value of (0.5, 0.5, 0.5) with a darker gray blend layer of (0.2, 0.2, 0.2) yields (0.6, 0.6, 0.6) per channel, resulting in a noticeably brighter mid-gray.[18] Historically, this mode draws from analog film techniques, mimicking the additive light projection of multiple photographic slides onto a single screen, where overlapping exposures cumulatively brighten the image.[3]Darken Only Mode
The Darken Only mode, also known as Darken in some software like Adobe Photoshop, is a selection-based blending operation that compares the color values of corresponding pixels in the base and blend layers channel by channel (typically red, green, and blue in RGB color spaces) and retains the darker value for each channel in the resulting composite.[6] The formula for this mode is f(a, b) = \min(a, b), where a represents the base layer value and b the blend layer value per channel, producing the darkest possible composite without introducing intermediate tones or new colors.[6] This results in a binary choice per pixel, ignoring any lighter values from either layer entirely. This mode exhibits commutative behavior, as the minimum operation yields the same result regardless of layer order, and it produces hard edges where transitions occur between retained dark and discarded light areas, preserving the hue and saturation of the selected darker pixels.[6] Unlike gradual darkening methods, it applies a strict per-channel comparison, making it suitable for scenarios requiring precise retention of shadows without affecting darker regions. It shares similar selection logic with Lighten Only mode but inverts the choice by prioritizing minimum values over maximums. Common applications include emphasizing shadows in composite images, correcting overexposure by overlaying darker elements to suppress bright highlights, and masking unwanted bright areas such as flares or hotspots in photography.[6] For instance, in astrophotography, stacking multiple exposures with Darken Only retains only the darkest (non-trailing) star positions across frames.[6] A representative example involves blending two RGB pixels: base (0.6, 0.4, 0.5) with blend (0.3, 0.7, 0.2), yielding the result (0.3, 0.4, 0.2) by selecting the minimum value for each channel.[6] Computationally, this mode is highly efficient, relying solely on simple per-channel comparisons without requiring multiplication or other arithmetic operations, which minimizes processing overhead in image editing software.Lighten Only Mode
The Lighten Only mode, also known as Lighten in many graphics applications, is a composite blend mode that operates on a per-channel basis, selecting the maximum value between the base layer (backdrop) and the blend layer (source) for each color channel to produce the resulting composite image.[1] The formula for this operation is given by B(C_b, C_s) = \max(C_b, C_s), where C_b represents the color value of the backdrop and C_s the source in the relevant channel, ensuring the output retains only the brighter contribution from either layer.[19] This results in the lightest possible composite for the selected channels, effectively discarding any darker values from the blend layer where they are dimmer than the base.[4] In terms of behavior, this mode replaces pixels in the base layer that are darker than the corresponding pixels in the blend layer, while leaving lighter base pixels unchanged, which can produce stark contrasts by emphasizing brighter elements without affecting existing highlights. Unlike more complex illumination modes, Lighten Only performs a straightforward separable operation across RGB or other color channels independently, making it symmetric and independent of layer order in terms of the final pixel values.[20] It serves as the inverse counterpart to the Darken Only mode, which instead selects minimum values for darkening effects. This blend mode finds applications in digital image editing and compositing for highlighting bright areas in layered graphics, such as enhancing light sources or simulating optical flares in visual effects workflows.[1] It is also useful for correcting underexposed regions by blending with a lighter overlay, preserving texture while boosting luminosity in shadowed parts of an image. For instance, when compositing an RGB base layer with values (0.6, 0.4, 0.5) and a blend layer with (0.3, 0.7, 0.2), the result is (0.6, 0.7, 0.5), as the mode selects the brighter value per channel: max(0.6, 0.3) for red, max(0.4, 0.7) for green, and max(0.5, 0.2) for blue.[4] Due to its reliance on simple per-pixel maximum comparisons, Lighten Only is computationally efficient, requiring minimal operations per channel, which makes it suitable for real-time previews in graphics software and hardware-accelerated rendering pipelines.[21]Illumination and Contrast Modes
Overlay Mode
The overlay blend mode is a contrast-enhancing technique that selectively applies the multiply and screen operations to the base and blend layers based on the luminance of the base layer, thereby preserving its highlights and shadows while overlaying the blend layer.[3] It builds on the behaviors of multiply and screen modes by using the former in darker areas of the base and the latter in lighter areas, resulting in increased overall contrast without altering midtones significantly.[22] This mode is particularly effective for compositing images where the goal is to integrate textures or details that adapt to the underlying tonal structure.[23] The mathematical formula for the overlay blend mode, applied independently to each color channel with values normalized to the range [0, 1], is defined as follows: f(B, S) = \begin{cases} 2 \times B \times S & \text{if } B < 0.5 \\ 1 - 2 \times (1 - B) \times (1 - S) & \text{if } B \geq 0.5 \end{cases} where B represents the base layer value and S the blend (source) layer value.[23] This conditional application ensures that areas below 50% gray (0.5) are darkened via a scaled multiply operation, while areas above are lightened via a scaled screen operation, avoiding clipping in pure black or white regions.[22] In practice, the overlay mode darkens shadows and brightens highlights relative to a neutral 50% gray, thereby boosting perceived sharpness and detail without introducing halos or excessive saturation. For example, blending a value of 0.8 over a base of 0.3 (dark area) yields $2 \times 0.3 \times 0.8 = 0.48, darkening the result, whereas the same blend over a base of 0.7 (light area) yields $1 - 2 \times (1 - 0.7) \times (1 - 0.8) = 0.88, lightening it.[3] This selective contrast adjustment makes overlay non-commutative, as swapping base and blend layers produces different outcomes compared to modes like hard light.[22] Common applications include sharpening images via the high-pass filter technique, where a duplicated layer is filtered and set to overlay to emphasize edges while preserving the original tones.[24] It is also widely used for adding textures, such as overlays of grain or patterns, to enhance visual interest in photographs or digital artwork without overwhelming the base composition's luminance range.[3] Blending modes like overlay trace their conceptual roots to darkroom photography techniques, where multiple exposures were combined to achieve similar contrast effects.[25]Soft Light Mode
The Soft Light blend mode simulates the effect of diffused or soft lighting on an image by gently adjusting the contrast of the base layer based on the luminance values of the blend layer. This mode darkens the base colors if the blend color is darker than 50% gray and lightens them if brighter, creating a subtle interplay of tones without replacing the base color entirely. Unlike more intense modes, it produces a natural, gradual transition that mimics indirect light sources, making it ideal for refining image luminosity while preserving details.[26] The mathematical formula for the Photoshop variant of Soft Light, applied per channel with values normalized to [0,1], is defined piecewise based on the blend value b: f(a, b) = \begin{cases} 2ab + a^2 (1 - 2b) & \text{if } b < 0.5 \\ \sqrt{a} (2b - 1) + 2a (1 - b) & \text{otherwise} \end{cases} where a is the base color value and b is the blend color value.[27] This quadratic approach ensures a smooth darkening or lightening effect, with the mode being non-commutative—swapping base and blend layers yields different results.[27] In practice, Soft Light generates subtle glows when blending brighter tones or soft shadows with darker ones, offering less aggressive contrast enhancement compared to Overlay. For instance, applying a low-luminance blend layer (e.g., a textured gray) to a portrait softens shadows on skin without introducing unnatural harshness, enhancing depth while maintaining a realistic appearance.[28] Common applications include subtle illumination in composite images, skin tone enhancement in portrait retouching to add warmth and evenness, and creating atmospheric effects like gentle fog or haze overlays in landscape photography.[29] It is particularly useful in non-destructive workflows, such as pairing with adjustment layers for targeted luminosity tweaks.[26] A variation known as the Pegtop formula addresses potential discontinuities in older implementations by using an alternative expression for brighter blend values, resulting in smoother gradients suitable for modern graphics software: f(a,b) = (1 - a) \cdot (a \cdot b) + a \cdot [1 - (1 - a) \cdot (1 - b)].[27] This ensures consistent tonal blending across the full luminance range.[27]Hard Light Mode
Hard light mode inverts the roles of the base and blend layers compared to overlay mode, treating the blend layer as the light source to produce intense contrast effects.[1] The formula for hard light is defined as follows: if the blend value b > 0.5, apply the screen operation between the base a and $2b - 1; otherwise, apply the multiply operation between a and $2b. Mathematically, \begin{cases} \text{Screen}(a, 2b - 1) & \text{if } b > 0.5 \\ a \cdot 2b & \text{if } b \leq 0.5 \end{cases} where Screen(a, c) = a + c - a \cdot c. This non-commutative operation means the result depends on layer order, with the blend layer dominating the illumination.[1] In practice, hard light creates stark highlights in brighter areas of the blend layer and deep shadows in darker areas, simulating the effect of a harsh spotlight on the base layer. This mode is commonly applied in graphic design for dramatic lighting effects, such as spotlight simulations, or to enhance metallic textures by emphasizing sharp reflections and contours.[30] For instance, applying a bright white blend layer over a dark base image produces hard, glowing highlights that mimic intense light sources without softening the edges.[31]Dodge and Burn Modes
Dodge and burn modes are blend operations that simulate traditional darkroom techniques for selectively lightening or darkening image areas, adjusting luminance through division-based computations to mimic exposure changes in photography. These modes, digitized in graphics software during the 1990s, provide targeted control over brightness without altering hue or saturation, making them essential for perceptual tone mapping in digital compositing. They build on foundational lighten and darken effects like Screen and Multiply but emphasize exposure simulation for more nuanced results.[15] The classic Color Dodge mode lightens the base layer by dividing its value by the inverted blend layer value, producing a brighter result that decreases contrast between the layers.[32] Mathematically, for base color a and blend color b in the range [0,1], f(a, b) = \frac{a}{1 - b} with clamping to 1 if b = 1 to avoid division by zero.[15] Conversely, Color Burn darkens the base by inverting the operation, yielding f(a, b) = 1 - \frac{1 - a}{b} clamped to 0 if b = 0.[15] These division-based formulas enhance perceptual brightness in gamma-corrected spaces but risk clipping highlights to white or shadows to black near extreme blend values, potentially losing detail in high-contrast scenarios. Linear variants offer additive alternatives for linear RGB workflows, avoiding perceptual nonlinearity. Linear Dodge simply adds the values, f(a, b) = a + b clamped to 1, while Linear Burn subtracts, f(a, b) = \max(0, a - b) or equivalently a + b - 1 clamped to 0, preserving additive light behavior suitable for HDR processing.[15] These modes maintain detail across midtones better than their classic counterparts in linear spaces. Sub-variants extend these concepts with steeper or combined curves. Vivid Light applies a steepened version, using Color Dodge for blend values above 0.5 and Color Burn below, rescaled around mid-gray for heightened contrast: f(a, b) = \begin{cases} 1 - \frac{1 - a}{2(b - 0.5)} & \text{if } b > 0.5 \\ \frac{a}{1 - 2b} & \text{if } b \leq 0.5 \end{cases} with appropriate clamping.[15] Linear Light similarly combines the linear modes additively around mid-gray: f(a, b) = \begin{cases} a + 2(b - 0.5) & \text{if } b > 0.5 \\ a + 2b - 1 & \text{if } b \leq 0.5 \end{cases} clamped to [0,1], emphasizing additive effects for vivid tonal shifts.[15] In applications, dodge and burn modes facilitate local exposure corrections by selectively brightening shadows or deepening highlights, as implemented in tools like Photoshop's Dodge and Burn brushes. They are commonly used in HDR merging workflows to refine tone locally after bracketed exposure combination, enhancing dynamic range without global adjustments.[33] Artistically, these modes enable sculpting form through targeted dodging in portraits or landscapes, such as emphasizing facial contours in GIMP or Photoshop by painting on overlay layers.[34][35]Arithmetic Blend Modes
Addition and Subtraction Modes
Addition and subtraction modes perform direct arithmetic operations on the color channels of two layers, typically normalized to the range [0,1], to produce cumulative or reductive effects in digital image editing and compositing. In the addition mode, also known as Linear Dodge (Add) in software like Adobe Photoshop, the result for each channel is calculated as f(a, b) = \min(1, a + b), where a represents the base layer value and b the blend layer value. This simulates the additive mixing of light sources, brightening the image and creating effects like glows or overexposures, though values exceeding 1 are simply saturated rather than wrapped in most implementations.[36][37] Subtraction mode computes f(a, b) = \max(0, a - b), clamping negative results to 0, which darkens the base layer by removing the blend layer's contribution and can produce negative or desaturated tones depending on the input values.[37] This mode is useful for simulating light subtraction, such as in duotone effects where specific color channels are diminished to emphasize contrasts or create stylized color shifts. Both modes can lead to channel overflow or underflow, requiring careful layer opacity adjustments to maintain detail. These arithmetic operations find applications in creating luminous highlights through addition, such as enhancing warmth by adding a reddish tint— for instance, blending a vector (0.2, 0.0, 0.0) onto a base red image intensifies the hue without altering green or blue channels— or in video compositing to simulate exposure adjustments.[36] Subtraction aids in targeted darkening, like isolating shadows in multilayer setups. For perceptual accuracy in simulating real-world light, these modes benefit from gamma correction, as direct addition in nonlinear (sRGB) space can distort brightness; converting to linear RGB before blending ensures additive effects mimic physical light accumulation more faithfully.[38] Linear Dodge (Add) and Linear Burn—which computes f(a, b) = \max(0, a + b - 1)—serve as variants optimized for such linear workflows in tools like Photoshop.[39]Difference and Divide Modes
The Difference blend mode calculates the absolute difference between corresponding pixel values in the base and blend layers across each color channel, using the formula f(a, b) = |a - b|, where a and b represent the intensity values from the respective layers. This arithmetic operation produces a high-contrast output that emphasizes discrepancies, resulting in brighter areas where variances are larger and darker regions where pixels match closely.[40][41] In practice, Difference generates edge-like maps or inverted textures, with the absolute value ensuring positive results regardless of layer order, unlike basic subtraction which may yield negative values. This makes it effective for tasks like motion detection in computer vision, where applying the mode to consecutive video frames isolates moving elements by revealing pixel-level changes against a static background. It also aids in texture inversion, such as when blending a uniform white layer over a base image to produce a negative-like effect. For instance, blending two identical layers with Difference yields a uniform black result, as all differences are zero, while even minor shifts in alignment or content highlight edges and alterations as bright outlines.[40][42][43] The Divide blend mode divides the base layer's pixel values by those of the blend layer, commonly implemented as f(a, b) = \frac{a \times 256}{b + 1} in 8-bit color spaces to scale results appropriately and prevent division by zero, though clamping may be applied in other variants. This operation normalizes exposure by compensating for multiplicative effects like uneven illumination, lightening darker areas in the base where the divisor is small and producing an overall brighter, often washed-out appearance. It is particularly applied in image correction workflows, such as removing color casts by dividing the image by a solid layer matching the unwanted tint, effectively flattening tonal inconsistencies.[40][41][44] While Difference is widely available in graphics software, Subtract and Divide—added to Adobe Photoshop in version CS5 (2010)—remain less common than core modes but are standard in open-source applications such as GIMP and Krita for advanced compositing and analysis.[45] Unlike directional subtraction modes, Difference and Divide focus on magnitude and reciprocal relationships to facilitate comparison and correction without signed outputs.[40][41]Boolean Blend Modes
Logical AND and OR Modes
Logical AND and OR blend modes perform bitwise logical operations on the color channels of two layers, treating pixel values as binary data to create masking-like effects in digital compositing. In these modes, each channel (typically 8-bit) is processed bit by bit: for AND, the result is 1 only where both input bits are 1, effectively retaining overlapping opaque areas; for OR, the result is 1 where at least one input bit is 1, combining opaque regions. The formula for AND is f(a, b) = a \land b, where a and b are the base and blend layer values, respectively, and \land denotes bitwise AND per channel. Similarly, the OR mode uses f(a, b) = a \lor b, with \lor as bitwise OR. These operations convert decimal pixel values to their binary representation, apply the logical operator, and convert back to decimal, preserving the per-channel structure.[46] These modes excel with grayscale or binary images, where they mimic set operations: AND produces intersections of white (opaque) regions, while OR generates unions, making them useful for precise compositing tasks. In software like Krita, they support logical compositing for creating complex masks or abstract artwork with fractal-like attributes and smooth falloff when layers have gradual transparencies. Applications include digital painting and image manipulation, where AND can create intersections of opaque regions and OR can combine them. For instance, applying AND to two binary masks—one defining a foreground shape and another a selection—retains only the overlapping white areas, effectively carving intersections for clean cutouts.[46] Despite their utility in binary contexts, logical AND and OR modes have limitations in handling full-color photographs with continuous tones, as the bitwise nature often results in harsh, posterized outputs rather than smooth blends, reducing their effectiveness for realistic imagery. They are incompatible with floating-point images or negative values, further restricting use in advanced rendering workflows. These modes extend arithmetic min/max operations by applying them strictly in a binary framework, emphasizing discrete rather than continuous value comparisons.[46]Exclusion and Other Boolean Variants
The Exclusion blend mode produces a result similar to the Difference mode but with reduced contrast, creating a softer inversion effect where overlapping colors are blended by emphasizing their disparities without fully inverting midtones. This mode operates on a per-channel basis, applying the formula B(C_b, C_s) = C_b + C_s - 2 \times C_b \times C_s, where C_b represents the backdrop color and C_s the source color, resulting in an output that inverts the base layer when blended with white while leaving black unaffected.[47] Unlike stricter Difference calculations, Exclusion gravitates toward mid-gray tones for similar input values, providing a more subtle differential blend that complements logical AND and OR operations by focusing on inversion and parity rather than union or intersection.[48] Other Boolean variants, such as XOR, extend this differential logic through bitwise operations, where the result toggles bits only in positions where the source and backdrop differ, effectively creating an exclusive output that excludes overlapping opaque areas. The XOR blend mode performs a bitwise exclusive OR operation per channel, f(a, b) = a \oplus b, where matching values result in black (0) and differing values produce intermediate colors. It is useful for highlighting differences in image analysis without affecting transparency directly in the blending step.[49][50] In practice, XOR inverts blends without the smoothing of Exclusion, producing stark contrasts suitable for binary-like manipulations. Applications of Exclusion include generating inverse masks for selective compositing, where blending a grayscale layer yields a high-contrast negative effect that highlights tonal differences, and creating duotone-inspired visuals by layering colored overlays to produce stylized, inverted color schemes with lower saturation.[48] In web design, it enables experimental effects like gradual inversion gradients via CSS mix-blend-mode, enhancing interactive elements without harsh edges.[51] XOR finds use in graphics software for image analysis tasks, such as detecting differences in bitmask renders for game development or chiptune artwork, where it facilitates precise overlap exclusion in low-level pixel operations.[49][52] Exclusion has been a core feature in Adobe Photoshop since version 3.0, with ongoing support in updates like those in 2020 for advanced compositing workflows, while XOR appears in specialized tools like Paint.NET for targeted boolean manipulations.[5][49]Color Space Blend Modes
Hue and Saturation Modes
Hue and saturation blend modes operate within the HSL (Hue, Saturation, Lightness) color space, allowing selective manipulation of chromatic components while preserving lightness. These modes are part of a broader set of color blending techniques in digital imaging software, where the base layer (typically the bottom layer) interacts with the blend layer (the top layer) through component-wise replacement. Unlike arithmetic modes that perform channel-wise calculations in RGB space, hue and saturation modes require converting both layers from RGB to HSL, applying the blend selectively, and converting the result back to RGB for display. This process ensures perceptual consistency in color adjustments.[8] In the Hue mode, the resulting color adopts the hue from the blend layer while retaining the saturation and lightness from the base layer. This creates a version of the base image tinted with the blend layer's color angle without altering its tonal range or intensity. The operation is defined conceptually as f(a, b) = \text{HSL}(H_b, S_a, L_a), where a is the base color, b is the blend color, H is hue, S is saturation, and L is lightness, followed by conversion back to RGB. Hue mode is non-commutative, meaning swapping the base and blend layers yields a different result, as the base's lightness and saturation anchor the output.[10][8] The Saturation mode, similarly, preserves the hue and lightness of the base layer but replaces its saturation with that of the blend layer. Areas in the base layer with zero saturation, such as grays, remain unchanged since they lack color intensity to modify. Conceptually, f(a, b) = \text{HSL}(H_a, S_b, L_a), again with RGB-HSL conversions. Like hue mode, it is non-commutative, with the base's hue and lightness fixed as the foundation. This mode enables vibrancy adjustments without shifting colors or tones.[10][8] These modes find applications in digital art and photo editing, particularly for colorizing grayscale images using hue mode, where a solid colored blend layer imparts a uniform tint to black-and-white content while maintaining its original tonal structure. For instance, applying hue mode with a blue blend layer over a grayscale photograph results in a cool-toned image that retains the photo's shadows, midtones, and highlights. Saturation mode is useful for enhancing or desaturating specific elements, such as boosting vibrancy in muted areas without affecting overall hue balance, common in compositing or corrective editing.[10]Color and Luminosity Modes
The color blend mode creates a resulting pixel by combining the hue and saturation values from the blend layer with the luminosity from the base layer, effectively applying the color tint of the blend layer while preserving the tonal structure of the base.[3] This mode operates within the HSL (Hue, Saturation, Luminosity) color space.[3][4] In contrast, the luminosity blend mode reverses this process, taking the hue and saturation from the base layer and the luminosity from the blend layer, which allows for relighting or tonal adjustments without altering the underlying colors.[3] Like the color mode, it relies on HSL for accurate separation of components.[4] These two modes are mathematical inverses of each other: applying luminosity to layers A and B yields the same result as applying color with the layers swapped, enabling precise control over color and tone isolation.[3] Common applications include selective coloring, where the color mode tints grayscale or monochromatic elements with vibrant hues from an overlay, and brightness correction via luminosity, which evens out lighting inconsistencies without introducing unwanted hue shifts—for instance, using a luminosity-blended adjustment layer on a portrait to balance facial shadows while retaining natural skin tones.[3] These modes complement hue and saturation blending by offering holistic adjustments that combine multiple HSL components for more nuanced color control.[4]Advanced Applications and Variations
Relation to Masking and Compositing
Blend modes are integral to compositing techniques, where they define how source and destination images are combined, often integrated with the Porter-Duff compositing model. The Porter-Duff model, introduced in 1984, provides a framework for alpha compositing using 12 operators that determine how pixels from source and backdrop layers contribute based on their alpha values, with the general formula for the composite color being co = \alpha_s F_a^s C_s + \alpha_b F_a^b C_b, where C_s and C_b are source and backdrop colors, \alpha_s and \alpha_b are their alphas, and F_a^s and F_a^b are coverage factors. Blend modes extend this by specifying the color mixing formula applied before the Porter-Duff operator, typically source-over as the default variant, allowing for effects like darkening or lightening during layer merging.[1] In layer-based compositing, blend modes interact closely with alpha channels to control transparency and visibility, enabling precise control over how layers contribute to the final image without permanent pixel alteration. Alpha channels serve as implicit masks, modulating the blend operation; for instance, a blend mode computes the premultiplied color result using the formula C = F(C_b, C_s), where F is the blend function, before applying alpha compositing to the destination. This interaction supports non-destructive workflows, where layers can be blended, masked, and adjusted iteratively, preserving original content for reversibility in editing software.[1][13] Many blend modes achieve their effects by effectively mimicking the Normal blend mode applied with a transformed mask derived from the layer's content, such as luminance or color values, rather than a simple binary alpha. For example, the Multiply mode, which outputs C = C_b \times C_s (clamped to [0,1]), can be equivalent to Normal blending with a curved mask transformation when applied over a uniform gray layer, simulating a quadratic tone curve or gamma correction with \gamma = 2. This conceptual equivalence allows blend modes to replicate complex masking behaviors, like tonal adjustments, through mathematical transformations of the effective opacity.[1] Applications of this relation include non-destructive masking in layered compositions, where blend modes combined with explicit layer masks or alpha channels enable selective revealing or concealing of elements, such as using luminosity-derived masks for targeted edits. In web technologies, blend modes are standardized for SVG and CSS compositing via the W3C Compositing and Blending Level 1 specification, published as a Candidate Recommendation in 2015 (with key developments from 2014 drafts), supporting properties likemix-blend-mode for real-time blending in browsers.[13][1]
A practical example is the Overlay mode, which multiplies or screens colors based on the backdrop's luminance—outputting C = 2 C_s C_b if C_b \leq 0.5, or $1 - 2 (1 - C_s)(1 - C_b) otherwise—functioning as a luminosity mask for non-destructive dodging and burning when painting on a 50% gray layer, lightening midtones and highlights while preserving shadows.[1]