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

normal

multiply

multiply

screen

screen

ColorBlendModes.BlendModes.BlendScreenConstant
BlendScreen

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))
source

overlay

overlay

darken

darken

lighten

lighten

color-dodge

color-dodge

ColorBlendModes.BlendModes.BlendColorDodgeConstant
BlendColorDodge

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
source

color-burn

color-burn

ColorBlendModes.BlendModes.BlendColorBurnConstant
BlendColorBurn

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
source

hard-light

hard-light

soft-light

soft-light

ColorBlendModes.BlendModes.BlendSoftLightConstant
BlendSoftLight

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
source

difference

difference

exclusion

exclusion

hue

hue

saturation

saturation

color

color

luminosity

luminosity