Get new jQuery plugins just once a week



FavoriteLoadingAdd to favorites

May 19, 2013

Swatches | jQuery plugin to display a sweet color swatch

Swatches is a jQuery plugin that turns a one-line div into a sweet color swatch that is color pallette.
You can easily customize the plugin.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.

Example Code


Created by Max Mackie



jquery swatches plugin

Color pallete


Related posts:

jquery swatches plugin

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever