jQuery Colorpicker Plugin For Bootstrap

jQuery Colorpicker Plugin For Bootstrap
File Size: 869 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Colorpicker Plugin For Bootstrap allows you to add color picker to field or to any other element with multiple formats: hex, rgb, rgba, hsl, hsla.

You might also like:


# Yarn
$ yarn add bootstrap-colorpicker

$ npm install bootstrap-colorpicker --save

How to use it:

1. Include jQuery script and bootstrap-colorpicker.js

<script src="js/jquery.js"></script>
<script src="js/bootstrap-colorpicker.js"></script>

2. Include CSS before </head>.

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/colorpicker.css" rel="stylesheet">

3. Call the function on target element.


4. Default plugin options.

// horizontal mode layout ?
horizontal: false, 

// forces to show the colorpicker as an inline element
inline: false, 

// forces a color
color: false, 

// forces a format
format: false, 

// children input selector
input: 'input', 

// container selector
container: false, 

// children component selector
component: '.add-on, .input-group-addon', 

// Vertical sliders configuration
sliders: {
  saturation: {
    maxLeft: 100,
    maxTop: 100,
    callLeft: 'setSaturation',
    callTop: 'setBrightness'
  hue: {
    maxLeft: 0,
    maxTop: 100,
    callLeft: false,
    callTop: 'setHue'
  alpha: {
    maxLeft: 0,
    maxTop: 100,
    callLeft: false,
    callTop: 'setAlpha'

// Horizontal sliders configuration
slidersHorz: {
  saturation: {
    maxLeft: 100,
    maxTop: 100,
    callLeft: 'setSaturation',
    callTop: 'setBrightness'
  hue: {
    maxLeft: 100,
    maxTop: 0,
    callLeft: 'setHue',
    callTop: false
  alpha: {
    maxLeft: 100,
    maxTop: 0,
    callLeft: 'setAlpha',
    callTop: false

// Customizes the default colorpicker HTML template.
template: '<div class="colorpicker dropdown-menu">' +
  '<div class="colorpicker-saturation"><i><b></b></i></div>' +
  '<div class="colorpicker-hue"><i></i></div>' +
  '<div class="colorpicker-alpha"><i></i></div>' +
  '<div class="colorpicker-color"><div /></div>' +
  '<div class="colorpicker-selectors"></div>' +

// By default, the colorpicker is aligned to the right of the input. 
// If you need to switch it to the left, set align to 'left'.
align: 'right',

//  Adds this class to the colorpicker widget.
customClass: null,
colorSelectors: null
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/colorpicker.css" rel="stylesheet">

Change Logs:

v3.0.0 (2017-11-19)

  • Removes support for: Bower, less styles (in favor of sass), Grunt, JSHint, Jasmine
  • Adds support for: ES6 modules, webpack, babel, Gulp, eslint, AVA
  • Changes the license to MIT, since the changes are considerably different from the original project code from 2012.
  • Color class has been now simplified and is using tinycolor internally
  • Minimum jQuery version is 2.1
  • Removed options: fallbackColorFormat
  • Renamed options: hexNumberSignPrefix -> useHashPrefix, colorSelectors -> colorPalette
  • New options: useAlpha, enableHex8
  • New classes: $.colorpicker.Color, $.colorpicker.TinyColor
  • $.colorpicker.prototype.update* methods no longer accept or return values
  • $.colorpicker.prototype.color object is now an alias of $.colorpicker.prototype.element.data('color') for both get and set
  • Alpha channel is now supported in hexadecimal colors (hex8)
  • Supported formats are now: "rgb", "prgb", "hex"/"hex6", "hex3", "hex8", "hsl", "hsv"/"hsb", "name".
  • More tests for the Color class
  • Better consistency with the color and format usage inside the widget
  • dist folder is not longer commited in the repository, but still distributed in the npm package
  • Images are removed since they were not used (they are encoded in the css as base64)
  • Fix: adds checks for color object existence
  • Fix: height of color bar
  • Fix: algolia search new key
  • refactor: events revamp, extensions support and generalized styles

v2.5.2 (2017-09-25)

  • JS Update

v2.5.1 (2017-02-06)

  • Fix colors not being displayed hexNumberSignPrefix=false

v2.4.0 (2016-12-29)

  • Bootstrap is no longer a bower dependency
  • Fixed some demos and updated docs with new options
  • Fixed color selectos display problem
  • Added some useful rules for visibility classes
  • Is now possible to initialize the plugin using another parent than main window
  • Fixed cancellation of input change event and colorpicker child element events
  • New options for setting the fallback color and format (before it was always black and hex)
  • Fixed click/tap on mobile devices
  • Other UI fixes and improvements (like saturation disappearing)


  • v2.3.6


  • preventing hidePicker to be fired twice


  • v2.3.0

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