I’m sure many of you will have heard of the yellow fade technique, pioneered by 37 signals and popularised by its use in Basecamp. The problem with that script, however, is that the colours, including all the steps in between, are hard coded which makes it fairly complex to work with if you’re not just fading one colour.

For a project I’m working on at the moment, the client wanted various colours to fade appropriately, and I needed a script that was not only generic in the colours it supported, but incredibly easy to reuse. I also figured, why don’t I just make a general colour object to handle all your scripting-colour needs.

So, I give you the Color() script. Although I took inspiration from Eric Meyer’s Color Blender, I did completely rewrite the entire script for my needs. This is an object-oriented script who’s constructor accepts various parameters in order to specify the colour and it even has support for an alpha channel. You can either pass it 3 integer parameters, each representing the RGB colour component and an optional 4th parameter representing the alpha channel. Additionally, it will also accept a string with any valid CSS 2.1 Color Value or keyword, plus CSS3’s RGBA syntax. (HSL and HSLA are not yet supported).

The blend function is where it really shines. You pass it the colour you wish to blend with and the number of steps it should take, and it returns a pallet of colours for all the steps. I made a colour fading demo just to show off how powerful and easy to use the script is. Enter any supported colour value and watch the background colour fade from the current colour to the new colour. You can also customise the number of steps and the interval between them. I hope you find this script useful, feel free to use it wherever or however you like.