This is a jQuery plugin that turns a single
div into a sweet color swatch (aka, color pallette).
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
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.
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
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
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();
For more examples, check out the examples website
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).
Swatches is released under the MIT license, which is included in the plugin itself.