Edit in JSFiddle

/*

(c) https://github.com/Simonwep/pickr

*/

! function(t, e) {
    "object" == typeof exports && "object" == typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define([], e) : "object" == typeof exports ? exports.Pickr = e() : t.Pickr = e()
}(window, function() {
    return function(t) {
        var e = {};

        function o(r) {
            if (e[r]) return e[r].exports;
            var n = e[r] = {
                i: r,
                l: !1,
                exports: {}
            };
            return t[r].call(n.exports, n, n.exports, o), n.l = !0, n.exports
        }
        return o.m = t, o.c = e, o.d = function(t, e, r) {
            o.o(t, e) || Object.defineProperty(t, e, {
                enumerable: !0,
                get: r
            })
        }, o.r = function(t) {
            "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, {
                value: "Module"
            }), Object.defineProperty(t, "__esModule", {
                value: !0
            })
        }, o.t = function(t, e) {
            if (1 & e && (t = o(t)), 8 & e) return t;
            if (4 & e && "object" == typeof t && t && t.__esModule) return t;
            var r = Object.create(null);
            if (o.r(r), Object.defineProperty(r, "default", {
                enumerable: !0,
                value: t
            }), 2 & e && "string" != typeof t) for (var n in t) o.d(r, n, function(e) {
                return t[e]
            }.bind(null, n));
            return r
        }, o.n = function(t) {
            var e = t && t.__esModule ? function() {
                    return t.
                    default
                } : function() {
                    return t
                };
            return o.d(e, "a", e), e
        }, o.o = function(t, e) {
            return Object.prototype.hasOwnProperty.call(t, e)
        }, o.p = "dist/", o(o.s = 8)
    }([function(t, e, o) {
        "use strict";
        Object.defineProperty(e, "__esModule", {
            value: !0
        });
        var r = Object.assign || function(t) {
                for (var e = 1; e < arguments.length; e++) {
                    var o = arguments[e];
                    for (var r in o) Object.prototype.hasOwnProperty.call(o, r) && (t[r] = o[r])
                }
                return t
            };

        function n(t, e, o) {
            var n = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : {}, i = arguments[4] ? "removeEventListener" : "addEventListener";
            HTMLCollection.prototype.isPrototypeOf(t) || NodeList.prototype.isPrototypeOf(t) ? t = Array.from(t) : Array.isArray(t) || (t = [t]), Array.isArray(e) || (e = [e]);
            var a = !0,
                c = !1,
                s = void 0;
            try {
                for (var u, l = t[Symbol.iterator](); !(a = (u = l.next()).done); a = !0) {
                    var p = u.value,
                        h = !0,
                        f = !1,
                        v = void 0;
                    try {
                        for (var d, y = e[Symbol.iterator](); !(h = (d = y.next()).done); h = !0) {
                            var m = d.value;
                            p[i](m, o, r({
                                capture: !1
                            }, n))
                        }
                    } catch (t) {
                        f = !0, v = t
                    } finally {
                        try {
                            !h && y.
                            return &&y.
                            return ()
                        } finally {
                            if (f) throw v
                        }
                    }
                }
            } catch (t) {
                c = !0, s = t
            } finally {
                try {
                    !a && l.
                    return &&l.
                    return ()
                } finally {
                    if (c) throw s
                }
            }
        }
        e.on = function(t, e, o) {
            var r = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : {};
            n(t, e, o, r)
        }, e.off = function(t, e, o) {
            var r = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : {};
            n(t, e, o, r, !0)
        }, e.createElementFromString = function(t) {
            var e = document.createElement("template");
            return e.innerHTML = t.trim(), e.content.firstChild
        }, e.eventPath = function(t) {
            var e = t.path || t.composedPath && t.composedPath();
            if (e) return e;
            var o = t.target.parentElement;
            for (e = [t.target]; o; o = o.parentElement) e.push(o);
            return e.push(document, window), e
        }, e.debounce = function(t, e, o) {
            var r = arguments,
                n = void 0;
            return function() {
                var i = !n;
                clearTimeout(n), n = setTimeout(function() {
                    n = null, e.apply(t, arguments)
                }, o), i && e.apply(t, r)
            }
        }
    }, function(t, e, o) {
        "use strict";
        Object.defineProperty(e, "__esModule", {
            value: !0
        });
        var r = function() {
            return function(t, e) {
                if (Array.isArray(t)) return t;
                if (Symbol.iterator in Object(t)) return function(t, e) {
                    var o = [],
                        r = !0,
                        n = !1,
                        i = void 0;
                    try {
                        for (var a, c = t[Symbol.iterator](); !(r = (a = c.next()).done) && (o.push(a.value), !e || o.length !== e); r = !0);
                    } catch (t) {
                        n = !0, i = t
                    } finally {
                        try {
                            !r && c.
                            return &&c.
                            return ()
                        } finally {
                            if (n) throw i
                        }
                    }
                    return o
                }(t, e);
                throw new TypeError("Invalid attempt to destructure non-iterable instance")
            }
        }();

        function n(t) {
            if (Array.isArray(t)) {
                for (var e = 0, o = Array(t.length); e < t.length; e++) o[e] = t[e];
                return o
            }
            return Array.from(t)
        }
        e.hsvToRgb = s, e.hsvToHex = function(t, e, o) {
            return s(t, e, o).map(function(t) {
                return t.toString(16).padStart(2, "0")
            })
        }, e.hsvToCmyk = function(t, e, o) {
            var r = s(t, e, o),
                n = r[0] / 255,
                c = r[1] / 255,
                u = r[2] / 255,
                l = void 0,
                p = void 0,
                h = void 0;
            return l = a(1 - n, 1 - c, 1 - u), p = 1 === l ? 0 : (1 - c - l) / (1 - l), h = 1 === l ? 0 : (1 - u - l) / (1 - l), [i(100 * (1 === l ? 0 : (1 - n - l) / (1 - l))), i(100 * p), i(100 * h), i(100 * l)]
        }, e.hsvToHsl = function(t, e, o) {
            var r = (2 - (e /= 100)) * (o /= 100) / 2;
            0 !== r && (e = 1 === r ? 0 : r < .5 ? e * o / (2 * r) : e * o / (2 - 2 * r));
            return [i(t), i(100 * e), i(100 * r)]
        }, e.parseToHSV = function(t) {
            var e = {
                cmyk: /^cmyk[^\d]+([0-9]+)[^\d]+([0-9]+)[^\d]+([0-9]+)[^\d]+([0-9]+)/i,
                rgba: /^(rgb|rgba)[^\d]+([0-9]+)[^\d]+([0-9]+)[^\d]+([0-9]+)[^\d]*([0-9.]+|)/i,
                hsla: /^(hsl|hsla)[^\d]+([0-9]+)[^\d]+([0-9]+)[^\d]+([0-9]+)[^\d]*([0-9.]+|)/i,
                hsva: /^(hsv|hsva)[^\d]+([0-9]+)[^\d]+([0-9]+)[^\d]+([0-9]+)[^\d]*([0-9.]+|)/i,
                hex: /^(#|)(([0-9A-Fa-f]{6})|([0-9A-Fa-f]{3}))$/i
            }, o = function(t) {
                return t.map(function(t) {
                    return /^(\d+|\d+\.\d+)$/.test(t) ? Number(t) : void 0
                })
            }, c = void 0;
            if (c = e.cmyk.exec(t)) {
                var s = o(c),
                    l = r(s, 5),
                    p = l[1],
                    h = l[2],
                    f = l[3],
                    v = l[4];
                return p > 100 || h > 100 || f > 100 || v > 100 ? null : [].concat(n(function(t, e, o, r) {
                    e /= 100, o /= 100;
                    var c = 1 - a(1, (t /= 100) * (1 - (r /= 100)) + r),
                        s = 1 - a(1, e * (1 - r) + r),
                        l = 1 - a(1, o * (1 - r) + r);
                    return c = i(255 * c), s = i(255 * s), l = i(255 * l), [].concat(n(u(c, s, l)))
                }(p, h, f, v)), [1])
            }
            if (c = e.rgba.exec(t)) {
                var d = o(c),
                    y = r(d, 6),
                    m = y[2],
                    g = y[3],
                    b = y[4],
                    w = y[5],
                    k = void 0 === w ? 1 : w;
                return m > 255 || g > 255 || b > 255 || k < 0 || k > 1 ? null : [].concat(n(u(m, g, b)), [k])
            }
            if (c = e.hex.exec(t)) {
                var S = c,
                    _ = r(S, 3),
                    O = _[2];
                return [].concat(n(function(t) {
                    3 === t.length && (t += t);
                    var e = t.match(/.{2}/g).map(function(t) {
                        return parseInt(t, 16)
                    }),
                        o = r(e, 3),
                        n = o[0],
                        i = o[1],
                        a = o[2];
                    return u(n, i, a)
                }(O)), [1])
            }
            if (c = e.hsla.exec(t)) {
                var C = o(c),
                    P = r(C, 6),
                    A = P[2],
                    x = P[3],
                    j = P[4],
                    H = P[5],
                    M = void 0 === H ? 1 : H;
                return A > 360 || x > 100 || j > 100 || M < 0 || M > 1 ? null : [].concat(n(function(t, e, o) {
                    e /= 100;
                    var r = i(2 * (e *= (o /= 100) < .5 ? o : 1 - o) / (o + e) * 100),
                        n = i(100 * (o + e));
                    return [t, r, n]
                }(A, x, j)), [M])
            }
            if (c = e.hsva.exec(t)) {
                var E = o(c),
                    T = r(E, 6),
                    q = T[2],
                    L = T[3],
                    R = T[4],
                    V = T[5],
                    B = void 0 === V ? 1 : V;
                return q > 360 || L > 100 || R > 100 || B < 0 || B > 1 ? null : [q, L, R, B]
            }
            return null
        };
        var i = Math.round,
            a = Math.min,
            c = Math.max;

        function s(t, e, o) {
            t = t / 360 * 6, e /= 100, o /= 100;
            var r = Math.floor(t),
                n = t - r,
                a = o * (1 - e),
                c = o * (1 - n * e),
                s = o * (1 - (1 - n) * e),
                u = r % 6,
                l = [s, o, o, c, a, a][u],
                p = [a, a, s, o, o, c][u];
            return [i(255 * [o, c, a, a, s, o][u]), i(255 * l), i(255 * p)]
        }
        function u(t, e, o) {
            var r, n = void 0,
                s = void 0,
                u = a(t /= 255, e /= 255, o /= 255),
                l = c(t, e, o),
                p = l - u;
            if (r = l, 0 === p) n = s = 0;
            else {
                s = p / l;
                var h = ((l - t) / 6 + p / 2) / p,
                    f = ((l - e) / 6 + p / 2) / p,
                    v = ((l - o) / 6 + p / 2) / p;
                t === l ? n = v - f : e === l ? n = 1 / 3 + h - v : o === l && (n = 2 / 3 + f - h), n < 0 ? n += 1 : n > 1 && (n -= 1)
            }
            return [i(360 * n), i(100 * s), i(100 * r)]
        }
    }, function(t, e, o) {
        "use strict";
        Object.defineProperty(e, "__esModule", {
            value: !0
        });
        var r = function() {
            function t(t, e) {
                for (var o = 0; o < e.length; o++) {
                    var r = e[o];
                    r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), Object.defineProperty(t, r.key, r)
                }
            }
            return function(e, o, r) {
                return o && t(e.prototype, o), r && t(e, r), e
            }
        }(),
            n = function(t) {
                if (t && t.__esModule) return t;
                var e = {};
                if (null != t) for (var o in t) Object.prototype.hasOwnProperty.call(t, o) && (e[o] = t[o]);
                return e.
                default = t, e
            }(o(0));
        var i = function() {
            function t(e) {
                ! function(t, e) {
                    if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
                }(this, t);
                var o = {
                    onchange: void 0,
                    className: ""
                };
                this.options = Object.assign(o, e), this._ontap = this._ontap.bind(this), n.on(this.options.elements, "click", this._ontap)
            }
            return r(t, [{
                key: "_ontap",
                value: function(t) {
                    var e = this.options;
                    e.elements.forEach(function(t) {
                        return t.classList.remove(e.className)
                    }), t.target.classList.add(e.className), "function" == typeof e.onchange && e.onchange()
                }
            }, {
                key: "enable",
                value: function() {
                    n.on(this.options.elements, "click", this._ontap())
                }
            }, {
                key: "disable",
                value: function() {
                    n.on(this.options.elements, "click", this._ontap())
                }
            }]), t
        }();
        e.
        default = i
    }, function(t, e, o) {
        "use strict";
        Object.defineProperty(e, "__esModule", {
            value: !0
        });
        var r = function() {
            function t(t, e) {
                for (var o = 0; o < e.length; o++) {
                    var r = e[o];
                    r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), Object.defineProperty(t, r.key, r)
                }
            }
            return function(e, o, r) {
                return o && t(e.prototype, o), r && t(e, r), e
            }
        }(),
            n = function(t) {
                if (t && t.__esModule) return t;
                var e = {};
                if (null != t) for (var o in t) Object.prototype.hasOwnProperty.call(t, o) && (e[o] = t[o]);
                return e.
                default = t, e
            }(o(0));
        var i = function() {
            function t(e) {
                ! function(t, e) {
                    if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
                }(this, t);
                var o = {
                    lockX: !1,
                    lockY: !1,
                    onchange: void 0
                };
                this.options = Object.assign(o, e);
                var r = Object.getOwnPropertyNames(Object.getPrototypeOf(this)),
                    i = !0,
                    a = !1,
                    c = void 0;
                try {
                    for (var s, u = r[Symbol.iterator](); !(i = (s = u.next()).done); i = !0) {
                        var l = s.value;
                        "_" === l.charAt(0) && "function" == typeof this[l] && (this[l] = this[l].bind(this))
                    }
                } catch (t) {
                    a = !0, c = t
                } finally {
                    try {
                        !i && u.
                        return &&u.
                        return ()
                    } finally {
                        if (a) throw c
                    }
                }
                n.on([this.options.wrapper, this.options.element], "mousedown", this._tapstart), n.on([this.options.wrapper, this.options.element], "touchstart", this._tapstart, {
                    passive: !1
                })
            }
            return r(t, [{
                key: "_tapstart",
                value: function(t) {
                    n.on(document, ["mouseup", "touchend", "touchcancel"], this._tapstop), n.on(document, ["mousemove", "touchmove"], this._tapmove), this._tapmove(t), t.preventDefault()
                }
            }, {
                key: "_tapmove",
                value: function(t) {
                    var e = this.options.wrapper,
                        o = this.options.element,
                        r = e.getBoundingClientRect(),
                        n = void 0,
                        i = void 0;
                    if (t) {
                        var a = t && t.touches && t.touches[0];
                        n = t ? (a || t).clientX : 0, i = t ? (a || t).clientY : 0, n < r.left ? n = r.left : n > r.left + r.width && (n = r.left + r.width), i < r.top ? i = r.top : i > r.top + r.height && (i = r.top + r.height), n -= r.left, i -= r.top
                    } else this.cache ? (n = this.cache.x, i = this.cache.y) : (n = 0, i = 0);
                    "function" == typeof this.options.onchange && this.options.onchange(n, i), this.options.lockX || (o.style.left = n - o.offsetWidth / 2 + "px"), this.options.lockY || (o.style.top = i - o.offsetHeight / 2 + "px"), this.cache = {
                        x: n,
                        y: i
                    }
                }
            }, {
                key: "_tapstop",
                value: function() {
                    n.off(document, ["mouseup", "touchend", "touchcancel"], this._tapstop), n.off(document, ["mousemove", "touchmove"], this._tapmove)
                }
            }, {
                key: "trigger",
                value: function() {
                    this._tapmove()
                }
            }, {
                key: "update",
                value: function() {
                    var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0,
                        e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0,
                        o = this.options.wrapper.getBoundingClientRect();
                    this._tapmove(new MouseEvent("mousemove", {
                        clientX: o.left + t,
                        clientY: o.top + e
                    }))
                }
            }]), t
        }();
        e.
        default = i
    }, function(t, e, o) {
        "use strict";
        Object.defineProperty(e, "__esModule", {
            value: !0
        }), e.HSVaColor = void 0;
        var r = function() {
            function t(t, e) {
                for (var o = 0; o < e.length; o++) {
                    var r = e[o];
                    r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), Object.defineProperty(t, r.key, r)
                }
            }
            return function(e, o, r) {
                return o && t(e.prototype, o), r && t(e, r), e
            }
        }(),
            n = function(t) {
                if (t && t.__esModule) return t;
                var e = {};
                if (null != t) for (var o in t) Object.prototype.hasOwnProperty.call(t, o) && (e[o] = t[o]);
                return e.
                default = t, e
            }(o(1));
        e.HSVaColor = function() {
            function t() {
                var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0,
                    o = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0,
                    r = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 0,
                    n = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 1;
                ! function(t, e) {
                    if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
                }(this, t), this.h = e, this.s = o, this.v = r, this.a = n
            }
            return r(t, [{
                key: "toHSVA",
                value: function() {
                    var t = [this.h, this.s, this.v, this.a];
                    return t.toString = function() {
                        return "hsva(" + this[0] + ", " + this[1] + "%, " + this[2] + "%, " + this[3] + ")"
                    }, t
                }
            }, {
                key: "toHSLA",
                value: function() {
                    var t = n.hsvToHsl(this.h, this.s, this.v).concat([this.a]);
                    return t.toString = function() {
                        return "hsla(" + this[0] + ", " + this[1] + "%, " + this[2] + "%, " + this[3] + ")"
                    }, t
                }
            }, {
                key: "toRGBA",
                value: function() {
                    var t = n.hsvToRgb(this.h, this.s, this.v).concat([this.a]);
                    return t.toString = function() {
                        return "rgba(" + this[0] + ", " + this[1] + ", " + this[2] + ", " + this[3] + ")"
                    }, t
                }
            }, {
                key: "toHEX",
                value: function() {
                    var t = n.hsvToHex(this.h, this.s, this.v);
                    return t.toString = function() {
                        return "#" + this.join("").toUpperCase()
                    }, t
                }
            }, {
                key: "toCMYK",
                value: function() {
                    var t = n.hsvToCmyk(this.h, this.s, this.v);
                    return t.toString = function() {
                        this[0], this[1], this[2], this[3]
                    }, t
                }
            }, {
                key: "clone",
                value: function() {
                    return new t(this.h, this.s, this.v, this.a)
                }
            }]), t
        }()
    }, , , function(t, e, o) {}, function(t, e, o) {
        "use strict";
        var r = function() {
            function t(t, e) {
                for (var o = 0; o < e.length; o++) {
                    var r = e[o];
                    r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), Object.defineProperty(t, r.key, r)
                }
            }
            return function(e, o, r) {
                return o && t(e.prototype, o), r && t(e, r), e
            }
        }();
        o(7);
        var n = l(o(0)),
            i = l(o(1)),
            a = o(4),
            c = u(o(3)),
            s = u(o(2));

        function u(t) {
            return t && t.__esModule ? t : {
                default: t
            }
        }
        function l(t) {
            if (t && t.__esModule) return t;
            var e = {};
            if (null != t) for (var o in t) Object.prototype.hasOwnProperty.call(t, o) && (e[o] = t[o]);
            return e.
            default = t, e
        }
        function p(t) {
            if (Array.isArray(t)) {
                for (var e = 0, o = Array(t.length); e < t.length; e++) o[e] = t[e];
                return o
            }
            return Array.from(t)
        }
        var h = function() {
            function t(e) {
                ! function(t, e) {
                    if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
                }(this, t);
                var o = {
                    components: {
                        output: {}
                    },
                    default: "fff",
                    onChange: function() {},
                    onSave: function() {}
                };
                this.options = Object.assign(o, e);
                var r = Object.getOwnPropertyNames(Object.getPrototypeOf(this)),
                    n = !0,
                    i = !1,
                    c = void 0;
                try {
                    for (var s, u = r[Symbol.iterator](); !(n = (s = u.next()).done); n = !0) {
                        var l = s.value;
                        "_" === l.charAt(0) && "function" == typeof this[l] && (this[l] = this[l].bind(this))
                    }
                } catch (t) {
                    i = !0, c = t
                } finally {
                    try {
                        !n && u.
                        return &&u.
                        return ()
                    } finally {
                        if (i) throw c
                    }
                }
                this.root = this._buildRoot(), this.inputActive = !1, this.color = new a.HSVaColor, this.lastColor = new a.HSVaColor, this._rePositioningPicker(!0), this._buildComponents(), this._bindEvents(), this.setColor(this.options.
                default), this.hide()
            }
            return r(t, [{
                key: "_buildRoot",
                value: function() {
                    "string" == typeof this.options.el && (this.options.el = document.querySelector(this.options.el));
                    var t, e, o, r, i = this.options.el,
                        a = (t = this.options.components, e = function(t) {
                            return t ? "" : 'style="display:none" hidden'
                        }, o = n.createElementFromString('\n         <div class="pickr">\n    \n            <div class="pcr-button"></div>\n\n            <div class="pcr-app">\n                <div class="pcr-selection">\n                    <div class="pcr-color-preview" ' + e(t.preview) + '>\n                        <div class="pcr-last-color"></div>\n                        <div class="pcr-current-color"></div>\n                    </div>\n                \n                    <div class="pcr-color-palette">\n                        <div class="pcr-picker"></div>\n                        <div class="pcr-palette"></div>\n                    </div>\n    \n                    <div class="pcr-color-chooser" ' + e(t.hue) + '>\n                        <div class="pcr-picker"></div>\n                        <div class="pcr-hue pcr-slider"></div>\n                    </div>\n                    \n                     <div class="pcr-color-opacity" ' + e(t.opacity) + '>\n                        <div class="pcr-picker"></div>\n                        <div class="pcr-opacity pcr-slider"></div>\n                    </div>\n                </div>\n    \n                <div class="pcr-output" ' + e(t.output) + '>\n                    <input class="pcr-result" type="text" spellcheck="false" ' + e(t.output.input) + '>\n                    \n                    <input class="pcr-type" data-type="HEX" value="HEX" type="button" ' + e(t.output.hex) + '>\n                    <input class="pcr-type" data-type="RGBA" value="RGBa" type="button" ' + e(t.output.rgba) + '>\n                    <input class="pcr-type" data-type="HSLA" value="HSLa" type="button" ' + e(t.output.hsla) + '>\n                    <input class="pcr-type" data-type="HSVA" value="HSVa" type="button" ' + e(t.output.hsva) + '>\n                    <input class="pcr-type" data-type="CMYK" value="CMYK" type="button" ' + e(t.output.cmyk) + '>\n                    \n                    <input class="pcr-save" value="保存" type="button">\n                </div>\n            </div>\n      \n        </div>\n    '), r = {
                            root: o,
                            button: o.querySelector(".pcr-button"),
                            app: o.querySelector(".pcr-app "),
                            input: {
                                options: o.querySelectorAll(".pcr-app .pcr-output .pcr-type"),
                                result: o.querySelector(".pcr-app .pcr-output .pcr-result"),
                                save: o.querySelector(".pcr-app .pcr-output .pcr-save"),
                                type: function() {
                                    return o.querySelector(".pcr-app .pcr-output .pcr-type.active")
                                }
                            },
                            preview: {
                                lastColor: o.querySelector(".pcr-app .pcr-color-preview .pcr-last-color"),
                                currentColor: o.querySelector(".pcr-app .pcr-color-preview .pcr-current-color")
                            },
                            palette: {
                                picker: o.querySelector(".pcr-app .pcr-color-palette .pcr-picker"),
                                palette: o.querySelector(".pcr-app .pcr-color-palette .pcr-palette")
                            },
                            hueSlider: {
                                picker: o.querySelector(".pcr-app .pcr-color-chooser .pcr-picker"),
                                slider: o.querySelector(".pcr-app .pcr-color-chooser .pcr-hue.pcr-slider")
                            },
                            opacitySlider: {
                                picker: o.querySelector(".pcr-app .pcr-color-opacity .pcr-picker"),
                                slider: o.querySelector(".pcr-app .pcr-color-opacity .pcr-opacity.pcr-slider")
                            }
                        }, console.log(r), Array.from(r.input.options).find(function(t) {
                            return !t.hidden && !t.classList.add("active")
                        }), r);
                    return i.parentElement.replaceChild(a.root, i), a
                }
            }, {
                key: "_buildComponents",
                value: function() {
                    var t = this,
                        e = this.options.components,
                        o = {
                            palette: new c.
                            default ({
                                element: t.root.palette.picker,
                                wrapper: t.root.palette.palette,
                                onchange: function(e, o) {
                                    var r = t.color;
                                    r.s = Math.round(e / this.wrapper.offsetWidth * 100), r.v = Math.round(100 - o / this.wrapper.offsetHeight * 100);
                                    var n = r.toRGBA().toString();
                                    this.element.style.background = n, this.wrapper.style.background = "\n                        linear-gradient(to top, rgba(0, 0, 0, " + r.a + "), transparent), \n                        linear-gradient(to left, hsla(" + r.h + ", 100%, 50%, " + r.a + "), rgba(255, 255, 255, " + r.a + "))\n                    ", t.root.preview.currentColor.style.background = n, t._updateOutput()
                                }
                            }),
                            hueSlider: new c.
                            default ({
                                lockX: !0,
                                element: t.root.hueSlider.picker,
                                wrapper: t.root.hueSlider.slider,
                                onchange: function(r, n) {
                                    e.hue && (t.color.h = Math.round(n / this.wrapper.offsetHeight * 360), this.element.style.backgroundColor = "hsl(" + t.color.h + ", 100%, 50%)", o.palette.trigger())
                                }
                            }),
                            opacitySlider: new c.
                            default ({
                                lockX: !0,
                                element: t.root.opacitySlider.picker,
                                wrapper: t.root.opacitySlider.slider,
                                onchange: function(o, r) {
                                    e.opacity && (t.color.a = Math.round(r / this.wrapper.offsetHeight * 100) / 100, this.element.style.background = "rgba(0, 0, 0, " + t.color.a + ")", t.components.palette.trigger())
                                }
                            }),
                            selectable: new s.
                            default ({
                                elements: t.root.input.options,
                                className: "active",
                                onchange: function() {
                                    t.inputActive = !1, t.components.palette.trigger()
                                }
                            })
                        };
                    this.components = o
                }
            }, {
                key: "_bindEvents",
                value: function() {
                    var t = this,
                        e = this.root;
                    n.on(e.preview.lastColor, "click", function() {
                        return t.setHSVA.apply(t, p(t.lastColor.tohsva(!0)))
                    }), n.on(e.button, "click", function() {
                        return t.root.app.classList.contains("visible") ? t.hide() : t.show()
                    }), n.on(e.input.save, "click", function() {
                        return t.hide()
                    }), n.on(document, "mousedown", function(o) {
                        if (!n.eventPath(o).includes(e.root)) {
                            var r = function() {
                                n.off(document, "mouseup", r), t.cancel()
                            }.bind(t);
                            n.on(document, "mouseup", r)
                        }
                    }), n.on(e.input.result, "keyup", function(e) {
                        t.setColor(e.target.value), t.inputActive = !0
                    }), n.on([e.palette.palette, e.palette.picker, e.hueSlider.slider, e.hueSlider.picker, e.opacitySlider.slider, e.opacitySlider.picker], "mousedown", function() {
                        return t.inputActive = !1
                    })
                }
            }, {
                key: "_rePositioningPicker",
                value: function(t) {
                    var e = this.root.button.getBoundingClientRect(),
                        o = this.root.app.getBoundingClientRect(),
                        r = this.root.app.style;
                    switch (o.bottom > window.innerHeight ? r.top = -o.height - 5 + "px" : (t || o.bottom + o.height < window.innerHeight) && (r.top = e.height + 5 + "px"), this.options.position || "middle") {
                        case "left":
                            r.left = -o.width + e.width + "px";
                            break;
                        case "middle":
                            r.left = -o.width / 2 + e.width / 2 + "px";
                            break;
                        case "right":
                            r.left = "0px";
                            break;
                        default:
                            r.left = -o.width / 2 + e.width + "px"
                    }
                }
            }, {
                key: "_updateOutput",
                value: function() {
                    var t, e = this;
                    !this.inputActive && this.root.input.type() && (this.root.input.result.value = (t = "to" + e.root.input.type().getAttribute("data-type"), "function" == typeof e.color[t] ? e.color[t]().toString() : "")), this.options.onChange(this.color, this)
                }
            }, {
                key: "hide",
                value: function() {
                    this.root.app.classList.remove("visible");
                    var t = this.color.toRGBA().toString();
                    this.root.preview.lastColor.style.background = t, this.root.button.style.background = t, this.lastColor = this.color.clone(), this.options.onSave(this.color, this)
                }
            }, {
                key: "cancel",
                value: function() {
                    this.root.app.classList.remove("visible")
                }
            }, {
                key: "show",
                value: function() {
                    this.root.app.classList.add("visible"), this._rePositioningPicker()
                }
            }, {
                key: "setHSVA",
                value: function() {
                    var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 360,
                        e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0,
                        o = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : 0,
                        r = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 1;
                    if (!(t < 0 || t > 360 || e < 0 || e > 100 || o < 0 || o > 100 || r < 0 || r > 1)) {
                        var n = this.components.hueSlider.options.wrapper.offsetHeight * (t / 360);
                        this.components.hueSlider.update(0, n);
                        var i = this.components.opacitySlider.options.wrapper.offsetHeight * r;
                        this.components.opacitySlider.update(0, i);
                        var c = this.components.palette.options.wrapper,
                            s = c.offsetWidth * (e / 100),
                            u = c.offsetHeight * (1 - o / 100);
                        this.components.palette.update(s, u), this._updateOutput(), this.color = new a.HSVaColor(t, e, o, r)
                    }
                }
            }, {
                key: "setColor",
                value: function(t) {
                    var e = i.parseToHSV(t);
                    e && this.setHSVA.apply(this, p(e))
                }
            }, {
                key: "getColor",
                value: function() {
                    return this.color
                }
            }, {
                key: "getRoot",
                value: function() {
                    return this.root
                }
            }]), t
        }();
        h.utils = {
            on: n.on,
            off: n.off,
            eventPath: n.eventPath,
            createElementFromString: n.createElementFromString
        }, h.create = function(t) {
            return new h(t)
        }, h.version = "0.0.2", t.exports = h
    }])
});
 
