Creating Custom Color Palette Using jQuery, HTML5, CSS

Introduction

Today I came across a requirement to integrate a color palette into my application. When I searched for that, unfortunately, I could not find any solution. So I thought of creating a custom color palette tool. This article explains how to do this. I will use this tool in my high chart application. I hope you will like it. Please see the following image if you do not know what a color palette is.

Please see this article in my blog

Background

I am working on a dashboard application, where you can find many charts, maps and grids and so on. If you work with a chart, you will definitely know the word series. Previously we were applying the color for every series separately, in other words, the user must select the color for each series or it will take some default color. Your user may think this process is too much work. Here I am providing a custom color palette control.

Why

Instead of applying colors separately, we can just select a palette so that the colors set in the selected palette will be applied automatically as in Excel.

Using the code

I am using jquery-1.9.1.js for the implementation in my application, you can get this file from the attached application.

Once you include the jQuery file, please create an HTML5 page as shown below.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
</body>
</html>

Include the jQuery reference as in the following:

<script src="jquery-1.9.1.js"></script>

Now to replace our body tag as shown below:

<body>
<header style="text-align:center"> Custom Color Palette - SibeeshPassion</header>
Change Series Color:
<label id="changecolor" title="Change Color">Change Color</label>
<ul class="containerul">
<li>
Color Palette I :
<input type="checkbox" class="boxcheckbox" />
</li>
<li>
Color Palette II :
<input type="checkbox" class="boxcheckbox" />
</li>
<li>
Color Palette III :
<input type="checkbox" class="boxcheckbox" />
</li>
<li>
Color Palette IV :
<input type="checkbox" class="boxcheckbox" />
</li>
</ul>
Here colors will be changed whenever you select the palette :)
<div id="checker" class="outputcontainer">
</div>
</body>

Here what I am doing is, I am creating a ul element and inside that I am creating some p elements with span. Please see that in the preceding HTML element section.

Once you are done with the elements, what would be the next step? Yeah, we need to style them. Please include the following styles.

<style>
.simplebox {
cursor: pointer;
border: 1px solid #f0f8ff;
float: left;
margin: 1px;
width: 20px;
height: 20px;
}
.simpleboxdynamic {
cursor: pointer;
border: 1px solid #f0f8ff;
float: left;
margin: 1px;
width: 99.3%;
height: 27px;
padding: 5px;
border-radius: 3px;
text-align: center;
}
.boxspecialone {
border: 1px solid #ff00ff;
}
.boxcontainer {
border: 1px solid #ccc;
width: 165px;
position: relative;
height: 50px;
padding: 2px;
}
.boxcheckbox {
float: right;
margin-top: 6px;
}
.outputcontainer {
border: 1px solid #ccc;
width: 100%;
position: relative;
height: 247px;
margin-top: 5px;
}
.maincontainer {
display: none;
}
.containerul {
position: absolute;
width: 190px;
list-style: none;
margin: 4px;
/*border: 2px solid #29b8e5;*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #ffffff;
overflow-y: auto;
overflow-x: hidden;
display: block;
margin-left: 0px;
z-index: 200;
height: 305px;
display: none;
left: 60px;
}
#changecolor {
cursor: pointer;
}
</style>

Our next step is writing the scripts. Please see that below.

<script>
$(document).ready(function () {
$("#changecolor").click(function () {
$(".containerul").slideToggle(1000);
});
$(".boxcheckbox").click(function () {
$("#checker").html('');
//checked true only for the current
$(".boxcheckbox").prop("checked", false);
$(this).prop("checked", true);
//bind colors start
var colorCount = 0;
var spans = $(this).parent().find('span');
var test = '<div></div>';
$.each(spans, function (key, value) {
var color = $(value).attr('title');
var p = ' Color Key :' + key + '';
$("#checker").append(p);
});
});
});
</script>

In the script, I am calling the checked event of the check boxes inside the p element and whenever a user selects one, I am finding the parent colors and applying that to the output UI.

That is all. Cool, we have done it.

Complete HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Custom Color Palette - SibeeshPassion</title>
<style>
.simplebox {
cursor: pointer;
border: 1px solid #f0f8ff;
float: left;
margin: 1px;
width: 20px;
height: 20px;
}
.simpleboxdynamic {
cursor: pointer;
border: 1px solid #f0f8ff;
float: left;
margin: 1px;
width: 99.3%;
height: 27px;
padding: 5px;
border-radius: 3px;
text-align: center;
}
.boxspecialone {
border: 1px solid #ff00ff;
}
.boxcontainer {
border: 1px solid #ccc;
width: 165px;
position: relative;
height: 50px;
padding: 2px;
}
.boxcheckbox {
float: right;
margin-top: 6px;
}
.outputcontainer {
border: 1px solid #ccc;
width: 100%;
position: relative;
height: 247px;
margin-top: 5px;
}
.maincontainer {
display: none;
}
.containerul {
position: absolute;
width: 190px;
list-style: none;
margin: 4px;
/*border: 2px solid #29b8e5;*/
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #ffffff;
overflow-y: auto;
overflow-x: hidden;
display: block;
margin-left: 0px;
z-index: 200;
height: 305px;
display: none;
left: 60px;
}
#changecolor {
cursor: pointer;
}
</style>
<script src="jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("#changecolor").click(function () {
$(".containerul").slideToggle(1000);
});
$(".boxcheckbox").click(function () {
$("#checker").html('');
//checked true only for the current
$(".boxcheckbox").prop("checked", false);
$(this).prop("checked", true);
//bind colors start
var colorCount = 0;
var spans = $(this).parent().find('span');
var test = '<div></div>';
$.each(spans, function (key, value) {
var color = $(value).attr('title');
var p = ' Color Key :' + key + '';
$("#checker").append(p);
});
});
});
</script>
</head>
<body>
<header style="text-align:center"> Custom Color Palette - SibeeshPassion</header>
Change Series Color:
<label id="changecolor" title="Change Color">Change Color</label>
<ul class="containerul">
<li>
Color Palette I :
<input type="checkbox" class="boxcheckbox" />
</li>
<li>
Color Palette II :
<input type="checkbox" class="boxcheckbox" />
</li>
<li>
Color Palette III :
<input type="checkbox" class="boxcheckbox" />
</li>
<li>
Color Palette IV :
<input type="checkbox" class="boxcheckbox" />
</li>
</ul>
Here colors will be changed whenever you select the palette :)
<div id="checker" class="outputcontainer">
</div>
</body>
</html>

Output

Conclusion

I hope you liked this article. Please provide your valuable suggestions.

7 Comments

Join the conversation! Your thoughts help the community grow.

Jis Jo8y ago
Thanks a lot for this article!
Mohamed Gani Mn11y ago
NIce one
Shaili Dashora11y ago
Nice one..
- Sibeesh Venu11y ago
  Thank you so much.
Sibeesh Venu11y ago
Nitin Tyagi Thank you buddy.
Nitin11y ago
good one
- Sibeesh Venu11y ago
  Thank you buddy.