Animated Color Palette Plugin For jQuery - Color Swatches

File Size: 49.1KB
Views Total: 8368
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Animated Color Palette Plugin For jQuery - Color Swatches

Color Swatches is a full free and simple jQuery plugin for generating a Color Palette from a group of colors within a DIV element. The Color Palette uses data-colors attribute to grab the hex color codes and displays the code for each color when mouse hovers over it.

Related plugins:

Basic Usage:

1. Include jQuery library and jQuery Color Swatches on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="jquery.swatches.js"></script> 

2. Include required CSS file in the header

<link href="css/swatches.css" rel="stylesheet" type="text/css">

3. Create a container for your Color Palette

<div class="swatch" data-name="Barcelona" data-colors="#27282D,#474D4B,#F54296,#E0F635,#FDFFF7"></div>

4. Call the plugin

<script> 
$('.swatch').swatchify(); 
</script>

This awesome jQuery plugin is developed by maxmackie. For more Advanced Usages, please check the demo page or visit the official website.