Choose a color from the color picker using jquery

color

In this post, I would like to give you an example of how to choose a color from the color picker. We can simply choose a color from the color picker.you can see a simple example of choose color from the color picker.

So, let’s see the below example and follow this tutorial step by step.


Download this Tutorial from GitHub:
https://github.com/manishaprajapati7092/support-feedback-system


Step 1: Add script and javascript or CSS file.

In step 1, We have also added the <script> before close body tag and we have also added some CSS and javascript files in <head> section.
Paste the following code in your HTML file.

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Color Picker Example</title>
    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link href="color-picker/color-picker.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h2 style="margin-top: 100px;">Color Picker Example</h2><hr>
                <h6>Choose Your favourite color: 
                    <button class="example btn btn-primary ml-4">Click here</button>
                </h6>
            </div>
        </div>
        
        
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="color-picker/color-picker.min.js"></script>
    <script src="color-picker/color-picker.en.min.js"></script>
    <script>
        $('.example').bcp();
        $('.example').on('pcb.refresh', function(e) {
            let color = $(this).bcp('color');
            if (color.value) {
                $(this).css({
                    backgroundColor: color.value,
                    borderColor: color.value,
                    color: color.dark ? '#fff' : '#000'
                });
            }
        });
    </script>
</body>

</html>

Step 2: Create a color-picker.css file

In step 2, We have created a new file whose name is a color-picker.css file. This file is used for design.
After created color-picker.css file paste the code in this file.

.bcp-popover {
    max-width: none;
}

.bcp-popover .bcp-row {
    display: -webkit-box;
    display: flex;
}

.bcp-popover .bcp-color {
    -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #ddd;
    margin: 5px;
    cursor: pointer;
}

.bcp-popover .bcp-color.bcp-light {
    color: #000;
}

.bcp-popover .bcp-color.bcp-dark {
    color: #fff;
}

.bcp-popover .bcp-color:hover,
.bcp-popover .bcp-color.bcp-active {
    width: 30px;
    height: 30px;
    margin: 2px;
}

.bcp-popover .bcp-color.bcp-active {
    pointer-events: none;
}

.bcp-popover .bcp-color.bcp-active:after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-size: 28px;
}

Step 3: Create the color-picker.en.min.js file

In step 3, create a new file color-picker.en.min.js file and paste the following code.

In the color-picker.en.min.js file, we are creating the colors variable and adds color code in the color variable. we have added multiple color codes in this variable which are we have to use in the color picker.

(function($) {
    $.bcpSetup({
        colors: [{
                "#000000": "Black",
                "#434343": "Dark grey 4",
                "#666666": "Dark grey 3",
                "#999999": "Dark grey 2",
                "#b7b7b7": "Dark grey 1",
                "#cccccc": "grey",
                "#d9d9d9": "Light grey 1",
                "#efefef": "Light grey 2",
                "#f3f3f3": "Light grey 3",
                "#ffffff": "White"
            },
            {
                "#980000": "Red fruits",
                "#ff0000": "Red",
                "#ff9900": "Orange",
                "#ffff00": "Yellow",
                "#00ff00": "Green",
                "#00ffff": "Cyan",
                "#4a86e8": "Blueberry",
                "#0000ff": "Blue",
                "#9900ff": "Purple",
                "#ff00ff": "Magenta"
            },
            {
                "#e6b8af": "Light red fruits 3",
                "#f4cccc": "Light red 3",
                "#fce5cd": "Light orange 3",
                "#fff2cc": "Light yellow 3",
                "#d9ead3": "Light green 3",
                "#d0e0e3": "Light cyan 3",
                "#c9daf8": "Light blueberry 3",
                "#cfe2f3": "Light blue 3",
                "#d9d2e9": "Light purple 3",
                "#ead1dc": "Light magenta 3"
            },
            {
                "#dd7e6b": "Light red fruits 2",
                "#ea9999": "Light red 2",
                "#f9cb9c": "Light orange 2",
                "#ffe599": "Light yellow 2",
                "#b6d7a8": "Light green 2",
                "#a2c4c9": "Light cyan 2",
                "#a4c2f4": "Light blueberry 2",
                "#9fc5e8": "Light blue 2",
                "#b4a7d6": "Light purple 2",
                "#d5a6bd": "Light magenta 2"
            },
            {
                "#cc4125": "Light red fruits 1",
                "#e06666": "Light red 1",
                "#f6b26b": "Light orange 1",
                "#ffd966": "Light yellow 1",
                "#93c47d": "Light green 1",
                "#76a5af": "Light cyan 1",
                "#6d9eeb": "Light blueberry 1",
                "#6fa8dc": "Light blue 1",
                "#8e7cc3": "Light purple 1",
                "#c27ba0": "Light magenta 1"
            },
            {
                "#a61c00": "Dark red fruits 1",
                "#cc0000": "Dark red 1",
                "#e69138": "Dark orange 1",
                "#f1c232": "Dark yellow 1",
                "#6aa84f": "Dark green 1",
                "#45818e": "Dark cyan 1",
                "#3c78d8": "Dark blueberry 1",
                "#3d85c6": "Dark blue 1",
                "#674ea7": "Dark purple 1",
                "#a64d79": "Dark magenta 1"
            },
            {
                "#85200c": "Dark red fruits 2",
                "#990000": "Dark red 2",
                "#b45f06": "Dark orange 2",
                "#bf9000": "Dark yellow 2",
                "#38761d": "Dark green 2",
                "#134f5c": "Dark cyan 2",
                "#1155cc": "Dark blueberry 2",
                "#0b5394": "Dark blue 2",
                "#351c75": "Dark purple 2",
                "#741b47": "Dark magenta 2"
            },
            {
                "#5b0f00": "Dark red fruits 3",
                "#660000": "Dark red 3",
                "#783f04": "Dark orange 3",
                "#7f6000": "Dark yellow 3",
                "#274e13": "Dark green 3",
                "#0c343d": "Dark cyan 3",
                "#1c4587": "Dark blueberry 3",
                "#073763": "Dark blue 3",
                "#20124d": "Dark purple 3",
                "#4c1130": "Dark magenta 3"
            }
        ]
    });
}(jQuery));

