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;
 if(hsb[2]==0) {return(new Array(0,0,0));}
 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;
 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);

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

//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;

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:

* 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.


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!

Post a Comment

Cron Design Studio: Dublin based web design & software development