Adding Jquery based color picker tool on your web page


Add a jquery color picker plugin in web page which allows to choose wide variety of colors, which you can do so much with. Specially good for the web masters and plugins developers.

Recently one of my client asked for the option of the color shceme option for the control panel of his portal. So, first thought come into my mind was to use the select box but then it would look too old fashioned. Then of course the solution would be to use jQuery Of course. And google gave me an awesome solution.

A simple plugin which can help to embed the colorpicker in any web page. You can download the plugin on its official page here.

However the page also provide a well defined documentation on how to use this plugin, But I am still writing this post to simplyfy the details and give an abstract solution. This tutorial assuems that you have downloaded the plugin and placed the jquery file into js and css file into css directory of the web/application root.

first you need to include the jquery library either from the downloaded file or else directly from google hosted libraries.


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

after this we need to imported the color picker libraries too.


<script src="js/colpick.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/colpick.css" type="text/css"/>

In the demo I have used simple a demo text on which the color picker will set the background color of the span. Before it comes into action it needs to set up. I have given an id to the span on which I am going to set it up. here is the html for the demo


<body>
    <span id="colpick">COLOR</span>
</body>

and css


#colpick{
    font-size:50px;
    padding:20px;
    margin:0 auto;
}

and finally the jQuery setup


$(document).ready(function(){
        $('#colpick').colpick({
        layout:'hex',
        submit:0,
        colorScheme:'dark',
        onChange:function(hsb,hex,rgb,el,bySetColor) {
	    $(el).css('background','#'+hex);
        }
    });
});

As it can be interpretted from the code, I have set up the color picker on the element with the id colpick and here is the description for the options I have set hex so that it will return hex type code. and there will be no submit button and color scheme or color picker will be dark. And finally I have set a call back on onchange event. This will change the background of the span on which I have added the colorpicker.

here is the complete code.


<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script src="js/colpick.js" type="text/javascript"></script>
		<link rel="stylesheet" href="css/colpick.css" type="text/css"/>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#colpick').colpick({
					layout:'hex',
					submit:0,
					colorScheme:'dark',
					onChange:function(hsb,hex,rgb,el,bySetColor) {
						$(el).css('background','#'+hex);
						// Fill the text box just if the color was set using the picker, and not the colpickSetColor function.
						if(!bySetColor) $(el).val(hex);
					}
				});
			});
		</script>
		<style>
			#colpick{
				font-size:50px;
				padding:20px;
				margin:0 auto;
			}
			body{
				text-align:center;
			}
		</style>
	</head>
	<body>
		<span id="colpick">COLOR</span>
	</body>
</html>

you can see the Demo Here.

Reference:

The reference has been taken from the root site of color picker the name of the plugin is Colpick you can find it here.