jquery.swatches

This is a jQuery plugin that turns a single div into a sweet color swatch (aka, color pallette).

Usage

Simply place a similar div element where ever you want a swatch to appear:

<div class="swatch" data-name="Buried at the Beach" data-colors="#886655,#DD9977,#EECCAA,#EEEEEE,#CC99CC"></div>

Then, after including jquery.swatches.js, call the swatchify() function on the div:

$('.swatch').swatchify();

And when you load your page, you'll have this lovely thing staring at you (the right is what it looks like when you hover over the swatch):

Check out the examples section to see the animation too.

Customizing

The div can have any class you want, however the stylesheet supplied is only configured for the .swatch class. Using different classes would allow you to render groups of swatches at individual times by calling swatchify() on a different selector.

Two strings of data need to be provided by the div: data-name and data-colors. The name must be a string representing the name of the swatch. The data string is a comma-seperate list of hex color codes. The list can be as long as you want, each color code will be used to create a portion of the swatch.

You can also provide a .swatch element with an javascript array of colors in the data-colors attribute. For example:

// assume <div id="test-swatch" class="swatch" data-name="Test"></div>
var arr = ['#F35C9F','#F3F3F3'];
var test = $('#test-swatch');
test.data('colors', arr);
$('.swatch').swatchify(); 

Examples

For more examples, check out the examples website

Contributing

I'm open to any kind of contribution. If you don't have time to submit a pull request, open an issue for a new feature or enhancement and I'll get to it when I have time (or someone else will).

License

Swatches is released under the MIT license, which is included in the plugin itself.