Javascript Color Fade Function (Find the hex value between two hex values)

There are plenty of libraries out there for Actionscript and Javascript to tween or fade between colors, but when building our own applications I have always come across use cases for having the ability to generate the hex value that is at a certain percentage or ratio between two hex values (fade between hex values). A simple implementation of this is generating a gradient between two colors.



Sample Code



6 Comments

  1. Delan
    Posted December 26, 2008 at 11:13 pm | Permalink

    Wow, that really is amazing! Compact too!

    If you don’t mind, I would like to use this in my InterModule javascript library (

    http://intermodule.sf.net/

    )

    Thanks for the great idea!

  2. Posted December 30, 2008 at 1:33 am | Permalink

    That would be awesome!

  3. Posted March 24, 2009 at 7:00 am | Permalink

    I’m having a little trouble coding the function into my library. Can you reply with more detached code (less integrated to the specific instance)? Like, help me write the function that you input two and “returns” the array of blends?

    That would be great.

  4. Posted March 27, 2009 at 10:17 am | Permalink

    Never fret; as I have figured it out. When you see InterModule 1.9.06, you will see your nice blend function as im.Color()[.blend()] – meaning the new color API object will have a blend function to blend with another color object at a certain percentage.

    Cheers, delan :p

  5. David Lindsey
    Posted July 8, 2009 at 1:38 pm | Permalink

    Kinda buggy. Try 0×0000FF and 0×00FF00 with 100 divisions or 0×0000FF and 0×000F00 with 100 divisions

  6. Posted July 14, 2009 at 7:57 pm | Permalink

    perfect!

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">