(View this tutorial…)

(View this tutorial…)

(View this tutorial…)

Random colors can come in useful in web design. You can use them for background colors of certain elements (like posts). You can limit the randomness of the colors to light colors or dark. I originally came up with this script to create a replacement for gravatars - basically get rid of avatars and just give commenters a random color based on their name (or email). The first step was to create the random colors. With jQuery installed, this is all the code I needed.

$(document).ready(function() {
$('.examplebox').each(function () {
var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$(this).css("background-color", hue);
});
});


For this simple example, I’m going to be changing the background color. This is the CSS for my little divs below.

.examplebox {width:50px; height:50px;float:left;margin:10px;background:red;}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Refresh to see more colors. I’m still working on the plugin to base the random color on the commenters name.

Oh, and to use only light colors, you modify the rgb formula to your liking. This will only yield light colors:

'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';


 

 

 

 

 

 

 

 

 

 

 

 

 

 

I love the visual effect these random color boxes give off, don’t you?
PS. If the boxes are all red, the script isn’t working.