11 February 2011

Actionscript/Javascript Colour mode conversion functions - convert HSB/HSL/HSV to RGB to web HEX color or to flash matrix

I wrote/found/tweaked these conversion functions today to convert between the most common colour modes. it was very difficult to find a solid source for converting colours online so I thought I'd post them here for the world. They should work in actionscript 2 & 3 and could easily be tweaked to work in php, python or any other language. Here goes...


Please see the right hand pane to say thanks! 

function hex2rgb(hex:uint):Array{
 var rgb:Array = new Array();
 rgb[0] = hex >> 16;
 rgb[1]= hex >> 8 & 0xFF;
 rgb[2] = hex & 0xFF;
 return rgb;
}

function rgb2hex (rgb:Array):uint{
 var hex = rgb[0] << 16 ^ rgb[1] << 8 ^ rgb[2];
 return hex;
}

function hsb2rgb(hsb:Array):Array {
 var red, grn, blu, i, f, p, q, t;
 hsb[0]%=360;
 if(hsb[2]==0) {return(new Array(0,0,0));}
 hsb[1]/=100;
 hsb[2]/=100;
 hsb[0]/=60;
 i = Math.floor(hsb[0]);
 f = hsb[0]-i;
 p = hsb[2]*(1-hsb[1]);
 q = hsb[2]*(1-(hsb[1]*f));
 t = hsb[2]*(1-(hsb[1]*(1-f)));
 if (i==0) {red=hsb[2]; grn=t; blu=p;}
 else if (i==1) {red=q; grn=hsb[2]; blu=p;}
 else if (i==2) {red=p; grn=hsb[2]; blu=t;}
 else if (i==3) {red=p; grn=q; blu=hsb[2];}
 else if (i==4) {red=t; grn=p; blu=hsb[2];}
 else if (i==5) {red=hsb[2]; grn=p; blu=q;}
 red = Math.floor(red*255);
 grn = Math.floor(grn*255);
 blu = Math.floor(blu*255);
 return (new Array(red,grn,blu));
}

function rgb2hsb(rgb:Array):Array {
 var x, f, i, hue, sat, val;
 rgb[0]/=255;
 rgb[1]/=255;
 rgb[2]/=255;
 x = Math.min(Math.min(rgb[0], rgb[1]), rgb[2]);
 val = Math.max(Math.max(rgb[0], rgb[1]), rgb[2]);
 if (x==val){
  return(new Array(undefined,0,val*100));
 }
 f = (rgb[0] == x) ? rgb[1]-rgb[2] : ((rgb[1] == x) ? rgb[2]-rgb[0] : rgb[0]-rgb[1]);
 i = (rgb[0] == x) ? 3 : ((rgb[1] == x) ? 5 : 1);
 hue = Math.floor((i-f/(val-x))*60)%360;
 sat = Math.floor(((val-x)/val)*100);
 val = Math.floor(val*100);
 return(new Array(hue,sat,val));
}

function hsb2hex(hsb:Array):uint{
 var rgb=hsb2rgb(hsb);
 return(rgb2hex(rgb));
}

function hex2hsb(hex:uint):Array{
 var rgb=hex2rgb(hex);
 return(rgb2hsb(rgb));
}

//flash only function: I dont have an inverse for this. maybe someone could post one in the comments?
function hex2matrix ( hex:uint, alpha:Number ){
 var matrix:Array = [];
 matrix = matrix.concat([((hex & 0x00FF0000) >>> 16)/255, 0, 0, 0, 0]);// red
 matrix = matrix.concat([0, ((hex & 0x0000FF00) >>> 8)/255, 0, 0, 0]); //green
 matrix = matrix.concat([0, 0, (hex & 0x000000FF)/255, 0, 0]); // blue
 matrix = matrix.concat([0, 0, 0, alpha/100, 0]); // alpha
 return matrix;
}

//USAGE:
trace('YELLOW HSB: 60,100,100 in hex mode is:'+hsb2hex([60,100,100])) //see note below *
trace('YELLOW HEX: FFFF00 in HSB mode is:'+hex2hsb(0xFFFF00))
I should note for beginners that most functions return an array of values. To access the individual hue/sat/brightness or red/green/blue values, use array syntax like so:

hsb=hex2hsb(0xFFFF00);
hue=hsb[0];
sat=hsb[1];
val=hsb[2]
* I should also mention that flash converts hex values to numbers so hsb2hex([60,100,100]) will return 16776960 which is the same as 0xFFFF00 as far as flash is concerned.

3 comments:

aBigHairySpider said...

Thank you so much!! I used your code to help create a color picker in ActionScript 3 and then posted that source code on my blog at http://abighairyspider.blogspot.com/2011/03/creating-hsv-color-picker-in.html

molly said...

This is great! Thank you!

Deepa said...

Gone through this wonderful coures called Salesforce Certification Training in Dallas who are offering fully practical course, who parent is Salesforce Training in USA and they have students at Salesforce Training classes in Canada institutes.

Post a Comment

Cron Design Studio: Dublin based web design & software development