Animated Color Palette Plugin For jQuery - Color Swatches
File Size: | 49.1KB |
---|---|
Views Total: | 8386 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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:
- jQuery Plugin For Simple Color Palette Widget - palette
- Image Color Palette Generating Plugin - Color Thief
- jQuery Plugin For Getting Color Palette From An Image - Chameleon.js
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.