Creating Custom Color Palette Using jQuery, HTML5, CSS

Sibeesh Venu
Jan 14, 2020

16.3k
0
1
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

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.

Recommended Free Ebook

Frontend Developer Interview Questions and Answers

Download Now!