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(0×000000, 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(10)
RSS Feeds
Loading ...
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 [...]