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 for allowing visitors setting 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 at 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

The markup for creating the colorpicker:

 

For setting up this Bootstrap / jQuery based color picker, you need to include 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.

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

See online demo and code

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

See online demo and code

The markup and <script>:

 

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

See online demo and code

The markup used for this example:

 

In the script section:

 

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, see demonstration online:

Bootstrap color picker horizontal

See online demo and code

The script:

 

Using alias or color names demo

You may also use the alias of the colors for allowing users selecting 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

See online demo and code

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

See online demo and code

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

 

The script part:

 

Get the complete code in the demo page.