Question

I am using this Math for a bg color animation on hover:

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

It produces a random rgb color. Very nice indeed but I look for something different.

Does anybody know a good Math that I can use to have that random color only out of a certain color range, like out of the red color range or out of the greens?

Any help is appreciated.

@Avinash, here is my complete code as I use it right now. How can I include your solution?

$(document).ready(function () {
    //bg color animation
    original = $('.item,.main-menu-button').css('background-color');
    $('.item,.main-menu-button').hover(function () { //mouseover
        var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; //random hover color
        $(this).stop().animate({
            'backgroundColor': col
        }, 1000);
    }, function () { //mouseout
        $(this).stop().animate({
            'backgroundColor': '#111'
        }, 500); //original color as in css
    });
});

It doesn´t work. I better leave it as it is. Thank to all of you for your help.

Answer 1

To generate a random number in a range, we need to do some thing like

minValue + random Number * (maxValue - minValue)

i.e., if you want to create a random number between the range of 100 to 200, we should do

var rand = 100 + Math.floor(Math.random() * (200 - 100));

which gives a random number in between the range 100 to 200

using this basic rule we can generate a random color from a given range

var range = [{0 : 150,1 : 200}, {0 : 200,1 : 230},{0 : 10,1 : 20}];
function rgb() {
  var color  ='rgb(';
  for(var i = 0; i< 3; i++) {
    color += rand(range[i]['0'], range[i]['1']) + ',';
  }
  return color.replace(/\,$/,')')
}

function rand(min, max) {
    return min + Math.floor(Math.random() * (max - min));
}

alert(rgb());

Try this code http://jsbin.com/tuday

EDIT :

$(function() {
    var cache = $('#hover').css('background-color');
    $('#hover').hover(function() {
        $(this).css({'background-color' : rgb() });
    },function() {
        $(this).css({'background-color' : cache });
    });
});

Example : http://jsbin.com/iwovew