Here's what I'd like to do: I've got a line of text in an HTML page. I'd like to have that piece of text start at a given color, cycle though the spectrum, wait a second or two, and then repeat.

I'd like to do this in javascript if possible (something like flash isn't totally out of the question, but would be some major scope creep of this project.)

I know enough JS to know this is possible, but that's about it. Can anyone point me in the right direction?

And yes, this is a real client request. I'm just glad they didn't also ask for the blink tag. ;)

Here's what I'd like to do: I've got a line of text in an HTML page. I'd like to have that piece of text start at a given color, cycle though the spectrum, wait a second or two, and then repeat.

I'd like to do this in javascript if possible (something like flash isn't totally out of the question, but would be some major scope creep of this project.)

I know enough JS to know this is possible, but that's about it. Can anyone point me in the right direction?

And yes, this is a real client request. I'm just glad they didn't also ask for the blink tag. ;)

• javascript
• animation
• colors

3 Answers 3

If you want to cycle through the spectrum, using the HSB color model is your best bet.

Related questions:

• Color scaling function
• Generate colors between red and green for a power meter?

I would look at some of the "fading" javascript examples on the web, and modifying them to loop with the right colors. Here's one example from the web that you could probably modify to cycle constantly.

After browsing some of the "fading" examples, we ended up going with jQuery's .animate() function and this color animation plugin. Works spectacularly.