jQuery Plugin To Generate A Color Palette - LumiColor

LumiColor is a jQuery plugin for generating a simple color palette that gives you a range of color shades to choose from.

How to use it:

1. Download and include the jQuery LumiColor plugin after jQuery library.

<script src="jquery-1.11.3.min.js"></script>
<script src="lumicolor.min.js"></script>

2. Create a set of DIV element for the color palette.

<div class="element" id="1"></div>
<div class="element" id="2"></div>
<div class="element" id="3"></div>
<div class="element" id="4"></div>
<div class="element" id="5"></div>
<div class="element" id="6"></div>
<div class="element" id="7"></div>
<div class="element" id="8"></div>
<div class="element" id="9"></div>
<div class="element" id="10"></div>
<div class="element" id="11"></div>
<div class="element" id="12"></div>

3. Initialize the plugin and specify the primary color for the color palette.

$(".element").lumiColor({
  color: "6F4CE0"
});

4. More configuration options.

$(".element").lumiColor({
  /**
  * Sets the system color
  * Choose between hex or RGB
  * @var string
  */
  type: "hex",
  
  /**
  * Sets the luminosity of the last color
  * A negative value will darken the color
  * @var float
  */
  luminosity: 0,
  
  /**
  * Sets the color that is lightened or darkened
  * @var string
  */
  color: "",
  
  /**
  * Choose the css style that will be changed
  * @var string
  */
  css: 'background-color',
  
  /**
  * Reverse the appliance of the colors in the elements
  * @var bool
  */
  reverse: false
  
});

Change log:

2015-12-09

• RGB type added.

---

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