Please explain this color blending mode formula so I can replicate it in PHP/ImageMagick

Question

I\'ve been trying to use ImageMagick to replicate Photoshops Colour Blend Mode. I found the following formulas in an online guide but I don\'t know what they mean. Do I just

Answer 1

Wikipedia has a good article on blend modes http://en.wikipedia.org/wiki/Blend_modes

They give formulas for Multiply, Screen and Overlay modes.

Multiply
Formula: Result Color = (Top Color) * (Bottom Color) /255

Screen
Formula: Result Color = 255 - [((255 - Top Color)*(255 - Bottom Color))/255]

Overlay
Formula: Result Color = if (Bottom Color < 128) 
    then (2 * Top Color * Bottom Color / 255) 
    else (255 - 2 * (255 - Top Color) * (255 - Bottom Color) / 255)

Answer 2

These color blending formulas are quite tricky if you need to incorporate also the alpha channel. I was not able to reproduce the blending of Photoshop, but Gimp works like this:

Color mix_hsv(
    ColorMixMode::Enum mode, // blending mode
    Color cd,                // destination color (bottom pixel)
    Color cs)                // source color (top pixel)
{
    // Modify the source color
    float dh, ds, dv; // destination hsv
    float sh, ss, sv; // source hsv
    cd.GetHsv(dh, ds, dv);
    cs.GetHsv(sh, ss, sv);

    switch (mode) {
        case HUE:        cs.InitFromHsv(sh, ds, dv); break;
        case SATURATION: cs.InitFromHsv(dh, ss, dv); break;
        case COLOR:      cs.InitFromHsv(sh, ss, dv); break;
        case LUMINOSITY: cs.InitFromHsv(dh, ds, sv); break;
    }
    cs.A = std::min(cd.A, cs.A);

    // Blend the modified source color onto the destination color
    unsigned char cd_A_orig = cd.A;
    cd = mix(NORMAL, cd, cs); // normal blending
    cd.A = cd_A_orig;
    return cd;
}

If you use premultiplied alpha, don't forget to correctly handle it in the above code. I was not able to find the code for blending in Gimp's source code, but the resulting images are very similar.

Photoshop's color blending is clearly different, so if anyone finds a way to implement it, please let us all know :o)

Miso

Answer 3

A while ago I reversed engineered Photoshop blending modes.

Have a look here:

http://www.kineticsystem.org/?q=node/13

And here below the code I use to convert between HSY (Hue, Saturation, Luminosity) to and from RGB (Red, Green, Blue). Photoshop use something called Hexacones to calculate the saturation.

Giovanni

/**
 * This is the formula used by Photoshop to convert a color from
 * RGB (Red, Green, Blue) to HSY (Hue, Saturation, Luminosity).
 * The hue is calculated using the exacone approximation of the saturation
 * cone.
 * @param rgb The input color RGB normalized components.
 * @param hsy The output color HSY normalized components.
 */
public static void rgbToHsy(double rgb[], double hsy[]) {

    double r = Math.min(Math.max(rgb[0], 0d), 1d);
    double g = Math.min(Math.max(rgb[1], 0d), 1d);
    double b = Math.min(Math.max(rgb[2], 0d), 1d);

    double h;
    double s;
    double y;

    // For saturation equals to 0 any value of hue are valid.
    // In this case we choose 0 as a default value.

    if (r == g && g == b) {            // Limit case.
        s = 0d; 
        h = 0d; 
    } else if ((r >= g) && (g >= b)) { // Sector 0: 0° - 60°
        s = r - b;
        h = 60d * (g - b) / s;
    } else if ((g > r) && (r >= b)) {  // Sector 1: 60° - 120°
        s = g - b;
        h = 60d * (g - r) / s  + 60d;
    } else if ((g >= b) && (b > r)) {  // Sector 2: 120° - 180°
        s = g - r;
        h = 60d * (b - r) / s + 120d;
    } else if ((b > g) && (g > r)) {   // Sector 3: 180° - 240°
        s = b - r;
        h = 60d * (b - g) / s + 180d;
    } else if ((b > r) && (r >= g)) {  // Sector 4: 240° - 300°
        s = b - g;
        h = 60d * (r - g) / s + 240d;
    } else {                           // Sector 5: 300° - 360°
        s = r - g;
        h = 60d * (r - b) / s + 300d;
    }

    y = R * r + G * g + B * b;

    // Approximations erros can cause values to exceed bounds.

    hsy[0] = h % 360;
    hsy[1] = Math.min(Math.max(s, 0d), 1d);
    hsy[2] = Math.min(Math.max(y, 0d), 1d);
}

/**
 * This is the formula used by Photoshop to convert a color from
 * HSY (Hue, Saturation, Luminosity) to RGB (Red, Green, Blue).
 * The hue is calculated using the exacone approximation of the saturation
 * cone.
 * @param hsy The input color HSY normalized components.
 * @param rgb The output color RGB normalized components.
 */
public static void hsyToRgb(double hsy[], double rgb[]) {

    double h = hsy[0] % 360;
    double s = Math.min(Math.max(hsy[1], 0d), 1d);
    double y = Math.min(Math.max(hsy[2], 0d), 1d);

    double r;
    double g;
    double b;

    double k; // Intermediate variable.

    if (h >= 0d && h < 60d) {           // Sector 0: 0° - 60°
        k = s * h / 60d;
        b = y - R * s - G * k;
        r = b + s;
        g = b + k;
    } else if (h >= 60d && h < 120d) {  // Sector 1: 60° - 120°
        k = s * (h - 60d) / 60d;
        g = y + B * s + R * k;
        b = g - s;
        r = g - k;
    } else if (h >= 120d && h < 180d) { // Sector 2: 120° - 180°
        k = s * (h - 120d) / 60d;
        r = y - G * s - B * k;
        g = r + s;
        b = r + k;
    } else if (h >= 180d && h < 240d) { // Sector 3: 180° - 240°
        k = s * (h - 180d) / 60d;
        b = y + R * s + G * k;
        r = b - s;
        g = b - k;
    } else if (h >= 240d && h < 300d) { // Sector 4: 240° - 300°
        k = s * (h - 240d) / 60d;
        g = y - B * s - R * k;
        b = g + s;
        r = g + k;
    } else {                          // Sector 5: 300° - 360°
        k = s * (h - 300d) / 60d;
        r = y + G * s + B * k;
        g = r - s;
        b = r - k;
    }

    // Approximations erros can cause values to exceed bounds.

    rgb[0] = Math.min(Math.max(r, 0d), 1d);
    rgb[1] = Math.min(Math.max(g, 0d), 1d);
    rgb[2] = Math.min(Math.max(b, 0d), 1d);
}

Answer 4

A is the Foreground pixel, B is the Background pixel, C is the new pixel. H is the Hue value for each pixel, S is the Saturation value, L is the Luminance value, and Y is the Brightness value. (Not sure what the difference is between luminance and brightness though.

Anyway, in the first example the Hue(H) and Saturation(S) values of the new pixel(C) are copied from the Foreground pixel(A) while the Brightness(Y) value of the new pixel is taken from the Luminance(L) value of the Background(B) pixel.