Hexadecimal Color Fading
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:
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.
Comments(11)
RSS Feeds
thanks for the hexadecimal code!!!! XD i really need that 😀
Very cool! Good work!
Thank you, you just made the last, most dreaded task of a time-consuming little Flash job a breeze. Best wishes, Tim.
thank you … for this script
// needed to fade in an array of colors
// small function using fadeHex does it. sharing, enjoy 🙂
// usage: fadeHexArr([0x00FF00, 0xFFFF00, 0xFF0000], 0.3);
private function fadeHexArr(hexArr:Array, ratio:Number):int {
var r:Number = (hexArr.length – 1) * ratio;
var i0:int = Math.floor(r);
var i1:int = Math.ceil(r);
return fadeHex(hexArr[i0], hexArr[i1], r – i0);
}
Wew… that’s awesome xD
Uhm.. actually I need to make it like a color mixer to mix 2 selected color. Maybe i should try to change some of your code.. (or perhaps u can help me make a new Script xD)
This is the reference link for color mixer:
http://aleto.ch/webTools/hexCode.html
I just need 2 selected color for 1:1, 1:2, and 1:3 itteration.
Thx before.. ^^
@MvZ, a few HTML characters were being escaped and caused errors in the code but everything should be back to normal now. Try pasting the code on the first frame of a new Flash file.
Thanks for bringing this to my attention.
Eto… Pixelwit.. can u gimme the detail for how to use that ActionScript in Flash Pro 8 ?
Sorry.. I’m noob for ActionScript… x_x
please reply to my ym(mave_12ick) or email back to me plz… thx..
@Robert, you’re welcome. You might like my latest color fading script which generates gradients between a series of colors.
so awesome, thanks for sharing this script!!!
Bookmarked*
[…] while ago I wrote a Hexadecimal Color Fading Tutorial explaining how to select a single color at any point on a gradient between two specified colors. In […]