M.Hasham M.Hasham - 1 year ago 83
CSS Question

Creating a color pallett

I'm creating a web based GUI editor. While doing so, I need to create the front end of a color picker such as the one in the attached image. I need to know how should I go about creating it. Since i'm new to this kind of development, I can think of the following options..
1. create spans and make them clickable and give them background colors.
2. use some plugin that generates this functionality
3. use an array of buttons, each with a unique color.

I also need to know if there is any online tool or jquery plugin that generates this functionality. Any help would be appreciated

Answer Source

I've written similar things in the past, here's a simple example that illustrates one way you can do this:

<!DOCTYPE html>

<html lang="en">

    <style type="text/css">
        .colorBox           {
            position:       relative;
            float:          left;

            width:          24px;
            height:         24px;

            margin:         6px;
            padding:        0;

            background:     #FFFFFF;
            border:         solid 1px #000000;

        colorPicker         {
            background:     #DCDCDC;
            border:         solid 1px #000000;


    <script src="plugins/js/jquery-1.11.0.js">



    <div id="colorPicker" class="colorPicker">
        <div id="color-red" class="colorBox" style="background: red;">
        <div id="color-green" class="colorBox" style="background: green;">
        <div id="color-blue" class="colorBox" style="background: blue;">

    <div id="targetBox" class="colorBox">

        $(document).ready(function() {
            $(".colorBox").on("click", function() {
                var strID = $(this).attr("id");

                $("#targetBox").css("backgroundColor", $("#" + strID).css("backgroundColor"));



Just listen for a click event on a particular element and return the background colour of the element that is clicked.

Hope this helps.

ETA - not sure about any libraries or plugins you could use, there's bound to be one. But it's not too difficult to build something.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download