const pickr = new Pickr({
    el: '.color-picker',

    default: '#42445A',

    components: {

        preview: true,
        opacity: true,
        hue: true,

        output: {
            hex: true,
            rgba: true,
            hsva: true,
            input: true
        },
    },
});
 
.pickr {
    position: relative;
    overflow: visible
}

.pickr * {
    box-sizing: border-box
}

.pickr .pcr-button {
    position: relative;
    height: 2em;
    width: 2em;
    padding: .5em;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
    border-radius: .15em;
    cursor: pointer;
    background: transparent;
    transition: background-color .3s;
    font-family: Source Sans Pro
}

.pickr .pcr-button:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
    background-size: .5em;
    border-radius: .15em;
    z-index: -1
}

.pickr .pcr-app {
    position: absolute;
    display: flex;
    flex-direction: column;
    height: 15em;
    width: 28em;
    max-width: 95vw;
    padding: .8em;
    border-radius: .1em;
    background: #fff;
    box-shadow: 0 .2em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.02);
    visibility: hidden;
    opacity: 0;
    transition: all .3s;
    font-family: Source Sans Pro
}

.pickr .pcr-app.visible {
    visibility: visible;
    opacity: 1
}

.pickr .pcr-app .pcr-output {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.3em
}

.pickr .pcr-app .pcr-output input {
    padding: .5em;
    border: none;
    outline: none;
    letter-spacing: .07em;
    font-size: .75em;
    width: 4em;
    text-align: center;
    cursor: pointer;
    color: #c4c4c4;
    background: #f8f8f8;
    border-radius: .15em;
    margin: 0 .2em;
    transition: all .15s
}

