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!

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.

Susan said...

A huge collection of all the Celebrity net worth of the world. How much is celebrity worth? Compare yourself to your favorite celebrity.

Maradona Jons said...

อีกทั้งเรายังให้บริการ เกมสล็อต ยิงปลา แทงบอลออนไลน์ รองรับทุกการใช้งานในอุปกรณ์ต่าง ๆ HTML5 คอมพิวเตอร์ แท็บเล็ต สมาทโฟน คาสิโนออนไลน์ และมือถือทุกรุ่น เล่นได้ตลอด 24ชม. ไม่ต้อง Downloads เกมส์ให้ยุ่งยาก ด้วยระบบที่เสถียรที่สุดในประเทศไทย

Maradona Jons said...

หาคุณกำลังหาเกมส์ออนไลน์ที่สามารถสร้างรายได้ให้กับคุณ เรามีเกมส์แนะนำ เกมยิงปลา รูปแบบใหม่เล่นง่ายบนมือถือ คาสิโนออนไลน์ บนคอม เล่นได้ทุกอุปกรณ์รองรับทุกเครื่องมือ มีให้เลือกเล่นหลายเกมส์ เล่นได้ทั่วโลกเพราะนี้คือเกมส์ออนไลน์แบบใหม่ เกมยิงปลา

Post a Comment

Cron Design Studio: Dublin based web design & software development