• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

jQuery Color Randomizer

I'm making a update to my site (Ethan Turkeltaub). If you visit it, you see that the lines at the top and bottom and nav links are a blue. When you click About, they all change color. And vice versa for the other links.

I want to be able to randomize between these colors and change the lines and links accordingly. So, if I go to the home page, it could be blue or one of the other colors found in my site, then I refresh, and it is different.

How could I do this?


Active Member
What you mean it doesnt help?

Take a look through the two examples I have provided, Im sure you can modify them to suit your needs, the first link in particular you could create an array of css classes that equate to differing colour scheme, then using jquery pick from the array (randomly ) one of the values / classes and apply that to the body class of your page, thus changing the colour scheme.

Alternatively you can do something similar using php, should you so wish.


Senior Member
	$colours = array('f00','0f0','00f');
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Random colours</title>
	<style type="text/css">
		a	{ color:#<?php echo $colours[1]; ?>; }
	<p><a href="http://csswizardry.com/">Link</a></p>


Senior Member

$colours is an array which contains a series of colour values. You can continue adding to these values but make sure they are separated by a comma each time.

Next, shuffle($colours) randomises the order of the array's content. This means the first value of the array is randomised each time the script runs.

Finally, echoing the second (arrays start at 0, so 0=1st, 1=2nd etc etc) value of the randomised array, you should get a different colour each time.

Think of it like this:

The array is a deck of cards.
Shuffle is shuffling those cards.
Echoing the second value is picking the second card from the shuffled deck. So although it's always the second card, it's a different one as the order of the cards keeps changing.