PiXELWiT

A while ago, I wrote a Color Fading tutorial for ActionScript.org which provided nearly all the functions you'd ever want for fading colors. Did you notice that I said "nearly"? Well, today I've added yet another weapon to my color-fading code arsenal called "fadeHex". The name probably won't put fear in the hearts of fellow code warriors but it's a powerful tool none the less. In essence, it lets you specify two colors, then creates a color gradient from the first color to the second and lets you choose a color at any point on that gradient. For example, "fadeHex(0x000000, 0xFFFFFF, .25)" will return a dark gray color (75% black, 25% white) while "fadeHex(0xFF0000, 0x0000FF, .5)" returns a purple color (0x7F007F). So without further ado, here's the code:

//
function fadeHex (hex, hex2, ratio){
	var r = hex >> 16;
	var g = hex >> 8 & 0xFF;
	var b = hex & 0xFF;
	r += ((hex2 >> 16)-r)*ratio;
	g += ((hex2 >> 8 & 0xFF)-g)*ratio;
	b += ((hex2 & 0xFF)-b)*ratio;
	return(r<<16 | g<<8 | b);
}
//

Here's some ActionScript code showing a fairly simple implementation of the "fadeHex" color fade script:

//
var startHex = 0xFFFF00;// Yellow.
var endHex = 0xFF0000;// Red.
//
function fadeHex (hex, hex2, ratio){
	var r = hex >> 16;
	var g = hex >> 8 & 0xFF;
	var b = hex & 0xFF;
	r += ((hex2 >> 16)-r)*ratio;
	g += ((hex2 >> 8 & 0xFF)-g)*ratio;
	b += ((hex2 & 0xFF)-b)*ratio;
	return(r<<16 | g<<8 | b);
}
//
function drawSquare (x, y, color){
	beginFill(color);
	moveTo(x, y);
	lineTo(x+50, y);
	lineTo(x+50, y+50);
	lineTo(x, y+50);
	lineTo(x, y);
}
//
for(var i=0; i<=9; i++){
	var ratio = i/9;
	var x = i*50;
	var y = i*2;
	var nowColor = fadeHex(startHex, endHex, ratio);
	drawSquare(x, y, nowColor);
	trace(nowColor.toString(16));
}
//

Here's the SWF which was created with the above code:

And finally, here's the text output from the trace commands:

ffff00
ffe200
ffc600
ffaa00
ff8d00
ff7100
ff5500
ff3800
ff1c00
ff0000

I hope you find this color fading code as handy as I did. If you'd like to read more about storing your color fades in an array you can read my Fading Multiple Colors Tutorial.