color Shades jQuery Plugin

colorShades is a jQuery plugin developed by me. It generate a html/css component for showing color shades for selected color for html input container.

Following code is needed to show widget.

$(field).colorShades({
   l_items: LIGHTER_SHADES_COUNT,
   r_items: DARKER_SHADES_COUNT,
   step: STEPS,
   base_color: BASE_COLOR,
   onSelect : CALLBACK
});

Exmaple :

$('#fieldId').colorShades({
   l_items: 10,
   r_items: 10,
   step: 3,
   base_color: '#FF0000',
   onSelect : function(color) {
       console.log('Selected Color '  + color);
   }
});

BASE_COLOR is hex color code for color which shades are needed
LIGHTER_SHADES_COUNT is color shades lighter than base color.
DARKER_SHADES_COUNT is color shades darker than base color
STEPS define the how much color change during next palette color. More steps means bigger change.
CALLBACK set the custom functionality on selection of color.

Screen Shot

color-shades-demo
Project Home Page : https://github.com/kuldeep-k/colorShades

Note : Plugin requires following 3rd party libraries.

jQuery
TinyColor

Leave a Reply

Your email address will not be published. Required fields are marked *