This entry was authored by highly-respected blogger and friend David Walsh. Learn more about David

As you can see from my site’s lack of design (davidwalsh.name), I’m about 90% programmer and 10% designer. As someone that’s not a designer, I’m really grateful for websites like ColourLovers — websites that provide you palettes of colors that look good together. Let’s pretend for a moment that I do have a good design and I want others to know my palette. MooTools 1.2 has made that a reality.

Step 1: The XHTML

<input type="button" id="get-colors" value="Get Colors" class="button" />
<div id="colors-wrapper"></div>

I’ve created two elements to begin with: a DIV that will serve as a wrapper for the color palette and a button that will trigger the color palette’s creation.

Step 2: The CSS

.dcolor { height:40px; }
.dtext {  }
.dwrapper { width:100px; float:left; padding:10px; margin:0 20px 20px 0; border:1px solid #ccc; }

The above CSS simply formats the elements that are needed to create the palette.

Step 3: The Moo 1.2 Javascript

//once the dom is ready
window.addEvent('domready', function() {

	//do it!
	$('get-colors').addEvent('click', function() {
		//starting the colors array
		var colors = [];
		var disallows = ['transparent'];

		//for every element
		$$('*').each(function(el) {
			//record colors!
			colors.include(el.getStyle('color'));
			colors.include(el.getStyle('background-color'));
			el.getStyle('border-color').split(' ').each(function(c) {
				colors.include(c);
			});
		});

		//sort the colors
		colors.sort();

		//empty wrapper
		$('colors-wrapper').empty();

		//for every color...
		colors.each(function(val,i) {

			//if it's good
			if(!disallows.contains(val))
			{
				//create wrapper div
				var wrapper = new Element('div', {
					'class':'dwrapper'
				});

				//create color div, inject
				var colorer = new Element('div', {
					'class':'dcolor',
					'style': 'background:' + val
				});
				colorer.inject(wrapper);

				//alert(val);

				//create text div, inject
				var texter = new Element('div', {
					'class':'dtext',
					'text':val
				});
				texter.inject(wrapper);

				//inject wrapper
				wrapper.inject($('colors-wrapper'));
			}
		});
	});
});

Once the DOM is ready, we start listening for a click on our “Get Colors” button. When the button is clicked, we store every element’s background color, border color, and text color. Once we have every color in our array, we sort the array and clear the wrapper DIV. For every color we’ve found, we create a DIV that displays the color and it’s hex value. That’s it!

The result? A sweet javascript script giving you a color palette of the current page. Click here to build a color palette of my example page!

Note: This script doesn’t accommodate images.

David Walsh is a Senior Web Developer residing in Madison, WI. He spends most of his day getting a monitor tan coding PHP, CSS, MooTools, and XHTML. When not tinkering with the newest version of Moo, David uses soccer, Rock Band, and movies to dull his coding pains.