shift rgb one color to another color of image HTML 5 canvas

Question

I have a png Image for my game developing in HTML 5 and javascript. I want to give it different color. image have 4 different color. I want to shift every color to other.

For Example
      Image have 4 color 
              1. brown
              2.lite brown
              3.dark brown
              4. dark dark brown
      I want to convert it in blue then it should be
              1.blue
              2.lite blue
              3.dark blue
              4.dark dark blue

I know how to change color in HTML5 canvas but have no idea how two relate last three color with first one. I have google for color transformation but nothing found helpful.

thanks.

Answer 1

To get best result you will have to change color space from RGB to HSL (or HSV). This allows you to work with Hue, Saturation and Luminance. With hue you can "rotate" your color into another.

You must then define the range of colors you want to change and shift the colors within this range to your target color, then convert the HSL value back to RGB (this is what for example Photoshop uses).

^{Image from WikiPedia (see link at bottom)}

RGB to HSL -

/**
 * Converts an HSL color value to RGB. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
 * Assumes h, s, and l are contained in the set [0, 1] and
 * returns r, g, and b in the set [0, 255].
 *
 * @param   Number  h       The hue
 * @param   Number  s       The saturation
 * @param   Number  l       The lightness
 * @return  Array           The RGB representation
 */
function hslToRgb(h, s, l){
    var r, g, b;

    if(s == 0){
        r = g = b = l; // achromatic
    }else{
        function hue2rgb(p, q, t){
            if(t < 0) t += 1;
            if(t > 1) t -= 1;
            if(t < 1/6) return p + (q - p) * 6 * t;
            if(t < 1/2) return q;
            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        }

        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }
    return [r * 255, g * 255, b * 255];
}

In HSL color space you can "rotate" the colors. All you need to do is to find the range by finding maximum and minimum angle, saturation and luminance levels of the colors you want to rotate. As this is HSL related colors will be close to each other so you can find the brown variations being in a short range (you could use a rectangle - or rather: a cube, to define the range. See my palette link below to get the idea).

Then you check each pixel if they have a HSL value within that range and if they do you adjust it and convert it back to RGB.

HSL to RGB -

/**
 * Converts an RGB color value to HSL. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
 * Assumes r, g, and b are contained in the set [0, 255] and
 * returns h, s, and l in the set [0, 1].
 *
 * @param   Number  r       The red color value
 * @param   Number  g       The green color value
 * @param   Number  b       The blue color value
 * @return  Array           The HSL representation
 */
function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }

    return [h, s, l];
}

I made this JavaScript palette picker in the past which uses these color models to get and set colors, and which you can study to see them in action. You can also use it to find the range you want to use for alteration (a good start point would of course be in the lower left corner).

You basically iterate through all your pixels, convert RGB to HSL/HSV, check if they are in your range, adjust if they are and convert the adjusted pixel back to RGB.

For more details go the articles mentioned in comment sections above of the functions:
http://en.wikipedia.org/wiki/HSL_color_space