Color Palette Generator Using jQuery

By  on  

As I continue to learn jQuery, I think it's important that I begin by porting over scripts I've created using MooTools. One of those scripts is my Color Palette Generator script, which debuted on Eric Wendelin's blog. For those of you that missed it, my script analyzes all of the colors on the page (minus images) and builds a palette of colors. Here it is in some jQuery goodness.

The XHTML

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

All we need to begin with is the button that triggers the palette generation and a DIV container that will hold all of the DIVs my jQuery creates.

The CSS

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

These CSS classes act as containers for the text DIV I generate and the color-displaying DIV I generate. Those two DIVs are held in one wrapping DIV.

The jQuery JavaScript

/* when the dom is ready */
$(document).ready(function() {
	$('#get-colors').click(function() {  
		
		//my colors array
		var colors = new Array();
		
		//get all elements
		$('*').each(function() {
			if($(this).css('background-color') && $(this).css('background-color') != 'transparent') { colors.push($(this).css('background-color')); }
			if($(this).css('color')) { colors.push($(this).css('color')); }
			if($(this).css('border-color')) { colors.push($(this).css('border-color')); }
		});
		
		//remove dupes and sort
		colors.sort();
		
		//create a color block for all of them
		jQuery.each(colors,function(it,value) {
			
			if(!$('div[rel=\'' + value + '\']').length)
			{
			
				//inject the wrapper
				var wrapper_id = 'w' + it;
				$('<div class="dwrapper" id="' + wrapper_id + '" rel="' + value + '"> </div>').appendTo('#colors-wrapper');
				
				//inject the color div
				$('<div class="dcolor" style="background-color:' + value + '"> </div>').appendTo('#' + wrapper_id);
				
				//inject text div
				$('<div class="text">' + value + '</div>').appendTo('#' + wrapper_id);
			}
			
		});
		
	});
});

When someone clicks the "Get Colors" button, I grab every element in the DOM and collect its color, background-color, and border-color. Once I've cycled through all of the elements, cycle through all of the colors and display them as DIVs inside my colors-wrapper element. You'll note that I utilized the rel attribute to prevent duplicates.

There's the jQuery Color Palette Generator for you!

Recent Features

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

  • By
    MooTools Image Preloading with Progress Bar

    The idea of image preloading has been around since the dawn of the internet. When we didn't have all the fancy stuff we use now, we were forced to use ugly mouseover images to show dynamism. I don't think you were declared an official...

  • By
    Jack Rugile&#8217;s Favorite CodePen Demos

    CodePen is an amazing source of inspiration for code and design. I am blown away every day by the demos users create. As you'll see below, I have an affinity toward things that move. It was difficult to narrow down my favorites, but here they are!

Discussion

  1. bazztrap

    Can you include this script as part of GreeseMonkey .. that would be great

  2. I just coded up an example in jQuery on how to create div overlays over radio buttons to create a compact, interactive but simple color selector plug-in for jQuery. Feel free to check it out if it would be helpful :)

    http://blarnee.com/wp/jquery-colour-selector-plug-in-with-support-for-graceful-degradation/

  3. chris

    nice work. doesn’t grab the colors out of images included on the page. (this may not be possible with cross-browser javascript; just an observation.)

  4. Would love to see a version of this that converts the rgb results to hex.

  5. bonox

    Nice work, is it possible generate pallete from another web site?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!