I trying to add the text effect using jquery with ui animate. Is there is a way to show all possible color randomly without defined all colors. For example color combination is based on RGB. Using the animate with color like

setInterval(function() {
jQuery(".font-style").animate({color: "red"}, 2000).
          animate({color: "green"}, 2000).animate({color: "blue"}, 2000);}, 400);

Is there is any possibilities to show the color combination of RGB Randomly in jquery. Any suggestion would be great.

Thanks.

I trying to add the text effect using jquery with ui animate. Is there is a way to show all possible color randomly without defined all colors. For example color combination is based on RGB. Using the animate with color like

setInterval(function() {
jQuery(".font-style").animate({color: "red"}, 2000).
          animate({color: "green"}, 2000).animate({color: "blue"}, 2000);}, 400);

Is there is any possibilities to show the color combination of RGB Randomly in jquery. Any suggestion would be great.

Thanks.

• javascript
• jquery

• 1 Just use a hex number – Johan Commented Aug 29, 2013 at 10:22
• 1 check my answer shortest code with demo – Tushar Gupta - curioustushar Commented Aug 29, 2013 at 11:05

6 Answers 6

You can generate a random color like this:

var newColor = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
jQuery(".font-style").animate({color: newColor}, 2000); // animate

This will create a random hex color such as #ff00cc.

Note: regular jQuery doesn't animate colors, you'll have to use jQuery color plugin or jQuery UI

You could do something like this:

var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';

And than put col in your animate:

jQuery(".font-style").animate({color: col}, 2000)

var hue = 'rgb('
            + (Math.floor(Math.random() * 256)) + ','
            + (Math.floor(Math.random() * 256)) + ','
            + (Math.floor(Math.random() * 256)) + ')';

Then add this hue in your color

jQuery(".font-style").animate({color: hue}, 2000).
          animate({color: hue}, 2000).animate({color: hue}, 2000);}, 400);

JSFIDDLE DEMO for RANDOM color for label

You could use Math.random

setInterval(function() {

var red= Math.floor((Math.random()*255)+1);
var blue = Math.floor((Math.random()*255)+1);
var green = Math.floor((Math.random()*255)+1);
jQuery(".font-style").animate({color: "red"}, red).
          animate({color: "green"}, green).animate({color: "blue"}, blue);}, 400);

if your running this continously though it'll probably become unresponsive pretty quickly.

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

Shortest code

DEMO

"#"+((1<<24)*Math.random()|0).toString(16);

You could use javascripts random method, set boundaries and have it produce either hex or rgb codes. Assign them to variables and use those in place of "red", "green", "blue" etc.