Current release is: 4.0.2
You can download the zip file containing: full, minified and packed versions of the colorBlend code. colorBlend Full or colorBlend Lite (lacks color names)

colorBlend is a jQuery plugin that produces animated transitional color effects.

colorBlend is very flexible and easy to use. The most complex way of calling colorBlend is by using an array of JSON variables with proper name pairs. This also gives the most precise color control over an element.

var colorBlendOptions = [
	{ param: "color", colorList:["red", "green", "blue"], duration: 1200, fps: 120 },
	{ param: "opacity", alpha:[30, 100, 0], duration: 4000 },
	{ param: "background-color", colorList:["lime", "tomato", "#ff9900"], duration: 5000, fps: 30 }
];

$(".seriously").colorBlend(colorBlendOptions);

YEAH, THAT JUST HAPPENED!

colorBlend can be called with argument value pairing. Essentially the first argument is your parameter and your second argument is your value.

$("#simpleExample").colorBlend("background-color", ["pink","green","yellow"], "duration", 5000);

You can also pause/stop colorBlend actions and resume/reset them as well.

$("#pauseExample").colorBlend("pause", "background-color");

For more interactive examples check out the Demonstrations tab.

Name	Value type Default	Description
param:	String background-color	Parameter of the element you wish to blend.
fps:	Integer 60	Frames per second (more of an approximation, depends on client machine load and other factors)
duration:	Integer 1000 (1 second)	Duration of the transitional effect.
cycles:	Integer -1 (Infinite)	How many times do you want the effect applied.
random:	Boolean false	Uses random color transitions, if this is true, strobe will be set to false.
strobe:	Boolean true	Will transition to last color and back again.
colorList:	Array ["current", "opposite"]	Array of colors to use. Accepts hex, short hex, rgb and color names. Also accepts: "parent", "transparent", "random", "current" and "opposite".
alpha:	Integer Array Empty	Must be used with a param of "opacity". Integer values between 0 - 100.
classList:	String Array Empty	Array of classes to use for transitioning. css/style tags need the "Blend" attribute or they will not be parsed by the engine. <link rel="Stylesheet" href="css/colorblend.css" Blend="true" /> <style type="text/css" Blend="true"></style>
isQueue:	Boolean true	When set, if another colorBlend call is made to the same parameter and object, it will add the new value to the queue.
action:	String Empty	Allows pausing, stopping, resetting of the color animation per parameter. "All" is a valid parameter when you want to pause/stop animation on all parameters of your selected elements.

Name	Description
preCallBack:	Function to call before blending begins.
postCallBack:	Function to call when blending completes, will not get hit if cycles = -1.
cycleCallBack:	Function to call on each cycle, will not get hit if cycles = -1.
apexCallBack:	Function to call when full color of last item in colorList and lowest full color is reached (if strobe is true).
onQueueCallBack:	Function to call when isQueue is true and item to be queued is actually queued, will not get hit if cycles = -1.
**WARNING** If blending a class and multiple color parameters are present, the callback will execute per-each color parameter when blending classes. For example: Blending from .header { background-color: #0000FF; color: white; } to .brighten { background-color: #FF0000; color: black; }. Callbacks will execute for background-color and color.

In the following examples each code piece will do the exact same thing. This is to demonstrate the flexibility when calling colorBlend. Also take note of the colors used; in each piece of code I'm using the same colors, but called in different valid manners.

var colorBlendObjectArray = [{ param: "color", colorList: ["red", "#0f0"], duration: 4000},{ param: "background-color", ["rgb(0, 0, 255)", "white", "#FF0000"] }];

$("div").colorBlend(colorBlendObjectArray);

//There is a shorter option to set the parameter, list and duration (duration is optional, defaults to 1000 ms).
$("div").colorBlend("color", ["#f00", "lime"], 4000).colorBlend("background-color", ["blue", "#FFFFFF", "rgb(255, 0, 0)"]);

//There is also argument mapping, where the argument value directly follows the argument declaration.
$("div").colorBlend("color", ["red", "#00ff00"], "duration", 4000).colorBlend("background-color", ["#00f", "#fff", "red"])

//There is also argument mapping for actions as well. Both pieces of code do the same thing.
$("div").colorBlend([{ param: "color", action: "pause"}]);
$("div").colorBlend("pause", "color");

		Color, Alpha or Class List
Param:
Options:	Random  TrueFalse Strobe  TrueFalse Queue
Duration:
Frames per second:
Cycles:
Color:

Color blend objects

Email:

Name:

Comment:

All Fields Required.