.pickr .pcr-app .pcr-output input:hover {
    color: gray
}

.pickr .pcr-app .pcr-output .pcr-result {
    color: gray;
    text-align: left;
    flex-grow: 1;
    min-width: 1em;
    margin-right: .5em;
    transition: all .2s;
    border-radius: .15em;
    background: #f8f8f8;
    cursor: text
}

.pickr .pcr-app .pcr-output .pcr-result:focus {
    color: #4285f4
}

.pickr .pcr-app .pcr-output .pcr-result::selection {
    background: #4285f4;
    color: #fff
}

.pickr .pcr-app .pcr-output .pcr-type.active {
    color: #fff;
    background: #4285f4
}

.pickr .pcr-app .pcr-output .pcr-save {
    background: #4285f4;
    color: #fff;
    width: 5em
}

.pickr .pcr-app .pcr-output .pcr-save:hover {
    background: #4370f4;
    color: #fff
}

.pickr .pcr-app .pcr-selection {
    display: flex;
    flex-grow: 1
}

.pickr .pcr-app .pcr-selection .pcr-picker {
    position: absolute;
    height: 18px;
    width: 18px;
    border: 2px solid #fff;
    border-radius: 100%;
    user-select: none;
    cursor: -moz-grab;
    cursor: -webkit-grabbing
}

