A Bootstrap / jQuery color picker with 7 demos

The Bootstrap color picker

The color picker is a component that you may require for the front-end interface for the end users. The purpose can be selecting a color of theme, backgrounds, or other sections of the website. However, color pickers can generally be used in the admin interface to allow visitors to set the customized theme as per liking.

There may be many other uses of color pickers depending on the scenarios and nature of visitors of the website.

In this tutorial, I am going to show you a jQuery and Bootstrap based color picker plug-in that you may easily integrate into your website. The plug-in is available on the GitHub website and is developed by mjoinic. You may download the color picker plug-in from the given link.

A demo of Bootstrap colorpicker

In this demo, a simple color picker becomes visible as the input field is clicked. The input field also shows the color HEX value. As textbox is clicked, a small palette becomes visible where you may choose the color. Wherever you click inside that color palette, the value of that color is displayed in the textbox.

Test yourself by going to the demo page:

Bootstrap color picker

See online demo and code

For setting up this Bootstrap / jQuery based color picker, you need to include the following files:

In the <head> section, include the Bootstrap and bootstrap-colorpicker CSS files.

 <link href=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” rel=”stylesheet”>

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

You also need to include the latest jQuery and Bootstrap’s JS files along with color picker plug-in file:

 <script src=”//code.jquery.com/jquery-2.2.2.min.js”></script>

<script src=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>

<script src=”js/bootstrap-colorpicker/bootstrap-colorpicker.js”></script>

In the <body> section, write the markup of the input field and initiate the plug-in by using the jQuery code.

The markup for creating the color picker:

<div class="example-content well">

<div class="example-content-widget">

<input id="simple-color-picker" type="text" class="form-control" value="#8f3596"/>



<script>

$(function () {

$('#simple-color-picker').colorpicker();

});

</script>

</div>

</div>

See the complete code in the demo page.

Also note, if you place the plug-in CSS file (bootstrap-colorpicker.css ) at your desired location other than default or what I used in the demo, take care of the image paths inside the CSS file. The plug-in package also includes an “img” folder that contains a few small images. Its path is set in the CSS file, for example:

background-image: url(“../../img/bootstrap-colorpicker/saturation.png”);

Its occurrence is six times in the CSS file, so set the path of images according to the location where you have placed images or img folder, otherwise, color palette would not display correctly.

A demo of color picker as a component

You may display color picker as a component as well. An icon is displayed ahead of the textbox. Upon clicking the icon, it will display color picker. See the demo online:

Bootstrap color picker component

Code:

<!DOCTYPE html>
<html>
<head>

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-colorpicker/bootstrap-colorpicker.css" rel="stylesheet">


    <script src="//code.jquery.com/jquery-2.2.2.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="js/bootstrap-colorpicker/bootstrap-colorpicker.js"></script>


</head>

<body>
<div class="container">

<div class="row">
    <div class="col-md-5">
<div class="example">
    <div class="example-title">A demo of color picker as a component</div>
    
    <div class="example-content well">
        <div class="example-content-widget">
      <div id="color-picker-component" class="input-group colorpicker-component">
          <input type="text" value="#38a677" class="form-control"/>
          <span class="input-group-addon"><i></i></span>
      </div>
      <script>
          $(function () {
              $('#color-picker-component').colorpicker();
          });
      </script>
        </div>

   </div>
</div>

  </div>
</div>
</div>

</body>
</html>

A demo of showing RGB code

In above two example, the HEX codes are displayed while using the color picker plug-in. In this example, RGB (Red, Green, and Blue) codes are shown in the textbox as you select a color from the palette.

Bootstrap color picker RGB

The markup and <script>:

<div class="example-content-widget">

<div id="color-picker-rgb" class="input-group colorpicker-component">

<input type="text" value="#05FF44" class="form-control"/>

<span class="input-group-addon"><i></i></span>

</div>

<script>

$(function () {

$('#color-picker-rgb').colorpicker({

color: '#05FF44',

format: 'rgba'

});

});

</script>

</div>

In the script section, notice the options used i.e. it takes the value of color and the format is rgba. So, the text field is showing the RGB value of the selected color.

A demo of working with events of date picker

You may perform certain actions as an event occurs in the date picker. For example, as the color is changed, you can apply the selected color to a specified element.

See the following example where the background color of a div just below the button is changed as you pick a color from the palette.

Bootstrap color picker background

The markup used for this example:

<div class="example-content well">

<div class="example-content-widget">

<a href="#" class="btn btn-default" id="color-picker-background">Change background color of div</a>

</div>

</div>



<div id="chgcolor" style="background-color: #eee;heihgt:50px;width:300px;border:solid 1px">

The color will change here

</div>

In the script section:

<script>

$(function () {

$('#color-picker-background').colorpicker().on('changeColor', function (e) {

$('#chgcolor')[0].style.backgroundColor = e.color.toHex();

});

});

</script>

So, at the changeColor event, the selected color is applied to the specified div element.

Similarly, you may apply colors to body’s background, table cell or other section of the web page. The plug-in also supports other events like create, showPicker, hidePicker, disable, enable and destroy. As these events occur, you may perform useful actions there.

A demo of displaying palette horizontally

By using the horizontal option as true, you may show the palette horizontally. If you noticed in above example, the palette is vertical.

This is done by using the horizontal option in the <script> part:

Bootstrap color picker horizontal

The script:

$('#color-picker-horizontal').colorpicker({

color: "#a1713a",

horizontal: true

});

Using alias or color names demo

You may also use the alias of the colors to allow users to select a color. For example, using the Bootstrap standard colors like info for light blue, primary for dark blue, success for green etc. That way, the small color boxes will be visible to the users as they open the palette. with the alias shown in the text field.

Bootstrap color picker alias

Markup and JS:

<body>
<div class="container">

<div class="row">
    <div class="col-md-5">
<div class="example">
    <div class="example-title">Aliased color palette</div>
    
    <div class="example-content well">
        <div class="example-content-widget">
      <input type="text" data-format="hex" class="form-control" id="color-picker-alias" value="blue"/>
      <script>
          $(function () {
              $('#color-picker-alias').colorpicker({
                  colorSelectors: {
                      'grey': '#777777',
                      'blue': '#337ab7',
                      'success': '#5cb85c',
                      'info': '#5bc0de',
                      'warning': '#f0ad4e',
                      'red': '#d9534f'
                  }
              });
          });
      </script>
        </div>

   </div>
</div>
</body>

A demo of specifying the size of palette

In all above examples, the default size of the palette is used. You may also specify the size by using the customClass option. In that option, you may set the custom class that is placed in the <style> section or an external CSS file. Just specify the file name that contains the width and height properties for the palette.

Bootstrap color picker size

The following CSS class is created which is assigned in the jQuery code section:

<style>

.custom-size .colorpicker-saturation {

width: 250px;

height: 250px;

}



.custom-size .colorpicker-hue,

.custom-size .colorpicker-alpha {

width: 40px;

height: 250px;

}



.custom-size .colorpicker-color,

.custom-size .colorpicker-color div {

height: 40px;

}

</style>

The script part:

$('#color-picker-size').colorpicker({

customClass: 'custom-size',

sliders: {

saturation: {

maxLeft: 250,

maxTop: 250

},

hue: {

maxTop: 250

},

alpha: {

maxTop: 250

}

}

});

Get the complete code on the demo page.

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! 🌍⌨️