🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

The colorPalettePicker.js jQuery plugin makes uses of Bootstrap 4 dropdown component to create a simple color picker on your web app.

Bootstrap color-picker bootstrap-4

Documentation

color-palette-picker for bootstrap 3/4

Simple color palette picker for bootstrap

Usage:

<div id="colorpalettediv"></div>
$('#colorpalettediv').colorPalettePicker();

Options

Name Html tag Type Default Description
bootstrap int 4 Selected version of Bootstrap (can choose between 3 or 4)
lines data-lines int 1 Number of rows to be divided palette array
palette data-colors array ['aqua', 'azure', 'beige', 'brown', 'cyan', 'darkcyan', 'darkgrey', 'darkkhaki', 'darkorange', 'darkorchid', 'darksalmon', 'fuchsia', 'gold', 'green', 'khaki', 'lightblue', 'lightcyan', 'lightgreen', 'lightgrey', 'lightpink', 'lightyellow', 'lime', 'magenta', 'olive', 'orange', 'pink', 'silver', 'yellow'] List of colors to choose from
buttonText string Choose color
buttonClass string btn btn-secondary dropdown-toggle
dropdownTitle string Available colors

Methods

onSelected 

Return chosen color

$('#colorpalettediv').colorPalettePicker({   onSelected: function(color){ 		alert(color); 	} });

You May Also Like