Blend Modes
If your browser supports the CSS property mix-blend-mode
, you will see pairs of images below. The former images are the results of ColorBlendModes, and the latter images are the results with the CSS.
normal
ColorBlendModes.BlendModes.BlendNormal
— ConstantBlendNormal
The destination color is always the source color.
Cdest = Csrc
multiply
ColorBlendModes.BlendModes.BlendMultiply
— ConstantBlendMultiply
The source color is multiplied by the backdrop color.
Cdest = Cb × Csrc
screen
ColorBlendModes.BlendModes.BlendScreen
— ConstantBlendScreen
The complementary colors of the source and backdrop colors are multiplied, and the destination color is the complementary color of the multiplicated color.
Cdest = 1 - ((1 - Cb) × (1 - Csrc))
overlay
ColorBlendModes.BlendModes.BlendOverlay
— ConstantBlendOverlay
This mode uses the multiply
or screen
mode, depending on the backdrop color. The overlay mode is the inverse of the hard-light
mode.
if Cb <= 0.5
Cdest = Csrc × 2Cb
else
Cdest = 1 - ((1 - Csrc) × (1 - 2Cb))
end
darken
ColorBlendModes.BlendModes.BlendDarken
— ConstantBlendDarken
The darker values of the backdrop color and the source color are selected.
Cdest = min(Cb, Csrc)
lighten
ColorBlendModes.BlendModes.BlendLighten
— ConstantBlendLighten
The lighter values of the backdrop color and the source color are selected.
Cdest = max(Cb, Csrc)
color-dodge
ColorBlendModes.BlendModes.BlendColorDodge
— ConstantBlendColorDodge
The destination color is the result of dividing the backdrop color by the complementary color of the source color.
if Cb == 0
Cdest = 0
elseif Csrc == 1
Cdest = 1
else
Cdest = min(1, Cb / (1 - Csrc))
end
color-burn
ColorBlendModes.BlendModes.BlendColorBurn
— ConstantBlendColorBurn
The destination color is the result of dividing the complementary color of the backdrop color by the source color.
ColorBlendModes uses the definition of W3C drafts as shown below. Note that there is a variant, which returns 0
when Cb == 1
and Csrc == 0
.
if Cb == 1
Cdest = 1
elseif Csrc == 0
Cdest = 0
else
Cdest = 1 - min(1, (1 - Cb) / Csrc)
end
hard-light
ColorBlendModes.BlendModes.BlendHardLight
— ConstantBlendHardLight
This mode uses the multiply
or screen
mode, depending on the source color. The overlay mode is the inverse of the overlay
mode.
if Csrc <= 0.5
Cdest = Cb × 2Csrc
else
Cdest = 1 - ((1 - Cb) × (1 - 2Csrc))
end
soft-light
ColorBlendModes.BlendModes.BlendSoftLight
— ConstantBlendSoftLight
The result is similar to the hard-light
mode, but milder. This mode is also related to the overlay
mode.
ColorBlendModes uses the definition of W3C drafts as shown below. Note that there are different definitions of the soft-light
.
if Csrc <= 0.5
Cdest = Cb - (1 - 2Csrc) × Cb × (1 - Cb)
else
if Cb <= 0.25
D = ((4Cb - 3) × Cb + 1) × 4Cb
else
D = sqrt(Cb)
end
Cdest = Cb + (2Csrc - 1) × (D - Cb)
end
difference
ColorBlendModes.BlendModes.BlendDifference
— ConstantBlendDifference
The destination values are the subtraction of the darker values from the lighter values of the backdrop and source colors.
Cdest = abs(Csrc - Cb)
exclusion
ColorBlendModes.BlendModes.BlendExclusion
— ConstantBlendExclusion
The result is similar to the difference
mode, but milder.
Cdest = Cb + Csrc - 2Cb × Csrc
hue
ColorBlendModes.BlendModes.BlendHue
— ConstantBlendHue
The result is a color with the hue of the source color and the saturation and luminosity of the backdrop color.
saturation
ColorBlendModes.BlendModes.BlendSaturation
— ConstantBlendSaturation
The result is a color with the saturation of the source color and the hue and luminosity of the backdrop color.
color
ColorBlendModes.BlendModes.BlendColor
— ConstantBlendColor
The result is a color with the hue and saturation of the source color and the luminosity of the backdrop color.
luminosity
ColorBlendModes.BlendModes.BlendLuminosity
— ConstantBlendLuminosity
The result is a color with the luminosity of the source color and the hue and saturation of the backdrop color.