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:

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.

11 Responses to “Hexadecimal Color Fading”

  1. Anon says:

    thanks for the hexadecimal code!!!! XD i really need that 😀

  2. IamFace says:

    Very cool! Good work!

  3. Tim Archer says:

    Thank you, you just made the last, most dreaded task of a time-consuming little Flash job a breeze. Best wishes, Tim.

  4. leung says:

    thank you … for this script

  5. lmg says:

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

  6. MvZ says:

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

  7. Pixelwit says:

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

  8. MvZ says:

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

  9. Pixelwit says:

    @Robert, you’re welcome. You might like my latest color fading script which generates gradients between a series of colors.

  10. robert says:

    so awesome, thanks for sharing this script!!!

    Bookmarked*

  11. […] 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 […]

Leave a Reply

PixelWit.com's Comment Guidelines


Warning: Undefined variable $user_ID in /home2/pixelwit/public_html/blog/wp-content/themes/fvariant2/comments.php on line 57

You must be logged in to post a comment.

© Sean O'Shell 2007-2024