O'Reilly

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!

Track.js Error Reporting

Recent Features

  • CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

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!

Recently on David Walsh Blog

  • Loading Static Templates for Intern Testing

    I use Intern by SitePen for all of my JavaScript functional testing.  Intern has loads of features other functional test frameworks don't and it's completely Promise-based -- something I got very used to when I used the Dojo Toolkit every day. Async test creation can...

  • Convert Video to mp3

    Let's all be honest for a moment:  we've all ... not paid for ... music.  Whether it was via a file sharing app like Kazaa or Napster, or it was downloading and seeding on bittorrent, or maybe even downloading a music video and ripping its audio,...

  • Sort git Branches by Date

    I'll be first person to admit I don't do as much git repository maintenance as I should.  I rarely delete branches which have been merged, so a git branch execution shows me a mile-long list of branches that likely aren't relevant.  The best way to find branches I've recently...

  • Best Tools and Resources for Web Professionals in 2015

    Looking for the right resources to help you satisfy the needs of your clients? On the lookout for the best tools to help you increase your revenue? Searching for the right software to help you improve your business? Well, then you’ve come to the right place....

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...