I’m sure that this isn’t the optimal method of colour matching as used by the pro’s, but perhaps this code will come in handy to somebody somewhere, as it does at least work and it’s actually pretty simple. As I mentioned on the previous page, if you know of a better way to achieve this, let me know (although I’d be grateful if any complex maths are explained in idiot terms! :-)

With that all out of the way then, in whatever code you’re creating, you’ll more than likely need a function to convert a HEX colour value into an RGB value. The one below should do the trick:

function hex2rgb(hex) {

    var rgb:Object = {
	r:Number = (hex & 0xff0000) >> 16,
	g:Number = (hex & 0x00ff00) >> 8,
	b:Number = hex & 0x0000ff
    }

    return rgb;
}

trace(hex2rgb(0x000fff).g); // returns the Green value (16) etc.

If you want to use have a play about with HSL values instead, the next function will come in handy, which further converts the RGB values into HSL values. I can’t take credit for creating that, as all I’ve done is write an Actionscript version of the neutral code from EasyRGB (lots of other colour conversion formulas there too if you’re interested).

function rgb2hsl(R,G,B) {

    var var_R:Number = (R / 255);             // RGB from 0 to 255
    var var_G:Number = (G / 255);
    var var_B:Number = (B / 255);

    var var_Min:Number = Math.min (Math.min (var_R, var_G) , var_B);
    var var_Max:Number = Math.max (Math.max (var_R, var_G) , var_B);

    var del_Max:Number = var_Max - var_Min;   // Delta RGB value

    var H:Number;
    var S:Number;
    var L:Number = (var_Max + var_Min) / 2;

        if (del_Max == 0) {                   // This is a gray, no chroma...
           H = 0;                             // HSL results from 0 to 1
           S = 0;
	}
	else {                                // Chromatic data...

           if ( L < 0.5 ) {
   	       S = del_Max / (var_Max + var_Min);
	   }
           else {
   	       S = del_Max / (2 - var_Max - var_Min);
	   }

        var del_R:Number = (((var_Max - var_R) / 6) + (del_Max / 2)) / del_Max;
        var del_G:Number = (((var_Max - var_G) / 6) + (del_Max / 2)) / del_Max;
        var del_B:Number = (((var_Max - var_B) / 6) + (del_Max / 2)) / del_Max;

            if ( var_R == var_Max ) {
	        H = del_B - del_G;
            }
	    else if ( var_G == var_Max ) {
	        H = ( 1 / 3 ) + del_R - del_B;
            }
	    else if ( var_B == var_Max ) {
	        H = ( 2 / 3 ) + del_G - del_R;
            }

            if ( H < 0 ) { H++; }
            if ( H > 1 ) { H--; }
        }   

    H = Math.round(H * 255);
    S = Math.round(S * 255);
    L = Math.round(L * 255);

    return([H,S,L]);
}

Finally, the ‘important’ bit of code which works out the differences, or ‘distances’ between each colour (explained in a bit more detail after the code itself):

// pass in 1st RGB colour (r1, g1 and b1) & the colour to compare to (r2, g2, b2)
function getNearestColour(r1, g1, b1, r2, g2, b2):Number {

    // temporary variables
    var rDiff:Number;
    var gDiff:Number;
    var bDiff:Number;
    var total:Number;

    // simply find the differences between the colours
    rDiff = r1 - r2;
    gDiff = g1 - g2;
    bDiff = b1 - b2;	

    // then calculate the total 'distance', with a 'Euclidean Distance' formula.
    total = Math.sqrt(Math.pow(rDiff,2) + Math.pow(gDiff,2) + Math.pow(bDiff,2));

    return(total);

}

The lowest value returned from that function will be the closest match. 

So to sum that up, we find the difference between the Red, Green and Blue values with a simple subtraction, then each of the three differences are squared, then added together, and the whole thing square rooted. Or something like this:

That formula is courtesy of Wikipedia, so you if you want to read more about that, the Colour Quantization and Euclidean Distance pages should come in quite useful. :-) 

With all that said, I don’t think all of that is entirely necessary. Just squaring the differences and adding them together still seems to work pretty well too. But it’s good to be thorough, eh.

Problems might arise when there isn’t a decent selection of comparison colours, as you could find none of the colours are a good visual match. After all, which colour is closest when you’ve got a black and only a bright pink and bright green to compare it to? But I guess that’d be an issue with most colour comparison methods.

Hope that helps someone, let me know if it does…

Pages: 1 2