Home » css » color Shades jQuery Plugin

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s