.pickr .pcr-app .pcr-selection .pcr-color-preview {
    position: relative;
    z-index: 1;
    width: 2em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 1em;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.2)
}

.pickr .pcr-app .pcr-selection .pcr-color-preview:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
    background-size: .5em;
    border-radius: .15em;
    z-index: -1
}

.pickr .pcr-app .pcr-selection .pcr-color-preview .pcr-last-color {
    cursor: pointer;
    transition: background-color .3s;
    border-radius: .15em .15em 0 0
}

.pickr .pcr-app .pcr-selection .pcr-color-preview .pcr-current-color {
    border-radius: 0 0 .15em .15em
}

.pickr .pcr-app .pcr-selection .pcr-color-preview .pcr-current-color,.pickr .pcr-app .pcr-selection .pcr-color-preview .pcr-last-color {
    background: transparent;
    width: 100%;
    height: 50%
}

.pickr .pcr-app .pcr-selection .pcr-color-chooser,.pickr .pcr-app .pcr-selection .pcr-color-opacity,.pickr .pcr-app .pcr-selection .pcr-color-palette {
    position: relative;
    user-select: none
}

.pickr .pcr-app .pcr-selection .pcr-color-palette {
    position: relative;
    flex-grow: 1;
    z-index: 1
}

.pickr .pcr-app .pcr-selection .pcr-color-palette .pcr-palette {
    height: 100%;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.2);
    border-radius: .15em
}

