{"id":45,"date":"2007-05-14T13:33:44","date_gmt":"2007-05-14T18:33:44","guid":{"rendered":"http:\/\/www.pixelwit.com\/blog\/2007\/05\/14\/hexadecimal-color-fading\/"},"modified":"2009-08-13T16:39:56","modified_gmt":"2009-08-13T21:39:56","slug":"hexadecimal-color-fading","status":"publish","type":"post","link":"https:\/\/www.pixelwit.com\/blog\/2007\/05\/14\/hexadecimal-color-fading\/","title":{"rendered":"Hexadecimal Color Fading"},"content":{"rendered":"

A while ago, I wrote a Color Fading tutorial<\/a> for ActionScript.org<\/a> 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:<\/p>\n

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

Here’s some ActionScript code showing a fairly simple implementation of the “fadeHex” color fade script:<\/p>\n

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

Here’s the SWF which was created with the above code:
\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object><\/p>\n

And finally, here's the text output from the trace commands:<\/p>\n

ffff00
\nffe200
\nffc600
\nffaa00
\nff8d00
\nff7100
\nff5500
\nff3800
\nff1c00
\nff0000<\/div><\/div>\n

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<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

A great little ActionScript function to efficiently pick any color on the spectrum between two other hexadecimal colors. For example: “var purple = fadeHex(0xFF0000, 0x0000FF, .5);”.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[8],"tags":[23,46,36,37],"class_list":["post-45","post","type-post","status-publish","format-standard","hentry","category-flash","tag-actionscript","tag-color","tag-swfs","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":0,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/45\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/media?parent=45"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/categories?post=45"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/tags?post=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}