Step 4: Create the color-picker.min.js file

In the color-picker.min.js file, we are creating color picker popup. Paste the following code in this file.

! function(t, r) {
    "function" == typeof define && define.amd ? define(["jquery"], r) : "object" == typeof module && module.exports ? r(require("jquery")) : r(jQuery)
}(0, (function(t) {
    ! function(t) {
        var r = t => t ? t.replace(/^#([a-f\d])([a-f\d])([a-f\d])$/i, (t, r, o, e) => "#" + r + r + o + o + e + e) : null,
            o = t => {
                if (!t) return null;
                var o = /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r(t));
                return o ? (o = Math.round((299 * parseInt(o[1], 16) + 587 * parseInt(o[2], 16) + 114 * parseInt(o[3], 16)) / 1e3)) <= 125 : null
            },
            e = {
                colors: [],
                template: '<div class="popover bcp-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
                body: t => {
                    return `<div class="bcp-content">${t.map(t=>{let r="";for(var e in t){r+=` < div class = "bcp-color ${o(e)?"
                    bcp - dark ":"
                    bcp - light "}"
                    style = "background-color: ${e};"
                    data - color = "${e}"
                    title = "${t[e]}" > < /div>`}return`<div class="bcp-row">${r}</div > `}).join("")}</div>`
                }
            };
        t.bcpSetup = r => {
            e = t.extend(e, r)
        }, t.fn.bcp = function(a, i) {
            if ("color" === a) return i ? (t(this).attr("data-color", r(i)), void t(this).trigger("pcb.selected").trigger("pcb.refresh")) : {
                value: t(this).first().attr("data-color") || null,
                dark: o(t(this).first().attr("data-color") || null)
            };
            t(this).removeAttr("data-html").removeAttr("data-sanitize").removeAttr("data-trigger").removeAttr("data-content");
            var c = t.extend({}, e, a);
            return c.colors.length ? (c = t.extend(c, {
                html: !0,
                sanitize: !1,
                trigger: "manual",
                content: function() {
                    return c.body(c.colors)
                }
            }), t(this).popover(c).on("shown.bs.popover", (function() {
                var r = t(this).attr("data-color");
                r && "" !== r && t(`[data-color="${r}"]`, t(t(this).data("bs.popover").tip)).addClass("bcp-active")
            })), t(this).click((function() {
                t(this).popover("toggle")
            })), t(this).each((function() {
                t(this).attr("data-color") && "" !== t(this).attr("data-color") || t(this).attr("data-color", r(c.color))
            })).trigger("pcb.refresh"), this) : void 0
        }, t(document).on("click", (function(r) {
            var o = t(r.target);
            if (o.is(".bcp-popover .bcp-color *") && (o = o.parents(".bcp-color")), o.is(".bcp-popover .bcp-color:not(.bcp-active)")) {
                let r = o.parents(".bcp-popover");
                return t(".bcp-active", r).removeClass("bcp-active"), void t(`[aria-describedby="${r.attr("id")}"]`).popover("hide").bcp("color", o.attr("data-color"))
            }
            t(".bcp-popover.show").each((function() {
                let r = t(this).attr("id");
                o.is(`[aria-describedby="${r}"], [aria-describedby="${r}"] *, #${r}, #${r} *`) || t(`[aria-describedby="${r}"]`).popover("hide")
            }))
        }))
    }(jQuery)
}));

Output:

About Dhaval Shah

My name is Dhaval Shah. I'm a PHP developer, entrepreneur and CEO of DAG inventions PVT ltd. I live in India and I love to write tutorials and tips that can help other developers. I am a big fan of PHP, Java-script, JQuery, Laravel, WordPress and Bootstrap.
Follow me on Github / Linkedin

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!