jQuery Color Picker – Predefined Colors

This tutorial is to see about how to do simple color picker using jQuery. In previous tutorial we have seen date picker by using jQuery UI Library. There are various jQuery plugins providing color picker feature. This tutorial gives a simple example code as a guideline to start writing your own jQuery color picker plugin.

In this example we are using CSS selectors to show color palette. On clicking each color in the palette we store the selected color into a pointer to be applied to the target DIV. We are using jQuery CSS function to pick and apply colors to the target DIV.

View Demo


HTML Code for Color Palette

This is the HTML code for showing color palette to pick colors. It shows four colors with separate DIV tags.

<div class="circular-div" id="aquamarine" onClick="pickColor(this.id);"></div>
<div class="circular-div"  id="bisque" onClick="pickColor(this.id);"></div>
<div class="circular-div"  id="yellow" onClick="pickColor(this.id);"></div>
<div class="circular-div"  id="aqua" onClick="pickColor(this.id);"></div>		
<div id="target" onClick="applyColor();">Click to Apply Color</div>
<div id="pointer"></div>

And the styles are,

<style type="text/css">
#pointer {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	border:#000 1px solid;
#target{float:left;padding:20px;height:200px;width:250px;border:#F0F0F0 1px solid;}

jQuery Color Picker Script

This script contains very few lines to implement jQuery color picker. We have a pointer to track color on mouse move. On the click event of the color palette we select the color code and save it to the pointer object. This color code will be applied as the target DIV’s background on its click event.

<script type="text/javascript">
	var demoContent = document.getElementById("demo-content");
	demoContent.addEventListener('mousemove',function(event) {			
	function applyColor(){
	function pickColor(id){

View DemoDownload

This jQuery code tutorial was published on December 8, 2015.

↑ Back to Top