/colorShades

Plugin create a widget having the shades of single color.

Primary LanguageJavaScriptApache License 2.0Apache-2.0

colorShades v0.2

Plugin create a widget having the shades of single color.

Following code is needed to show widget.

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

Exmaple  : 

$('#fieldId').colorShades({
    l_items: 2,
    r_items: 3,
    step: 2,
    base_color: '#345a01',
    onSelect : function() {
        Call your functionality
    }
});
  • 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 functionaity on selection of color.

Also checkout demo.html file to see example.

Note : Plugin requires following libraries.

jQuery and tinycolor library.