Writing the code

The code is fairly straightforward. I will go over it more in depth below, but I have also commented it so you can get a better idea line for line what each part does.

The whole jQuery code

// .split(', ') looks for each ', ' and splitting the colors to be set as individual variables
var myColors = 'black, blue, orange, green, purple'.split(', '),
	theColors = [], // Creates a variable with an array as the value
	colorBox = $('#colorBox'); // sets the element with ID styleswitcher as a variable

// Create a new div for each color
for ( var i = 0, len = myColors.length; i < len; i++ ) {
	var div = $('<div />').css('background', myColors[i])[0];
	theColors.push(div);  // .push() adds new elements to the end of the theColors array, and returns the new length.
}

colorBox.append(theColors); // add theColors array to the colorBox

$('#colors').stop().hover( function() {
	colorBox.fadeIn(200).children('div')
		.hover(function() { // fade the colors div when hovering over the #header
			$('#header, h2').css('backgroundColor', $(this).css('backgroundColor'))
		});
}, function() { // hover off
	colorBox.fadeOut(200);
});

Ok so what's it all do. If my commented code is not clear enough for you, here is so more explanation.

This first part:

var myColors = 'black, blue, orange, green, purple'.split(', '),
	theColors = [], // Creates a variable with an array as the value
	colorBox = $('#colorBox'); // sets the element with ID colorBox as a variable

This creates 3 variables (myColors, thecolors, and colorBox). The first variable actually contains 5 different values. Using the .split() method, you can split the colors up so myColors is set as each value separately. In this case, .split(', ') the comma-space is what it looks for to know where to make the splits. Make sense?

The variable theColors = []; is being set as an empty array, and the variable colorBox = $('#colorBox'); is being set as the CSS selector #colorBox, so every instance in the rest of the code that colorBox appears, it's actually the same thing as selecting $('#colorBox'); each time.

Moving onto the next part:

// Create a new div for each color
for ( var i = 0, len = myColors.length; i < len; i++ ) {
	var div = $('<div />').css('background', myColors[i])[0];
	theColors.push(div);  // .push() adds new elements to the end of the theColors array, and returns the new length.
}

Here we set up a for() loop to loop through the colors. Inside the loop a variable is set, div is set with a CSS style added to it saying it's background color is... whatever color from the myColors variable, which was set to loop through each color in the for().

The last part, theColors.push(div); basically adds the new divs, the one's created on the fly with the preceding code, that have the background color of the ... whatever myColors variable remember. Each of these divs are added to theColors variable, which if you recall, was an empty array we set up. Confused yet?

Now the last chunk of code:

colorBox.append(theColors); // add theColors array to the colorBox

$('#colors').hover( function() { // hover function
	colorBox.fadeIn(200).children('div')
		.hover(function() { // fade the colors div when hovering over the #header
			$('#header, h2').css('backgroundColor', $(this).css('backgroundColor'))
		});
}, function() { // hover off
	colorBox.fadeOut(200);
});

Here we set up a hover function for when $('#colors') is hovered over. When it is, the colorBox div will fade in, and the child divs of it are therefore also visible. We set up a hover function on the child divs then, that will change the $('#header, h2') selectors to have the CSS background color of whichever color is being hovered over.
Then fade out the colorBox div when you hover off of it.

That's pretty much it, and you can see a demo of it here to get a better idea of what it does.

I should also probably mention that I did set up a couple CSS styles for this too. Here's what I used for that.

#header { padding: 2em 1em; }
#header h1 { display: inline; }
#colors { padding: 2em 1em; }
#colorBox {
	float: right;
	display: none;
}
#colorBox div {
	width: 30px;
	height: 30px;
	float: left;
	display: inline;
	cursor: pointer;
}

If you have any questions please let me know below. I'm happy to help in any way I can. Hope this helped you learn a little something about jQuery.