Converting Hex Color codes to RGB?

[_theworks]

Hi all,

Was wondering if anyone knows a way to accurately convert hexadecimal color codes into RGB format?

im currently using this function :

function getRGB(hexVal) {
  hexVal = hexVal.replace("#", "");
  var tmp =[];
  tmp[0] = parseInt(hexVal.substring(0,2),16);
  tmp[1] = parseInt(hexVal.substring(2,4),16);
  tmp[2] = parseInt(hexVal.substring(4,6),16);
  return tmp; 
}

This has proven to be very inaccurate.. and often results in the complete wrong color (ie. give it #FF00FF(purple) and it will return [255, 255, 0](yellow) )

any help would be much appreciated

Thanks in advance!

[felgall]

See http://javascript.about.com/library/blbitcl.htm for both the most efficient way of extracting the colours and an explanation of how it works.

[SSJ]

Me also needed this
Thanx felgall....

[stereofrog]

Your function looks ok to me, I'd only clean it up a bit:

function getRGB(hexVal) {
	return [
		parseInt(hexVal.substring(1, 3), 16),
		parseInt(hexVal.substring(3, 5), 16),
		parseInt(hexVal.substring(5, 7), 16)
	];
}

Another possible approach is to use bit arithmetics

function getRGB2(hexVal) {
	hexVal = parseInt(hexVal.substr(1), 16);
	return [
		0xFF & (hexVal >> 16),
		0xFF & (hexVal >> 8),
		0xFF & (hexVal)
	];
}

[mrhoo]

if you know the color is a 6 digit hex code:

function hextoRgb(hex){
if (/^\#[a-f0-9]{6}$/.test(hex)){
hex=hex.replace(/^#/,'0x');
var c= [(hex >>16) & 255,(hex >> 8) & 255, hex & 255];
return 'rgb('+c.join(',')+')';
}
return false;
}

firefox returns colors in rgb format, no matter how you define them
in your html, scripts or stylesheets. IE returns the literal definition,
which can be '#ff0000' or '#f00' or 'rgb(255,0,0)'or 'rgb(100%,0,0)' or 'red'.

To return an rgb value for any valid color string you need a little more code:

function rgbColor(color){
if(/^rgb\(\d+%?,\d+%?,\d+%?\)$/i.test(color)) return color;
var hex= color.toLowerCase();
if(/^#/.test(hex)==false){
if(hex=='transparent')return hex;
cnames={
aqua:'00ffff',black:'000000',blue:'0000ff',
fuchsia:'ff00ff',gray:'808080',green:'008000',lime:'00ff00',
maroon:'800000',navy:'000080',olive:'808000',purple:'800080',
red:'ff0000',silver:'c0c0c0',teal:'008080',white:'ffffff',yellow:'ffff00'
}
hex= cnames[hex];
if(!hex) return '';
hex='#'+hex;
}
if (/^\#[a-f0-9]{3}$/.test(hex)){
var A = hex.substring(1).split('');
for(var i= 0; i< 3; i++) A[i]+=A[i];
hex='#'+A.join('');
}
if (/^\#[a-f0-9]{6}$/.test(hex)){
hex=hex.replace(/^#/,'0x');
var c= [(hex >>16) & 255,(hex >> 8) & 255, hex & 255];
return 'rgb('+c.join(',')+')';
}

}

I use this on the back end, to convert all the color, background-color and border-color declarations and expressions to rgb, as part of rewriting sites for validation and accessibility.

It is also handy for online editors that accept user input for colors.
But it is a very good idea to use rgb values in your code, and avoid the need for conversion.