Create a Color Palette Using CSS and MooTools 1.2
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" /><br /><br /><br /> <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.
Popularity: 8% [?]
19 Responses so far
Trackbacks
- Create a Color Palette Using CSS and MooTools 1.2
- links for 2008-05-20 « Tathata - d’ Observer
- links for 2008-05-22 | iKeif
Leave a reply
Thank you for the opportunity Eric!
Of course David! Great stuff!
Cool. :) Now if you could only query colourlovers and have it suggest similar and contrasting colors.
@Mark: Interesting idea. I’ll keep that in mind.
Could you “cURL” a site and pull the colors?
@Mark:
Frankly, you can pull colors from any page using some javascript as above (without MooTools). cURL is probably overkill here but yes it can be done.
Well, you can’t put javascript on someone else’s site unless downloaded the html and css files to your computer and inserted the Javascript. This method wouldn’t be very automated.
I was thinking more on the lines like creating a function that goes out and looks at any site and returns with a palette of colors. I was assuming curl would be the best for the “going out and getting” part of the function.
Am I missing something?
@Mark:
You’re right that cURL is the best way for automation. You can, of course, use Firebug to execute the javaScript needed if you don’t care about automation.
Something like that would be very, very cool. :)
@Eric & Mark: You could cURL it but that would be an extremely difficult process because you don’t get the “true” DOM. You’d have to parse the output to find inline styles. You’d also have to parse the doc to get links to stylesheets and then parse the stylesheets to find colors. I’ve got it on my list to figure out how to get the palette of other websites.
You’re right, David. Some uber-sweet regex and scripting could probably whip this up. :)
If you use Firefox, install the Colorzilla 2 Beta (http://www.iosart.com/firefox/colorzilla/). You can then right click on the button on the bottom left hand side of any page and choose “Webpage DOM Color Analyzer…” and it will show a window with a list of all colors from the current sites DOM.
@John:
Nice! Actually I tried out Colorzilla 2 Beta and it messed with my other extensions. This was a couple months ago, however, so it may be more stable.
Thank you very much for the tip!
@John: For an individual’s purposes, that’s great. But if a user doesn’t use Fox, they can’t get your colors. With this system they can.
helo.. i like your website.. simple and so cute :) thanks for the color palet tutorial
Thanks for sharing!
BTW: Your site design RAUX!!! Model of elegance!
@hairulazami and mrbiotech:
Thanks for the compliments. Funny you should mention it because I’m in the process of redesigning it…