jQuery Math for Color Animation - certain Color Range

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 });

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

Answer 1

Generates a random color out of the black-to-red range:

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

Answer 2

You should research on converting values to and from RGB to HSB (sometimes called HSI). Arithmetic on this color model makes very much sense. E.g. To play with shades of red you can start with HSB values (0, 100, 100) for "pure" red. Change S=50% gives you a "grayer" shade of red. Changing B=50% gives you "darker" shade of red.

Answer 3

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 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/awahe3

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/ejuvo4