.pickr .pcr-app .pcr-selection .pcr-color-palette .pcr-palette:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
    background-size: .5em;
    border-radius: .15em;
    z-index: -1
}

.pickr .pcr-app .pcr-selection .pcr-color-chooser,.pickr .pcr-app .pcr-selection .pcr-color-opacity {
    margin-left: 1em
}

.pickr .pcr-app .pcr-selection .pcr-color-chooser .pcr-picker,.pickr .pcr-app .pcr-selection .pcr-color-opacity .pcr-picker {
    margin-left: 50%;
    transform: translateX(-50%)
}

.pickr .pcr-app .pcr-selection .pcr-color-chooser .pcr-slider,.pickr .pcr-app .pcr-selection .pcr-color-opacity .pcr-slider {
    width: 8px;
    height: 100%;
    border-radius: 50em
}

.pickr .pcr-app .pcr-selection .pcr-color-chooser .pcr-slider {
    background: linear-gradient(180deg,red,#ff0,lime,cyan,blue,#f0f,red)
}

.pickr .pcr-app .pcr-selection .pcr-color-opacity .pcr-slider {
    background: linear-gradient(180deg,transparent,#000),url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
    background-size: 100%,.3em
}

 section {
 display: flex;
  justify-content: center;
  align-items: center;

}
  <section class="demo">

        <div class="center">
            <div class="color-picker"></div>

        </div>

    </section>