{"id":234,"date":"2017-02-20T14:16:00","date_gmt":"2017-02-20T14:16:00","guid":{"rendered":""},"modified":"2020-01-17T07:35:39","modified_gmt":"2020-01-17T07:35:39","slug":"creating-a-custom-experience-manager-slingresourcetype-for-touch-ui","status":"publish","type":"post","link":"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/","title":{"rendered":"Creating a custom Experience Manager sling:resourceType for Touch UI"},"content":{"rendered":"
In this blog I am going to discuss how to create a custom sling resource type for the AEM Touch UI using a jQurey plugin.<\/p>\n

You can create a custom sling resource type  that can be used in an AEM Touch UI component by using a JQuery plug-in. As, if you want to define a field in a Touch UI component dialog that is not available with the available Granite API, you can define your own custom type.<\/p>\n

So, I want to develop a full color spectrum field for a touch UI component dialog.<\/b>
\n
\n<\/b>For this, Firstly I created a folder under \/apps<\/b> folder named as \/custom-components\/custom-color-picker<\/b>. Under this folder, I created a client lib folder named as colorpicker-clientlib and a jsp named as render.jsp under client lib folder I created two files js.txt and css.txt and created a script.js and style.css. The folder structure  is like this:<\/p>\n

<\/a><\/div>\n

The main application logic is in \/apps\/custom-components\/custom-colorpicker\/colorpicker-clientlib\/script.js<\/b>
\n
\n<\/b>The code for this js file:
\n
\n<\/span>(function (factory) {<\/span>
\n    “use strict”;<\/span><\/p>\n

    if (typeof define === ‘function’ && define.amd) { \/\/ AMD<\/span>
\n        define([‘jquery’], factory);<\/span>
\n    }<\/span>
\n    else if (typeof exports == “object” && typeof module == “object”) { \/\/ CommonJS<\/span>
\n        module.exports = factory(require(‘jquery’));<\/span>
\n    }<\/span>
\n    else { \/\/ Browser<\/span>
\n        factory(jQuery);<\/span>
\n    }<\/span>
\n})(function($, undefined) {<\/span>
\n    “use strict”;<\/span><\/p>\n

    var defaultOpts = {<\/span><\/p>\n

        \/\/ Callbacks<\/span>
\n        beforeShow: noop,<\/span>
\n        move: noop,<\/span>
\n        change: noop,<\/span>
\n        show: noop,<\/span>
\n        hide: noop,<\/span><\/p>\n

        \/\/ Options<\/span>
\n        color: false,<\/span>
\n        flat: false,<\/span>
\n        showInput: false,<\/span>
\n        allowEmpty: false,<\/span>
\n        showButtons: true,<\/span>
\n        clickoutFiresChange: true,<\/span>
\n        showInitial: false,<\/span>
\n        showPalette: false,<\/span>
\n        showPaletteOnly: false,<\/span>
\n        hideAfterPaletteSelect: false,<\/span>
\n        togglePaletteOnly: false,<\/span>
\n        showSelectionPalette: true,<\/span>
\n        localStorageKey: false,<\/span>
\n        appendTo: “body”,<\/span>
\n        maxSelectionSize: 7,<\/span>
\n        cancelText: “cancel”,<\/span>
\n        chooseText: “choose”,<\/span>
\n        togglePaletteMoreText: “more”,<\/span>
\n        togglePaletteLessText: “less”,<\/span>
\n        clearText: “Clear Color Selection”,<\/span>
\n        noColorSelectedText: “No Color Selected”,<\/span>
\n        preferredFormat: false,<\/span>
\n        className: “”, \/\/ Deprecated – use containerClassName and replacerClassName instead.<\/span>
\n        containerClassName: “”,<\/span>
\n        replacerClassName: “”,<\/span>
\n        showAlpha: false,<\/span>
\n        theme: “sp-light”,<\/span>
\n        palette: [[“#ffffff”, “#000000”, “#ff0000”, “#ff8000”, “#ffff00”, “#008000”, “#0000ff”, “#4b0082”, “#9400d3”]],<\/span>
\n        selectionPalette: [],<\/span>
\n        disabled: false,<\/span>
\n        offset: null<\/span>
\n    },<\/span>
\n    spectrums = [],<\/span>
\n    IE = !!\/msie\/i.exec( window.navigator.userAgent ),<\/span>
\n    rgbaSupport = (function() {<\/span>
\n        function contains( str, substr ) {<\/span>
\n            return !!~(” + str).indexOf(substr);<\/span>
\n        }<\/span><\/p>\n

        var elem = document.createElement(‘div’);<\/span>
\n        var style = elem.style;<\/span>
\n        style.cssText = ‘background-color:rgba(0,0,0,.5)’;<\/span>
\n        return contains(style.backgroundColor, ‘rgba’) || contains(style.backgroundColor, ‘hsla’);<\/span>
\n    })(),<\/span>
\n    replaceInput = [<\/span>
\n        “<div class=’sp-replacer’>”,<\/span>
\n            “<div class=’sp-preview’><div class=’sp-preview-inner’><\/div><\/div>”,<\/span>
\n            “<div class=’sp-dd’>&#9660;<\/div>”,<\/span>
\n        “<\/div>”<\/span>
\n    ].join(”),<\/span>
\n    markup = (function () {<\/span><\/p>\n

        \/\/ IE does not support gradients with multiple stops, so we need to simulate<\/span>
\n        \/\/  that for the rainbow slider with 8 divs that each have a single gradient<\/span>
\n        var gradientFix = “”;<\/span>
\n        if (IE) {<\/span>
\n            for (var i = 1; i <= 6; i++) {<\/span>
\n                gradientFix += “<div class=’sp-” + i + “‘><\/div>”;<\/span>
\n            }<\/span>
\n        }<\/span><\/p>\n

        return [<\/span>
\n            “<div class=’sp-container sp-hidden’>”,<\/span>
\n                “<div class=’sp-palette-container’>”,<\/span>
\n                    “<div class=’sp-palette sp-thumb sp-cf’><\/div>”,<\/span>
\n                    “<div class=’sp-palette-button-container sp-cf’>”,<\/span>
\n                        “<button type=’button’ class=’sp-palette-toggle’><\/button>”,<\/span>
\n                    “<\/div>”,<\/span>
\n                “<\/div>”,<\/span>
\n                “<div class=’sp-picker-container’>”,<\/span>
\n                    “<div class=’sp-top sp-cf’>”,<\/span>
\n                        “<div class=’sp-fill’><\/div>”,<\/span>
\n                        “<div class=’sp-top-inner’>”,<\/span>
\n                            “<div class=’sp-color’>”,<\/span>
\n                                “<div class=’sp-sat’>”,<\/span>
\n                                    “<div class=’sp-val’>”,<\/span>
\n                                        “<div class=’sp-dragger’><\/div>”,<\/span>
\n                                    “<\/div>”,<\/span>
\n                                “<\/div>”,<\/span>
\n                            “<\/div>”,<\/span>
\n                            “<div class=’sp-clear sp-clear-display’>”,<\/span>
\n                            “<\/div>”,<\/span>
\n                            “<div class=’sp-hue’>”,<\/span>
\n                                “<div class=’sp-slider’><\/div>”,<\/span>
\n                                gradientFix,<\/span>
\n                            “<\/div>”,<\/span>
\n                        “<\/div>”,<\/span>
\n                        “<div class=’sp-alpha’><div class=’sp-alpha-inner’><div class=’sp-alpha-handle’><\/div><\/div><\/div>”,<\/span>
\n                    “<\/div>”,<\/span>
\n                    “<div class=’sp-input-container sp-cf’>”,<\/span>
\n                        “<input class=’sp-input’ type=’text’ spellcheck=’false’  \/>”,<\/span>
\n                    “<\/div>”,<\/span>
\n                    “<div class=’sp-initial sp-thumb sp-cf’><\/div>”,<\/span>
\n                    “<div class=’sp-button-container sp-cf’>”,<\/span>
\n                        “<a class=’sp-cancel’ href=’#’><\/a>”,<\/span>
\n                        “<button type=’button’ class=’sp-choose’><\/button>”,<\/span>
\n                    “<\/div>”,<\/span>
\n                “<\/div>”,<\/span>
\n            “<\/div>”<\/span>
\n        ].join(“”);<\/span>
\n    })();<\/span><\/p>\n

    function paletteTemplate (p, color, className, opts) {<\/span>
\n        var html = [];<\/span>
\n        for (var i = 0; i < p.length; i++) {<\/span>
\n            var current = p[i];<\/span>
\n            if(current) {<\/span>
\n                var tiny = tinycolor(current);<\/span>
\n                var c = tiny.toHsl().l < 0.5 ? “sp-thumb-el sp-thumb-dark” : “sp-thumb-el sp-thumb-light”;<\/span>
\n                c += (tinycolor.equals(color, current)) ? ” sp-thumb-active” : “”;<\/span>
\n                var formattedString = tiny.toString(opts.preferredFormat || “rgb”);<\/span>
\n                var swatchStyle = rgbaSupport ? (“background-color:” + tiny.toRgbString()) : “filter:” + tiny.toFilter();<\/span>
\n                html.push(‘<span title=”‘ + formattedString + ‘” data-color=”‘ + tiny.toRgbString() + ‘” class=”‘ + c + ‘”><span class=”sp-thumb-inner” style=”‘ + swatchStyle + ‘;” \/><\/span>’);<\/span>
\n            } else {<\/span>
\n                var cls = ‘sp-clear-display’;<\/span>
\n                html.push($(‘<div \/>’)<\/span>
\n                    .append($(‘<span data-color=”” style=”background-color:transparent;” class=”‘ + cls + ‘”><\/span>’)<\/span>
\n                        .attr(‘title’, opts.noColorSelectedText)<\/span>
\n                    )<\/span>
\n                    .html()<\/span>
\n                );<\/span>
\n            }<\/span>
\n        }<\/span>
\n        return “<div class=’sp-cf ” + className + “‘>” + html.join(”) + “<\/div>”;<\/span>
\n    }<\/span><\/p>\n

    function hideAll() {<\/span>
\n        for (var i = 0; i < spectrums.length; i++) {<\/span>
\n            if (spectrums[i]) {<\/span>
\n                spectrums[i].hide();<\/span>
\n            }<\/span>
\n        }<\/span>
\n    }<\/span><\/p>\n

    function instanceOptions(o, callbackContext) {<\/span>
\n        var opts = $.extend({}, defaultOpts, o);<\/span>
\n        opts.callbacks = {<\/span>
\n            ‘move’: bind(opts.move, callbackContext),<\/span>
\n            ‘change’: bind(opts.change, callbackContext),<\/span>
\n            ‘show’: bind(opts.show, callbackContext),<\/span>
\n            ‘hide’: bind(opts.hide, callbackContext),<\/span>
\n            ‘beforeShow’: bind(opts.beforeShow, callbackContext)<\/span>
\n        };<\/span><\/p>\n

        return opts;<\/span>
\n    }<\/span><\/p>\n

    function spectrum(element, o) {<\/span><\/p>\n

        var opts = instanceOptions(o, element),<\/span>
\n            flat = opts.flat,<\/span>
\n            showSelectionPalette = opts.showSelectionPalette,<\/span>
\n            localStorageKey = opts.localStorageKey,<\/span>
\n            theme = opts.theme,<\/span>
\n            callbacks = opts.callbacks,<\/span>
\n            resize = throttle(reflow, 10),<\/span>
\n            visible = false,<\/span>
\n            isDragging = false,<\/span>
\n            dragWidth = 0,<\/span>
\n            dragHeight = 0,<\/span>
\n            dragHelperHeight = 0,<\/span>
\n            slideHeight = 0,<\/span>
\n            slideWidth = 0,<\/span>
\n            alphaWidth = 0,<\/span>
\n            alphaSlideHelperWidth = 0,<\/span>
\n            slideHelperHeight = 0,<\/span>
\n            currentHue = 0,<\/span>
\n            currentSaturation = 0,<\/span>
\n            currentValue = 0,<\/span>
\n            currentAlpha = 1,<\/span>
\n            palette = [],<\/span>
\n            paletteArray = [],<\/span>
\n            paletteLookup = {},<\/span>
\n            selectionPalette = opts.selectionPalette.slice(0),<\/span>
\n            maxSelectionSize = opts.maxSelectionSize,<\/span>
\n            draggingClass = “sp-dragging”,<\/span>
\n            shiftMovementDirection = null;<\/span><\/p>\n

        var doc = element.ownerDocument,<\/span>
\n            body = doc.body,<\/span>
\n            boundElement = $(element),<\/span>
\n            disabled = false,<\/span>
\n            container = $(markup, doc).addClass(theme),<\/span>
\n            pickerContainer = container.find(“.sp-picker-container”),<\/span>
\n            dragger = container.find(“.sp-color”),<\/span>
\n            dragHelper = container.find(“.sp-dragger”),<\/span>
\n            slider = container.find(“.sp-hue”),<\/span>
\n            slideHelper = container.find(“.sp-slider”),<\/span>
\n            alphaSliderInner = container.find(“.sp-alpha-inner”),<\/span>
\n            alphaSlider = container.find(“.sp-alpha”),<\/span>
\n            alphaSlideHelper = container.find(“.sp-alpha-handle”),<\/span>
\n            textInput = container.find(“.sp-input”),<\/span>
\n            paletteContainer = container.find(“.sp-palette”),<\/span>
\n            initialColorContainer = container.find(“.sp-initial”),<\/span>
\n            cancelButton = container.find(“.sp-cancel”),<\/span>
\n            clearButton = container.find(“.sp-clear”),<\/span>
\n            chooseButton = container.find(“.sp-choose”),<\/span>
\n            toggleButton = container.find(“.sp-palette-toggle”),<\/span>
\n            isInput = boundElement.is(“input”),<\/span>
\n            isInputTypeColor = isInput && boundElement.attr(“type”) === “color” && inputTypeColorSupport(),<\/span>
\n            shouldReplace = isInput && !flat,<\/span>
\n            replacer = (shouldReplace) ? $(replaceInput).addClass(theme).addClass(opts.className).addClass(opts.replacerClassName) : $([]),<\/span>
\n            offsetElement = (shouldReplace) ? replacer : boundElement,<\/span>
\n            previewElement = replacer.find(“.sp-preview-inner”),<\/span>
\n            initialColor = opts.color || (isInput && boundElement.val()),<\/span>
\n            colorOnShow = false,<\/span>
\n            currentPreferredFormat = opts.preferredFormat,<\/span>
\n            clickoutFiresChange = !opts.showButtons || opts.clickoutFiresChange,<\/span>
\n            isEmpty = !initialColor,<\/span>
\n            allowEmpty = opts.allowEmpty && !isInputTypeColor;<\/span><\/p>\n

        function applyOptions() {<\/span><\/p>\n

            if (opts.showPaletteOnly) {<\/span>
\n                opts.showPalette = true;<\/span>
\n            }<\/span><\/p>\n

            toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText);<\/span><\/p>\n

            if (opts.palette) {<\/span>
\n                palette = opts.palette.slice(0);<\/span>
\n                paletteArray = $.isArray(palette[0]) ? palette : [palette];<\/span>
\n                paletteLookup = {};<\/span>
\n                for (var i = 0; i < paletteArray.length; i++) {<\/span>
\n                    for (var j = 0; j < paletteArray[i].length; j++) {<\/span>
\n                        var rgb = tinycolor(paletteArray[i][j]).toRgbString();<\/span>
\n                        paletteLookup[rgb] = true;<\/span>
\n                    }<\/span>
\n                }<\/span>
\n            }<\/span><\/p>\n

            container.toggleClass(“sp-flat”, flat);<\/span>
\n            container.toggleClass(“sp-input-disabled”, !opts.showInput);<\/span>
\n            container.toggleClass(“sp-alpha-enabled”, opts.showAlpha);<\/span>
\n            container.toggleClass(“sp-clear-enabled”, allowEmpty);<\/span>
\n            container.toggleClass(“sp-buttons-disabled”, !opts.showButtons);<\/span>
\n            container.toggleClass(“sp-palette-buttons-disabled”, !opts.togglePaletteOnly);<\/span>
\n            container.toggleClass(“sp-palette-disabled”, !opts.showPalette);<\/span>
\n            container.toggleClass(“sp-palette-only”, opts.showPaletteOnly);<\/span>
\n            container.toggleClass(“sp-initial-disabled”, !opts.showInitial);<\/span>
\n            container.addClass(opts.className).addClass(opts.containerClassName);<\/span><\/p>\n

            reflow();<\/span>
\n        }<\/span><\/p>\n

        function initialize() {<\/span><\/p>\n

            if (IE) {<\/span>
\n                container.find(“*:not(input)”).attr(“unselectable”, “on”);<\/span>
\n            }<\/span><\/p>\n

            applyOptions();<\/span><\/p>\n

            if (shouldReplace) {<\/span>
\n                boundElement.after(replacer).hide();<\/span>
\n            }<\/span><\/p>\n

            if (!allowEmpty) {<\/span>
\n                clearButton.hide();<\/span>
\n            }<\/span><\/p>\n

            if (flat) {<\/span>
\n                boundElement.after(container).hide();<\/span>
\n            }<\/span>
\n            else {<\/span><\/p>\n

                var appendTo = opts.appendTo === “parent” ? boundElement.parent() : $(opts.appendTo);<\/span>
\n                if (appendTo.length !== 1) {<\/span>
\n                    appendTo = $(“body”);<\/span>
\n                }<\/span><\/p>\n

                appendTo.append(container);<\/span>
\n            }<\/span><\/p>\n

            updateSelectionPaletteFromStorage();<\/span><\/p>\n

            offsetElement.bind(“click.spectrum touchstart.spectrum”, function (e) {<\/span>
\n                if (!disabled) {<\/span>
\n                    toggle();<\/span>
\n                }<\/span><\/p>\n

                e.stopPropagation();<\/span><\/p>\n

                if (!$(e.target).is(“input”)) {<\/span>
\n                    e.preventDefault();<\/span>
\n                }<\/span>
\n            });<\/span><\/p>\n

            if(boundElement.is(“:disabled”) || (opts.disabled === true)) {<\/span>
\n                disable();<\/span>
\n            }<\/span><\/p>\n

            \/\/ Prevent clicks from bubbling up to document.  This would cause it to be hidden.<\/span>
\n            container.click(stopPropagation);<\/span><\/p>\n

            \/\/ Handle user typed input<\/span>
\n            textInput.change(setFromTextInput);<\/span>
\n            textInput.bind(“paste”, function () {<\/span>
\n                setTimeout(setFromTextInput, 1);<\/span>
\n            });<\/span>
\n            textInput.keydown(function (e) { if (e.keyCode == 13) { setFromTextInput(); } });<\/span><\/p>\n

            cancelButton.text(opts.cancelText);<\/span>
\n            cancelButton.bind(“click.spectrum”, function (e) {<\/span>
\n                e.stopPropagation();<\/span>
\n                e.preventDefault();<\/span>
\n                revert();<\/span>
\n                hide();<\/span>
\n            });<\/span><\/p>\n

            clearButton.attr(“title”, opts.clearText);<\/span>
\n            clearButton.bind(“click.spectrum”, function (e) {<\/span>
\n                e.stopPropagation();<\/span>
\n                e.preventDefault();<\/span>
\n                isEmpty = true;<\/span>
\n                move();<\/span><\/p>\n

                if(flat) {<\/span>
\n                    \/\/for the flat style, this is a change event<\/span>
\n                    updateOriginalInput(true);<\/span>
\n                }<\/span>
\n            });<\/span><\/p>\n

            chooseButton.text(opts.chooseText);<\/span>
\n            chooseButton.bind(“click.spectrum”, function (e) {<\/span>
\n                e.stopPropagation();<\/span>
\n                e.preventDefault();<\/span><\/p>\n

                if (IE && textInput.is(“:focus”)) {<\/span>
\n                    textInput.trigger(‘change’);<\/span>
\n                }<\/span><\/p>\n

                if (isValid()) {<\/span>
\n                    updateOriginalInput(true);<\/span>
\n                    hide();<\/span>
\n                }<\/span>
\n            });<\/span><\/p>\n

            toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText);<\/span>
\n            toggleButton.bind(“click.spectrum”, function (e) {<\/span>
\n                e.stopPropagation();<\/span>
\n                e.preventDefault();<\/span><\/p>\n

                opts.showPaletteOnly = !opts.showPaletteOnly;<\/span><\/p>\n

                \/\/ To make sure the Picker area is drawn on the right, next to the<\/span>
\n                \/\/ Palette area (and not below the palette), first move the Palette<\/span>
\n                \/\/ to the left to make space for the picker, plus 5px extra.<\/span>
\n                \/\/ The ‘applyOptions’ function puts the whole container back into place<\/span>
\n                \/\/ and takes care of the button-text and the sp-palette-only CSS class.<\/span>
\n                if (!opts.showPaletteOnly && !flat) {<\/span>
\n                    container.css(‘left’, ‘-=’ + (pickerContainer.outerWidth(true) + 5));<\/span>
\n                }<\/span>
\n                applyOptions();<\/span>
\n            });<\/span><\/p>\n

            draggable(alphaSlider, function (dragX, dragY, e) {<\/span>
\n                currentAlpha = (dragX \/ alphaWidth);<\/span>
\n                isEmpty = false;<\/span>
\n                if (e.shiftKey) {<\/span>
\n                    currentAlpha = Math.round(currentAlpha * 10) \/ 10;<\/span>
\n                }<\/span><\/p>\n

                move();<\/span>
\n            }, dragStart, dragStop);<\/span><\/p>\n

            draggable(slider, function (dragX, dragY) {<\/span>
\n                currentHue = parseFloat(dragY \/ slideHeight);<\/span>
\n                isEmpty = false;<\/span>
\n                if (!opts.showAlpha) {<\/span>
\n                    currentAlpha = 1;<\/span>
\n                }<\/span>
\n                move();<\/span>
\n            }, dragStart, dragStop);<\/span><\/p>\n

            draggable(dragger, function (dragX, dragY, e) {<\/span><\/p>\n

                \/\/ shift+drag should snap the movement to either the x or y axis.<\/span>
\n                if (!e.shiftKey) {<\/span>
\n                    shiftMovementDirection = null;<\/span>
\n                }<\/span>
\n                else if (!shiftMovementDirection) {<\/span>
\n                    var oldDragX = currentSaturation * dragWidth;<\/span>
\n                    var oldDragY = dragHeight – (currentValue * dragHeight);<\/span>
\n                    var furtherFromX = Math.abs(dragX – oldDragX) > Math.abs(dragY – oldDragY);<\/span><\/p>\n

                    shiftMovementDirection = furtherFromX ? “x” : “y”;<\/span>
\n                }<\/span><\/p>\n

                var setSaturation = !shiftMovementDirection || shiftMovementDirection === “x”;<\/span>
\n                var setValue = !shiftMovementDirection || shiftMovementDirection === “y”;<\/span><\/p>\n

                if (setSaturation) {<\/span>
\n                    currentSaturation = parseFloat(dragX \/ dragWidth);<\/span>
\n                }<\/span>
\n                if (setValue) {<\/span>
\n                    currentValue = parseFloat((dragHeight – dragY) \/ dragHeight);<\/span>
\n                }<\/span><\/p>\n

                isEmpty = false;<\/span>
\n                if (!opts.showAlpha) {<\/span>
\n                    currentAlpha = 1;<\/span>
\n                }<\/span><\/p>\n

                move();<\/span><\/p>\n

            }, dragStart, dragStop);<\/span><\/p>\n

            if (!!initialColor) {<\/span>
\n                set(initialColor);<\/span><\/p>\n

                \/\/ In case color was black – update the preview UI and set the format<\/span>
\n                \/\/ since the set function will not run (default color is black).<\/span>
\n                updateUI();<\/span>
\n                currentPreferredFormat = opts.preferredFormat || tinycolor(initialColor).format;<\/span><\/p>\n

                addColorToSelectionPalette(initialColor);<\/span>
\n            }<\/span>
\n            else {<\/span>
\n                updateUI();<\/span>
\n            }<\/span><\/p>\n

            if (flat) {<\/span>
\n                show();<\/span>
\n            }<\/span><\/p>\n

            function paletteElementClick(e) {<\/span>
\n                if (e.data && e.data.ignore) {<\/span>
\n                    set($(e.target).closest(“.sp-thumb-el”).data(“color”));<\/span>
\n                    move();<\/span>
\n                }<\/span>
\n                else {<\/span>
\n                    set($(e.target).closest(“.sp-thumb-el”).data(“color”));<\/span>
\n                    move();<\/span>
\n                    updateOriginalInput(true);<\/span>
\n                    if (opts.hideAfterPaletteSelect) {<\/span>
\n                      hide();<\/span>
\n                    }<\/span>
\n                }<\/span><\/p>\n

                return false;<\/span>
\n            }<\/span><\/p>\n

            var paletteEvent = IE ? “mousedown.spectrum” : “click.spectrum touchstart.spectrum”;<\/span>
\n            paletteContainer.delegate(“.sp-thumb-el”, paletteEvent, paletteElementClick);<\/span>
\n            initialColorContainer.delegate(“.sp-thumb-el:nth-child(1)”, paletteEvent, { ignore: true }, paletteElementClick);<\/span>
\n        }<\/span><\/p>\n

        function updateSelectionPaletteFromStorage() {<\/span><\/p>\n

            if (localStorageKey && window.localStorage) {<\/span><\/p>\n

                \/\/ Migrate old palettes over to new format.  May want to remove this eventually.<\/span>
\n                try {<\/span>
\n                    var oldPalette = window.localStorage[localStorageKey].split(“,#”);<\/span>
\n                    if (oldPalette.length > 1) {<\/span>
\n                        delete window.localStorage[localStorageKey];<\/span>
\n                        $.each(oldPalette, function(i, c) {<\/span>
\n                             addColorToSelectionPalette(c);<\/span>
\n                        });<\/span>
\n                    }<\/span>
\n                }<\/span>
\n                catch(e) { }<\/span><\/p>\n

                try {<\/span>
\n                    selectionPalette = window.localStorage[localStorageKey].split(“;”);<\/span>
\n                }<\/span>
\n                catch (e) { }<\/span>
\n            }<\/span>
\n        }<\/span><\/p>\n

        function addColorToSelectionPalette(color) {<\/span>
\n            if (showSelectionPalette) {<\/span>
\n                var rgb = tinycolor(color).toRgbString();<\/span>
\n                if (!paletteLookup[rgb] && $.inArray(rgb, selectionPalette) === -1) {<\/span>
\n                    selectionPalette.push(rgb);<\/span>
\n                    while(selectionPalette.length > maxSelectionSize) {<\/span>
\n                        selectionPalette.shift();<\/span>
\n                    }<\/span>
\n                }<\/span><\/p>\n

                if (localStorageKey && window.localStorage) {<\/span>
\n                    try {<\/span>
\n                        window.localStorage[localStorageKey] = selectionPalette.join(“;”);<\/span>
\n                    }<\/span>
\n                    catch(e) { }<\/span>
\n                }<\/span>
\n            }<\/span>
\n        }<\/span><\/p>\n

        function getUniqueSelectionPalette() {<\/span>
\n            var unique = [];<\/span>
\n            if (opts.showPalette) {<\/span>
\n                for (var i = 0; i < selectionPalette.length; i++) {<\/span>
\n                    var rgb = tinycolor(selectionPalette[i]).toRgbString();<\/span><\/p>\n

                    if (!paletteLookup[rgb]) {<\/span>
\n                        unique.push(selectionPalette[i]);<\/span>
\n                    }<\/span>
\n                }<\/span>
\n            }<\/span><\/p>\n

            return unique.reverse().slice(0, opts.maxSelectionSize);<\/span>
\n        }<\/span><\/p>\n

        function drawPalette() {<\/span><\/p>\n

            var currentColor = get();<\/span><\/p>\n

            var html = $.map(paletteArray, function (palette, i) {<\/span>
\n                return paletteTemplate(palette, currentColor, “sp-palette-row sp-palette-row-” + i, opts);<\/span>
\n            });<\/span><\/p>\n

            updateSelectionPaletteFromStorage();<\/span><\/p>\n

            if (selectionPalette) {<\/span>
\n                html.push(paletteTemplate(getUniqueSelectionPalette(), currentColor, “sp-palette-row sp-palette-row-selection”, opts));<\/span>
\n            }<\/span><\/p>\n

            paletteContainer.html(html.join(“”));<\/span>
\n        }<\/span><\/p>\n

        function drawInitial() {<\/span>
\n            if (opts.showInitial) {<\/span>
\n                var initial = colorOnShow;<\/span>
\n                var current = get();<\/span>
\n                initialColorContainer.html(paletteTemplate([initial, current], current, “sp-palette-row-initial”, opts));<\/span>
\n            }<\/span>
\n        }<\/span><\/p>\n

        function dragStart() {<\/span>
\n            if (dragHeight <= 0 || dragWidth <= 0 || slideHeight <= 0) {<\/span>
\n                reflow();<\/span>
\n            }<\/span>
\n            isDragging = true;<\/span>
\n            container.addClass(draggingClass);<\/span>
\n            shiftMovementDirection = null;<\/span>
\n            boundElement.trigger(‘dragstart.spectrum’, [ get() ]);<\/span>
\n        }<\/span><\/p>\n

        function dragStop() {<\/span>
\n            isDragging = false;<\/span>
\n            container.removeClass(draggingClass);<\/span>
\n            boundElement.trigger(‘dragstop.spectrum’, [ get() ]);<\/span>
\n        }<\/span><\/p>\n

        function setFromTextInput() {<\/span><\/p>\n

            var value = textInput.val();<\/span><\/p>\n

            if ((value === null || value === “”) && allowEmpty) {<\/span>
\n                set(null);<\/span>
\n                updateOriginalInput(true);<\/span>
\n            }<\/span>
\n            else {<\/span>
\n                var tiny = tinycolor(value);<\/span>
\n                if (tiny.isValid()) {<\/span>
\n                    set(tiny);<\/span>
\n                    updateOriginalInput(true);<\/span>
\n                }<\/span>
\n                else {<\/span>
\n                    textInput.addClass(“sp-validation-error”);<\/span>
\n                }<\/span>
\n            }<\/span>
\n        }<\/span><\/p>\n

        function toggle() {<\/span>
\n            if (visible) {<\/span>
\n                hide();<\/span>
\n            }<\/span>
\n            else {<\/span>
\n                show();<\/span>
\n            }<\/span>
\n        }<\/span><\/p>\n

        function show() {<\/span>
\n            var event = $.Event(‘beforeShow.spectrum’);<\/span><\/p>\n

            if (visible) {<\/span>
\n                reflow();<\/span>
\n                return;<\/span>
\n            }<\/span><\/p>\n

            boundElement.trigger(event, [ get() ]);<\/span><\/p>\n

            if (callbacks.beforeShow(get()) === false || event.isDefaultPrevented()) {<\/span>
\n                return;<\/span>
\n            }<\/span><\/p>\n

            hideAll();<\/span>
\n            visible = true;<\/span><\/p>\n

            $(doc).bind(“keydown.spectrum”, onkeydown);<\/span>
\n            $(doc).bind(“click.spectrum”, clickout);<\/span>
\n            $(window).bind(“resize.spectrum”, resize);<\/span>
\n            replacer.addClass(“sp-active”);<\/span>
\n            container.removeClass(“sp-hidden”);<\/span><\/p>\n

            reflow();<\/span>
\n            updateUI();<\/span><\/p>\n

            colorOnShow = get();<\/span><\/p>\n

            drawInitial();<\/span>
\n            callbacks.show(colorOnShow);<\/span>
\n            boundElement.trigger(‘show.spectrum’, [ colorOnShow ]);<\/span>
\n        }<\/span><\/p>\n

        function onkeydown(e) {<\/span>
\n            \/\/ Close on ESC<\/span>
\n            if (e.keyCode === 27) {<\/span>
\n                hide();<\/span>
\n            }<\/span>
\n        }<\/span><\/p>\n

        function clickout(e) {<\/span>
\n            \/\/ Return on right click.<\/span>
\n            if (e.button == 2) { return; }<\/span><\/p>\n

            \/\/ If a drag event was happening during the mouseup, don’t hide<\/span>
\n            \/\/ on click.<\/span>
\n            if (isDragging) { return; }<\/span><\/p>\n

            if (clickoutFiresChange) {<\/span>
\n                updateOriginalInput(true);<\/span>
\n            }<\/span>
\n            else {<\/span>
\n                revert();<\/span>
\n            }<\/span>
\n            hide();<\/span>
\n        }<\/span><\/p>\n

        function hide() {<\/span>
\n            \/\/ Return if hiding is unnecessary<\/span>
\n            if (!visible || flat) { return; }<\/span>
\n            visible = false;<\/span><\/p>\n

            $(doc).unbind(“keydown.spectrum”, onkeydown);<\/span>
\n            $(doc).unbind(“click.spectrum”, clickout);<\/span>
\n            $(window).unbind(“resize.spectrum”, resize);<\/span><\/p>\n

            replacer.removeClass(“sp-active”);<\/span>
\n            container.addClass(“sp-hidden”);<\/span><\/p>\n

            callbacks.hide(get());<\/span>
\n            boundElement.trigger(‘hide.spectrum’, [ get() ]);<\/span>
\n        }<\/span><\/p>\n

        function revert() {<\/span>
\n            set(colorOnShow, true);<\/span>
\n        }<\/span><\/p>\n

        function set(color, ignoreFormatChange) {<\/span>
\n            if (tinycolor.equals(color, get())) {<\/span>
\n                \/\/ Update UI just in case a validation error needs<\/span>
\n                \/\/ to be cleared.<\/span>
\n                updateUI();<\/span>
\n                return;<\/span>
\n            }<\/span><\/p>\n

            var newColor, newHsv;<\/span>
\n            if (!color && allowEmpty) {<\/span>
\n                isEmpty = true;<\/span>
\n            } else {<\/span>
\n                isEmpty = false;<\/span>
\n                newColor = tinycolor(color);<\/span>
\n                newHsv = newColor.toHsv();<\/span><\/p>\n

                currentHue = (newHsv.h % 360) \/ 360;<\/span>
\n                currentSaturation = newHsv.s;<\/span>
\n                currentValue = newHsv.v;<\/span>
\n                currentAlpha = newHsv.a;<\/span>
\n            }<\/span>
\n            updateUI();<\/span><\/p>\n

            if (newColor && newColor.isValid() && !ignoreFormatChange) {<\/span>
\n                currentPreferredFormat = opts.preferredFormat || newColor.getFormat();<\/span>
\n            }<\/span>
\n        }<\/span><\/p>\n

        function get(opts) {<\/span>
\n            opts = opts || { };<\/span><\/p>\n

            if (allowEmpty && isEmpty) {<\/span>
\n                return null;<\/span>
\n            }<\/span><\/p>\n

            return tinycolor.fromRatio({<\/span>
\n                h: currentHue,<\/span>
\n                s: currentSaturation,<\/span>
\n                v: currentValue,<\/span>
\n                a: Math.round(currentAlpha * 100) \/ 100<\/span>
\n            }, { format: opts.format || currentPreferredFormat });<\/span>
\n        }<\/span><\/p>\n

        function isValid() {<\/span>
\n            return !textInput.hasClass(“sp-validation-error”);<\/span>
\n        }<\/span><\/p>\n

        function move() {<\/span>
\n            updateUI();<\/span><\/p>\n

            callbacks.move(get());<\/span>
\n            boundElement.trigger(‘move.spectrum’, [ get() ]);<\/span>
\n        }<\/span><\/p>\n

        function updateUI() {<\/span><\/p>\n

            textInput.removeClass(“sp-validation-error”);<\/span><\/p>\n

            updateHelperLocations();<\/span><\/p>\n

            \/\/ Update dragger background color (gradients take care of saturation and value).<\/span>
\n            var flatColor = tinycolor.fromRatio({ h: currentHue, s: 1, v: 1 });<\/span>
\n            dragger.css(“background-color”, flatColor.toHexString());<\/span><\/p>\n

            \/\/ Get a format that alpha will be included in (hex and names ignore alpha)<\/span>
\n            var format = currentPreferredFormat;<\/span>
\n            if (currentAlpha < 1 && !(currentAlpha === 0 && format === “name”)) {<\/span>
\n                if (format === “hex” || format === “hex3” || format === “hex6” || format === “name”) {<\/span>
\n                    format = “rgb”;<\/span>
\n                }<\/span>
\n            }<\/span><\/p>\n

            var realColor = get({ format: format }),<\/span>
\n                displayColor = ”;<\/span><\/p>\n

             \/\/reset background info for preview element<\/span>
\n            previewElement.removeClass(“sp-clear-display”);<\/span>
\n            previewElement.css(‘background-color’, ‘transparent’);<\/span><\/p>\n

            if (!realColor && allowEmpty) {<\/span>
\n                \/\/ Update the replaced elements background with icon indicating no color selection<\/span>
\n                previewElement.addClass(“sp-clear-display”);<\/span>
\n            }<\/span>
\n            else {<\/span>
\n                var realHex = realColor.toHexString(),<\/span>
\n                    realRgb = realColor.toRgbString();<\/span><\/p>\n

                \/\/ Update the replaced elements background color (with actual selected color)<\/span>
\n                if (rgbaSupport || realColor.alpha === 1) {<\/span>
\n                    previewElement.css(“background-color”, realRgb);<\/span>
\n                }<\/span>
\n                else {<\/span>
\n                    previewElement.css(“background-color”, “transparent”);<\/span>
\n                    previewElement.css(“filter”, realColor.toFilter());<\/span>
\n                }<\/span><\/p>\n

                if (opts.showAlpha) {<\/span>
\n                    var rgb = realColor.toRgb();<\/span>
\n                    rgb.a = 0;<\/span>
\n                    var realAlpha = tinycolor(rgb).toRgbString();<\/span>
\n                    var gradient = “linear-gradient(left, ” + realAlpha + “, ” + realHex + “)”;<\/span><\/p>\n

                    if (IE) {<\/span>
\n                        alphaSliderInner.css(“filter”, tinycolor(realAlpha).toFilter({ gradientType: 1 }, realHex));<\/span>
\n                    }<\/span>
\n                    else {<\/span>
\n                        alphaSliderInner.css(“background”, “-webkit-” + gradient);<\/span>
\n                        alphaSliderInner.css(“background”, “-moz-” + gradient);<\/span>
\n                        alphaSliderInner.css(“background”, “-ms-” + gradient);<\/span>
\n                        \/\/ Use current syntax gradient on unprefixed property.<\/span>
\n                        alphaSliderInner.css(“background”,<\/span>
\n                            “linear-gradient(to right, ” + realAlpha + “, ” + realHex + “)”);<\/span>
\n                    }<\/span>
\n                }<\/span><\/p>\n

                displayColor = realColor.toString(format);<\/span>
\n            }<\/span><\/p>\n

            \/\/ Update the text entry input as it changes happen<\/span>
\n            if (opts.showInput) {<\/span>
\n                textInput.val(displayColor);<\/span>
\n            }<\/span><\/p>\n

            if (opts.showPalette) {<\/span>
\n                drawPalette();<\/span>
\n            }<\/span><\/p>\n

            drawInitial();<\/span>
\n        }<\/span><\/p>\n

        function updateHelperLocations() {<\/span>
\n            var s = currentSaturation;<\/span>
\n            var v = currentValue;<\/span><\/p>\n

            if(allowEmpty && isEmpty) {<\/span>
\n                \/\/if selected color is empty, hide the helpers<\/span>
\n                alphaSlideHelper.hide();<\/span>
\n                slideHelper.hide();<\/span>
\n                dragHelper.hide();<\/span>
\n            }<\/span>
\n            else {<\/span>
\n                \/\/make sure helpers are visible<\/span>
\n                alphaSlideHelper.show();<\/span>
\n                slideHelper.show();<\/span>
\n                dragHelper.show();<\/span><\/p>\n

                \/\/ Where to show the little circle in that displays your current selected color<\/span>
\n                var dragX = s * dragWidth;<\/span>
\n                var dragY = dragHeight – (v * dragHeight);<\/span>
\n                dragX = Math.max(<\/span>
\n                    -dragHelperHeight,<\/span>
\n                    Math.min(dragWidth – dragHelperHeight, dragX – dragHelperHeight)<\/span>
\n                );<\/span>
\n                dragY = Math.max(<\/span>
\n                    -dragHelperHeight,<\/span>
\n                    Math.min(dragHeight – dragHelperHeight, dragY – dragHelperHeight)<\/span>
\n                );<\/span>
\n                dragHelper.css({<\/span>
\n                    “top”: dragY + “px”,<\/span>
\n                    “left”: dragX + “px”<\/span>
\n                });<\/span><\/p>\n

                var alphaX = currentAlpha * alphaWidth;<\/span>
\n                alphaSlideHelper.css({<\/span>
\n                    “left”: (alphaX – (alphaSlideHelperWidth \/ 2)) + “px”<\/span>
\n                });<\/span><\/p>\n

                \/\/ Where to show the bar that displays your current selected hue<\/span>
\n                var slideY = (currentHue) * slideHeight;<\/span>
\n                slideHelper.css({<\/span>
\n                    “top”: (slideY – slideHelperHeight) + “px”<\/span>
\n                });<\/span>
\n            }<\/span>
\n        }<\/span><\/p>\n

        function updateOriginalInput(fireCallback) {<\/span>
\n            var color = get(),<\/span>
\n                displayColor = ”,<\/span>
\n                hasChanged = !tinycolor.equals(color, colorOnShow);<\/span><\/p>\n

            if (color) {<\/span>
\n                displayColor = color.toString(currentPreferredFormat);<\/span>
\n                \/\/ Update the selection palette with the current color<\/span>
\n                addColorToSelectionPalette(color);<\/span>
\n            }<\/span><\/p>\n

            if (isInput) {<\/span>
\n                boundElement.val(displayColor);<\/span>
\n            }<\/span><\/p>\n

            if (fireCallback && hasChanged) {<\/span>
\n                callbacks.change(color);<\/span>
\n                boundElement.trigger(‘change’, [ color ]);<\/span>
\n            }<\/span>
\n        }<\/span><\/p>\n

        function reflow() {<\/span>
\n            if (!visible) {<\/span>
\n                return; \/\/ Calculations would be useless and wouldn’t be reliable anyways<\/span>
\n            }<\/span>
\n            dragWidth = dragger.width();<\/span>
\n            dragHeight = dragger.height();<\/span>
\n            dragHelperHeight = dragHelper.height();<\/span>
\n            slideWidth = slider.width();<\/span>
\n            slideHeight = slider.height();<\/span>
\n            slideHelperHeight = slideHelper.height();<\/span>
\n            alphaWidth = alphaSlider.width();<\/span>
\n            alphaSlideHelperWidth = alphaSlideHelper.width();<\/span><\/p>\n

            if (!flat) {<\/span>
\n                container.css(“position”, “absolute”);<\/span>
\n                if (opts.offset) {<\/span>
\n                    container.offset(opts.offset);<\/span>
\n                } else {<\/span>
\n                    container.offset(getOffset(container, offsetElement));<\/span>
\n                }<\/span>
\n            }<\/span><\/p>\n

            updateHelperLocations();<\/span><\/p>\n

            if (opts.showPalette) {<\/span>
\n                drawPalette();<\/span>
\n            }<\/span><\/p>\n

            boundElement.trigger(‘reflow.spectrum’);<\/span>
\n        }<\/span><\/p>\n

        function destroy() {<\/span>
\n            boundElement.show();<\/span>
\n            offsetElement.unbind(“click.spectrum touchstart.spectrum”);<\/span>
\n            container.remove();<\/span>
\n            replacer.remove();<\/span>
\n            spectrums[spect.id] = null;<\/span>
\n        }<\/span><\/p>\n

        function option(optionName, optionValue) {<\/span>
\n            if (optionName === undefined) {<\/span>
\n                return $.extend({}, opts);<\/span>
\n            }<\/span>
\n            if (optionValue === undefined) {<\/span>
\n                return opts[optionName];<\/span>
\n            }<\/span><\/p>\n

            opts[optionName] = optionValue;<\/span><\/p>\n

            if (optionName === “preferredFormat”) {<\/span>
\n                currentPreferredFormat = opts.preferredFormat;<\/span>
\n            }<\/span>
\n            applyOptions();<\/span>
\n        }<\/span><\/p>\n

        function enable() {<\/span>
\n            disabled = false;<\/span>
\n            boundElement.attr(“disabled”, false);<\/span>
\n            offsetElement.removeClass(“sp-disabled”);<\/span>
\n        }<\/span><\/p>\n

        function disable() {<\/span>
\n            hide();<\/span>
\n            disabled = true;<\/span>
\n            boundElement.attr(“disabled”, true);<\/span>
\n            offsetElement.addClass(“sp-disabled”);<\/span>
\n        }<\/span><\/p>\n

        function setOffset(coord) {<\/span>
\n            opts.offset = coord;<\/span>
\n            reflow();<\/span>
\n        }<\/span><\/p>\n

        initialize();<\/span><\/p>\n

        var spect = {<\/span>
\n            show: show,<\/span>
\n            hide: hide,<\/span>
\n            toggle: toggle,<\/span>
\n            reflow: reflow,<\/span>
\n            option: option,<\/span>
\n            enable: enable,<\/span>
\n            disable: disable,<\/span>
\n            offset: setOffset,<\/span>
\n            set: function (c) {<\/span>
\n                set(c);<\/span>
\n                updateOriginalInput();<\/span>
\n            },<\/span>
\n            get: get,<\/span>
\n            destroy: destroy,<\/span>
\n            container: container<\/span>
\n        };<\/span><\/p>\n

        spect.id = spectrums.push(spect) – 1;<\/span><\/p>\n

        return spect;<\/span>
\n    }<\/span><\/p>\n

    \/**<\/span>
\n    * checkOffset – get the offset below\/above and left\/right element depending on screen position<\/span>
\n    * Thanks https:\/\/github.com\/jquery\/jquery-ui\/blob\/master\/ui\/jquery.ui.datepicker.js<\/span>
\n    *\/<\/span>
\n    function getOffset(picker, input) {<\/span>
\n        var extraY = 0;<\/span>
\n        var dpWidth = picker.outerWidth();<\/span>
\n        var dpHeight = picker.outerHeight();<\/span>
\n        var inputHeight = input.outerHeight();<\/span>
\n        var doc = picker[0].ownerDocument;<\/span>
\n        var docElem = doc.documentElement;<\/span>
\n        var viewWidth = docElem.clientWidth + $(doc).scrollLeft();<\/span>
\n        var viewHeight = docElem.clientHeight + $(doc).scrollTop();<\/span>
\n        var offset = input.offset();<\/span>
\n        offset.top += inputHeight;<\/span><\/p>\n

        offset.left -=<\/span>
\n            Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?<\/span>
\n            Math.abs(offset.left + dpWidth – viewWidth) : 0);<\/span><\/p>\n

        offset.top -=<\/span>
\n            Math.min(offset.top, ((offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?<\/span>
\n            Math.abs(dpHeight + inputHeight – extraY) : extraY));<\/span><\/p>\n

        return offset;<\/span>
\n    }<\/span><\/p>\n

    \/**<\/span>
\n    * noop – do nothing<\/span>
\n    *\/<\/span>
\n    function noop() {<\/span><\/p>\n

    }<\/span><\/p>\n

    \/**<\/span>
\n    * stopPropagation – makes the code only doing this a little easier to read in line<\/span>
\n    *\/<\/span>
\n    function stopPropagation(e) {<\/span>
\n        e.stopPropagation();<\/span>
\n    }<\/span><\/p>\n

    \/**<\/span>
\n    * Create a function bound to a given object<\/span>
\n    * Thanks to underscore.js<\/span>
\n    *\/<\/span>
\n    function bind(func, obj) {<\/span>
\n        var slice = Array.prototype.slice;<\/span>
\n        var args = slice.call(arguments, 2);<\/span>
\n        return function () {<\/span>
\n            return func.apply(obj, args.concat(slice.call(arguments)));<\/span>
\n        };<\/span>
\n    }<\/span><\/p>\n

    \/**<\/span>
\n    * Lightweight drag helper.  Handles containment within the element, so that<\/span>
\n    * when dragging, the x is within [0,element.width] and y is within [0,element.height]<\/span>
\n    *\/<\/span>
\n    function draggable(element, onmove, onstart, onstop) {<\/span>
\n        onmove = onmove || function () { };<\/span>
\n        onstart = onstart || function () { };<\/span>
\n        onstop = onstop || function () { };<\/span>
\n        var doc = document;<\/span>
\n        var dragging = false;<\/span>
\n        var offset = {};<\/span>
\n        var maxHeight = 0;<\/span>
\n        var maxWidth = 0;<\/span>
\n        var hasTouch = (‘ontouchstart’ in window);<\/span><\/p>\n

        var duringDragEvents = {};<\/span>
\n        duringDragEvents[“selectstart”] = prevent;<\/span>
\n        duringDragEvents[“dragstart”] = prevent;<\/span>
\n        duringDragEvents[“touchmove mousemove”] = move;<\/span>
\n        duringDragEvents[“touchend mouseup”] = stop;<\/span><\/p>\n

        function prevent(e) {<\/span>
\n            if (e.stopPropagation) {<\/span>
\n                e.stopPropagation();<\/span>
\n            }<\/span>
\n            if (e.preventDefault) {<\/span>
\n                e.preventDefault();<\/span>
\n            }<\/span>
\n            e.returnValue = false;<\/span>
\n        }<\/span><\/p>\n

        function move(e) {<\/span>
\n            if (dragging) {<\/span>
\n                \/\/ Mouseup happened outside of window<\/span>
\n                if (IE && doc.documentMode < 9 && !e.button) {<\/span>
\n                    return stop();<\/span>
\n                }<\/span><\/p>\n

                var t0 = e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0];<\/span>
\n                var pageX = t0 && t0.pageX || e.pageX;<\/span>
\n                var pageY = t0 && t0.pageY || e.pageY;<\/span><\/p>\n

                var dragX = Math.max(0, Math.min(pageX – offset.left, maxWidth));<\/span>
\n                var dragY = Math.max(0, Math.min(pageY – offset.top, maxHeight));<\/span><\/p>\n

                if (hasTouch) {<\/span>
\n                    \/\/ Stop scrolling in iOS<\/span>
\n                    prevent(e);<\/span>
\n                }<\/span><\/p>\n

                onmove.apply(element, [dragX, dragY, e]);<\/span>
\n            }<\/span>
\n        }<\/span><\/p>\n

        function start(e) {<\/span>
\n            var rightclick = (e.which) ? (e.which == 3) : (e.button == 2);<\/span><\/p>\n

            if (!rightclick && !dragging) {<\/span>
\n                if (onstart.apply(element, arguments) !== false) {<\/span>
\n                    dragging = true;<\/span>
\n                    maxHeight = $(element).height();<\/span>
\n                    maxWidth = $(element).width();<\/span>
\n                    offset = $(element).offset();<\/span><\/p>\n

                    $(doc).bind(duringDragEvents);<\/span>
\n                    $(doc.body).addClass(“sp-dragging”);<\/span><\/p>\n

                    move(e);<\/span><\/p>\n

                    prevent(e);<\/span>
\n                }<\/span>
\n            }<\/span>
\n        }<\/span><\/p>\n

        function stop() {<\/span>
\n            if (dragging) {<\/span>
\n                $(doc).unbind(duringDragEvents);<\/span>
\n                $(doc.body).removeClass(“sp-dragging”);<\/span><\/p>\n

                \/\/ Wait a tick before notifying observers to allow the click event<\/span>
\n                \/\/ to fire in Chrome.<\/span>
\n                setTimeout(function() {<\/span>
\n                    onstop.apply(element, arguments);<\/span>
\n                }, 0);<\/span>
\n            }<\/span>
\n            dragging = false;<\/span>
\n        }<\/span><\/p>\n

        $(element).bind(“touchstart mousedown”, start);<\/span>
\n    }<\/span><\/p>\n

    function throttle(func, wait, debounce) {<\/span>
\n        var timeout;<\/span>
\n        return function () {<\/span>
\n            var context = this, args = arguments;<\/span>
\n            var throttler = function () {<\/span>
\n                timeout = null;<\/span>
\n                func.apply(context, args);<\/span>
\n            };<\/span>
\n            if (debounce) clearTimeout(timeout);<\/span>
\n            if (debounce || !timeout) timeout = setTimeout(throttler, wait);<\/span>
\n        };<\/span>
\n    }<\/span><\/p>\n

    function inputTypeColorSupport() {<\/span>
\n        return $.fn.spectrum.inputTypeColorSupport();<\/span>
\n    }<\/span><\/p>\n

    \/**<\/span>
\n    * Define a jQuery plugin<\/span>
\n    *\/<\/span>
\n    var dataID = “spectrum.id”;<\/span>
\n    $.fn.spectrum = function (opts, extra) {<\/span><\/p>\n

        if (typeof opts == “string”) {<\/span><\/p>\n

            var returnValue = this;<\/span>
\n            var args = Array.prototype.slice.call( arguments, 1 );<\/span><\/p>\n

            this.each(function () {<\/span>
\n                var spect = spectrums[$(this).data(dataID)];<\/span>
\n                if (spect) {<\/span>
\n                    var method = spect[opts];<\/span>
\n                    if (!method) {<\/span>
\n                        throw new Error( “Spectrum: no such method: ‘” + opts + “‘” );<\/span>
\n                    }<\/span><\/p>\n

                    if (opts == “get”) {<\/span>
\n                        returnValue = spect.get();<\/span>
\n                    }<\/span>
\n                    else if (opts == “container”) {<\/span>
\n                        returnValue = spect.container;<\/span>
\n                    }<\/span>
\n                    else if (opts == “option”) {<\/span>
\n                        returnValue = spect.option.apply(spect, args);<\/span>
\n                    }<\/span>
\n                    else if (opts == “destroy”) {<\/span>
\n                        spect.destroy();<\/span>
\n                        $(this).removeData(dataID);<\/span>
\n                    }<\/span>
\n                    else {<\/span>
\n                        method.apply(spect, args);<\/span>
\n                    }<\/span>
\n                }<\/span>
\n            });<\/span><\/p>\n

            return returnValue;<\/span>
\n        }<\/span><\/p>\n

        \/\/ Initializing a new instance of spectrum<\/span>
\n        return this.spectrum(“destroy”).each(function () {<\/span>
\n            var options = $.extend({}, opts, $(this).data());<\/span>
\n            var spect = spectrum(this, options);<\/span>
\n            $(this).data(dataID, spect.id);<\/span>
\n        });<\/span>
\n    };<\/span><\/p>\n

    $.fn.spectrum.load = true;<\/span>
\n    $.fn.spectrum.loadOpts = {};<\/span>
\n    $.fn.spectrum.draggable = draggable;<\/span>
\n    $.fn.spectrum.defaults = defaultOpts;<\/span>
\n    $.fn.spectrum.inputTypeColorSupport = function inputTypeColorSupport() {<\/span>
\n        if (typeof inputTypeColorSupport._cachedResult === “undefined”) {<\/span>
\n            var colorInput = $(“<input type=’color’\/>”)[0]; \/\/ if color element is supported, value will default to not null<\/span>
\n            inputTypeColorSupport._cachedResult = colorInput.type === “color” && colorInput.value !== “”;<\/span>
\n        }<\/span>
\n        return inputTypeColorSupport._cachedResult;<\/span>
\n    };<\/span><\/p>\n

    $.spectrum = { };<\/span>
\n    $.spectrum.localization = { };<\/span>
\n    $.spectrum.palettes = { };<\/span><\/p>\n

    $.fn.spectrum.processNativeColorInputs = function () {<\/span>
\n        var colorInputs = $(“input[type=color]”);<\/span>
\n        if (colorInputs.length && !inputTypeColorSupport()) {<\/span>
\n            colorInputs.spectrum({<\/span>
\n                preferredFormat: “hex6”<\/span>
\n            });<\/span>
\n        }<\/span>
\n    };<\/span><\/p>\n

    \/\/ TinyColor v1.1.2<\/span>
\n    \/\/ https:\/\/github.com\/bgrins\/TinyColor<\/span>
\n    \/\/ Brian Grinstead, MIT License<\/span><\/p>\n

    (function() {<\/span><\/p>\n

    var trimLeft = \/^[s,#]+\/,<\/span>
\n        trimRight = \/s+$\/,<\/span>
\n        tinyCounter = 0,<\/span>
\n        math = Math,<\/span>
\n        mathRound = math.round,<\/span>
\n        mathMin = math.min,<\/span>
\n        mathMax = math.max,<\/span>
\n        mathRandom = math.random;<\/span><\/p>\n

    var tinycolor = function(color, opts) {<\/span><\/p>\n

        color = (color) ? color : ”;<\/span>
\n        opts = opts || { };<\/span><\/p>\n

        \/\/ If input is already a tinycolor, return itself<\/span>
\n        if (color instanceof tinycolor) {<\/span>
\n           return color;<\/span>
\n        }<\/span>
\n        \/\/ If we are called as a function, call using new instead<\/span>
\n        if (!(this instanceof tinycolor)) {<\/span>
\n            return new tinycolor(color, opts);<\/span>
\n        }<\/span><\/p>\n

        var rgb = inputToRGB(color);<\/span>
\n        this._originalInput = color,<\/span>
\n        this._r = rgb.r,<\/span>
\n        this._g = rgb.g,<\/span>
\n        this._b = rgb.b,<\/span>
\n        this._a = rgb.a,<\/span>
\n        this._roundA = mathRound(100*this._a) \/ 100,<\/span>
\n        this._format = opts.format || rgb.format;<\/span>
\n        this._gradientType = opts.gradientType;<\/span><\/p>\n

        \/\/ Don’t let the range of [0,255] come back in [0,1].<\/span>
\n        \/\/ Potentially lose a little bit of precision here, but will fix issues where<\/span>
\n        \/\/ .5 gets interpreted as half of the total, instead of half of 1<\/span>
\n        \/\/ If it was supposed to be 128, this was already taken care of by `inputToRgb`<\/span>
\n        if (this._r < 1) { this._r = mathRound(this._r); }<\/span>
\n        if (this._g < 1) { this._g = mathRound(this._g); }<\/span>
\n        if (this._b < 1) { this._b = mathRound(this._b); }<\/span><\/p>\n

        this._ok = rgb.ok;<\/span>
\n        this._tc_id = tinyCounter++;<\/span>
\n    };<\/span><\/p>\n

    tinycolor.prototype = {<\/span>
\n        isDark: function() {<\/span>
\n            return this.getBrightness() < 128;<\/span>
\n        },<\/span>
\n        isLight: function() {<\/span>
\n            return !this.isDark();<\/span>
\n        },<\/span>
\n        isValid: function() {<\/span>
\n            return this._ok;<\/span>
\n        },<\/span>
\n        getOriginalInput: function() {<\/span>
\n          return this._originalInput;<\/span>
\n        },<\/span>
\n        getFormat: function() {<\/span>
\n            return this._format;<\/span>
\n        },<\/span>
\n        getAlpha: function() {<\/span>
\n            return this._a;<\/span>
\n        },<\/span>
\n        getBrightness: function() {<\/span>
\n            var rgb = this.toRgb();<\/span>
\n            return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) \/ 1000;<\/span>
\n        },<\/span>
\n        setAlpha: function(value) {<\/span>
\n            this._a = boundAlpha(value);<\/span>
\n            this._roundA = mathRound(100*this._a) \/ 100;<\/span>
\n            return this;<\/span>
\n        },<\/span>
\n        toHsv: function() {<\/span>
\n            var hsv = rgbToHsv(this._r, this._g, this._b);<\/span>
\n            return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a };<\/span>
\n        },<\/span>
\n        toHsvString: function() {<\/span>
\n            var hsv = rgbToHsv(this._r, this._g, this._b);<\/span>
\n            var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100);<\/span>
\n            return (this._a == 1) ?<\/span>
\n              “hsv(”  + h + “, ” + s + “%, ” + v + “%)” :<\/span>
\n              “hsva(” + h + “, ” + s + “%, ” + v + “%, “+ this._roundA + “)”;<\/span>
\n        },<\/span>
\n        toHsl: function() {<\/span>
\n            var hsl = rgbToHsl(this._r, this._g, this._b);<\/span>
\n            return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a };<\/span>
\n        },<\/span>
\n        toHslString: function() {<\/span>
\n            var hsl = rgbToHsl(this._r, this._g, this._b);<\/span>
\n            var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100);<\/span>
\n            return (this._a == 1) ?<\/span>
\n              “hsl(”  + h + “, ” + s + “%, ” + l + “%)” :<\/span>
\n              “hsla(” + h + “, ” + s + “%, ” + l + “%, “+ this._roundA + “)”;<\/span>
\n        },<\/span>
\n        toHex: function(allow3Char) {<\/span>
\n            return rgbToHex(this._r, this._g, this._b, allow3Char);<\/span>
\n        },<\/span>
\n        toHexString: function(allow3Char) {<\/span>
\n            return ‘#’ + this.toHex(allow3Char);<\/span>
\n        },<\/span>
\n        toHex8: function() {<\/span>
\n            return rgbaToHex(this._r, this._g, this._b, this._a);<\/span>
\n        },<\/span>
\n        toHex8String: function() {<\/span>
\n            return ‘#’ + this.toHex8();<\/span>
\n        },<\/span>
\n        toRgb: function() {<\/span>
\n            return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a };<\/span>
\n        },<\/span>
\n        toRgbString: function() {<\/span>
\n            return (this._a == 1) ?<\/span>
\n              “rgb(”  + mathRound(this._r) + “, ” + mathRound(this._g) + “, ” + mathRound(this._b) + “)” :<\/span>
\n              “rgba(” + mathRound(this._r) + “, ” + mathRound(this._g) + “, ” + mathRound(this._b) + “, ” + this._roundA + “)”;<\/span>
\n        },<\/span>
\n        toPercentageRgb: function() {<\/span>
\n            return { r: mathRound(bound01(this._r, 255) * 100) + “%”, g: mathRound(bound01(this._g, 255) * 100) + “%”, b: mathRound(bound01(this._b, 255) * 100) + “%”, a: this._a };<\/span>
\n        },<\/span>
\n        toPercentageRgbString: function() {<\/span>
\n            return (this._a == 1) ?<\/span>
\n              “rgb(”  + mathRound(bound01(this._r, 255) * 100) + “%, ” + mathRound(bound01(this._g, 255) * 100) + “%, ” + mathRound(bound01(this._b, 255) * 100) + “%)” :<\/span>
\n              “rgba(” + mathRound(bound01(this._r, 255) * 100) + “%, ” + mathRound(bound01(this._g, 255) * 100) + “%, ” + mathRound(bound01(this._b, 255) * 100) + “%, ” + this._roundA + “)”;<\/span>
\n        },<\/span>
\n        toName: function() {<\/span>
\n            if (this._a === 0) {<\/span>
\n                return “transparent”;<\/span>
\n            }<\/span><\/p>\n

            if (this._a < 1) {<\/span>
\n                return false;<\/span>
\n            }<\/span><\/p>\n

            return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;<\/span>
\n        },<\/span>
\n        toFilter: function(secondColor) {<\/span>
\n            var hex8String = ‘#’ + rgbaToHex(this._r, this._g, this._b, this._a);<\/span>
\n            var secondHex8String = hex8String;<\/span>
\n            var gradientType = this._gradientType ? “GradientType = 1, ” : “”;<\/span><\/p>\n

            if (secondColor) {<\/span>
\n                var s = tinycolor(secondColor);<\/span>
\n                secondHex8String = s.toHex8String();<\/span>
\n            }<\/span><\/p>\n

            return “progid:DXImageTransform.Microsoft.gradient(“+gradientType+”startColorstr=”+hex8String+”,endColorstr=”+secondHex8String+”)”;<\/span>
\n        },<\/span>
\n        toString: function(format) {<\/span>
\n            var formatSet = !!format;<\/span>
\n            format = format || this._format;<\/span><\/p>\n

            var formattedString = false;<\/span>
\n            var hasAlpha = this._a < 1 && this._a >= 0;<\/span>
\n            var needsAlphaFormat = !formatSet && hasAlpha && (format === “hex” || format === “hex6” || format === “hex3” || format === “name”);<\/span><\/p>\n

            if (needsAlphaFormat) {<\/span>
\n                \/\/ Special case for “transparent”, all other non-alpha formats<\/span>
\n                \/\/ will return rgba when there is transparency.<\/span>
\n                if (format === “name” && this._a === 0) {<\/span>
\n                    return this.toName();<\/span>
\n                }<\/span>
\n                return this.toRgbString();<\/span>
\n            }<\/span>
\n            if (format === “rgb”) {<\/span>
\n                formattedString = this.toRgbString();<\/span>
\n            }<\/span>
\n            if (format === “prgb”) {<\/span>
\n                formattedString = this.toPercentageRgbString();<\/span>
\n            }<\/span>
\n            if (format === “hex” || format === “hex6”) {<\/span>
\n                formattedString = this.toHexString();<\/span>
\n            }<\/span>
\n            if (format === “hex3”) {<\/span>
\n                formattedString = this.toHexString(true);<\/span>
\n            }<\/span>
\n            if (format === “hex8”) {<\/span>
\n                formattedString = this.toHex8String();<\/span>
\n            }<\/span>
\n            if (format === “name”) {<\/span>
\n                formattedString = this.toName();<\/span>
\n            }<\/span>
\n            if (format === “hsl”) {<\/span>
\n                formattedString = this.toHslString();<\/span>
\n            }<\/span>
\n            if (format === “hsv”) {<\/span>
\n                formattedString = this.toHsvString();<\/span>
\n            }<\/span><\/p>\n

            return formattedString || this.toHexString();<\/span>
\n        },<\/span><\/p>\n

        _applyModification: function(fn, args) {<\/span>
\n            var color = fn.apply(null, [this].concat([].slice.call(args)));<\/span>
\n            this._r = color._r;<\/span>
\n            this._g = color._g;<\/span>
\n            this._b = color._b;<\/span>
\n            this.setAlpha(color._a);<\/span>
\n            return this;<\/span>
\n        },<\/span>
\n        lighten: function() {<\/span>
\n            return this._applyModification(lighten, arguments);<\/span>
\n        },<\/span>
\n        brighten: function() {<\/span>
\n            return this._applyModification(brighten, arguments);<\/span>
\n        },<\/span>
\n        darken: function() {<\/span>
\n            return this._applyModification(darken, arguments);<\/span>
\n        },<\/span>
\n        desaturate: function() {<\/span>
\n            return this._applyModification(desaturate, arguments);<\/span>
\n        },<\/span>
\n        saturate: function() {<\/span>
\n            return this._applyModification(saturate, arguments);<\/span>
\n        },<\/span>
\n        greyscale: function() {<\/span>
\n            return this._applyModification(greyscale, arguments);<\/span>
\n        },<\/span>
\n        spin: function() {<\/span>
\n            return this._applyModification(spin, arguments);<\/span>
\n        },<\/span><\/p>\n

        _applyCombination: function(fn, args) {<\/span>
\n            return fn.apply(null, [this].concat([].slice.call(args)));<\/span>
\n        },<\/span>
\n        analogous: function() {<\/span>
\n            return this._applyCombination(analogous, arguments);<\/span>
\n        },<\/span>
\n        complement: function() {<\/span>
\n            return this._applyCombination(complement, arguments);<\/span>
\n        },<\/span>
\n        monochromatic: function() {<\/span>
\n            return this._applyCombination(monochromatic, arguments);<\/span>
\n        },<\/span>
\n        splitcomplement: function() {<\/span>
\n            return this._applyCombination(splitcomplement, arguments);<\/span>
\n        },<\/span>
\n        triad: function() {<\/span>
\n            return this._applyCombination(triad, arguments);<\/span>
\n        },<\/span>
\n        tetrad: function() {<\/span>
\n            return this._applyCombination(tetrad, arguments);<\/span>
\n        }<\/span>
\n    };<\/span><\/p>\n

    \/\/ If input is an object, force 1 into “1.0” to handle ratios properly<\/span>
\n    \/\/ String input requires “1.0” as input, so 1 will be treated as 1<\/span>
\n    tinycolor.fromRatio = function(color, opts) {<\/span>
\n        if (typeof color == “object”) {<\/span>
\n            var newColor = {};<\/span>
\n            for (var i in color) {<\/span>
\n                if (color.hasOwnProperty(i)) {<\/span>
\n                    if (i === “a”) {<\/span>
\n                        newColor[i] = color[i];<\/span>
\n                    }<\/span>
\n                    else {<\/span>
\n                        newColor[i] = convertToPercentage(color[i]);<\/span>
\n                    }<\/span>
\n                }<\/span>
\n            }<\/span>
\n            color = newColor;<\/span>
\n        }<\/span><\/p>\n

        return tinycolor(color, opts);<\/span>
\n    };<\/span><\/p>\n

    \/\/ Given a string or object, convert that input to RGB<\/span>
\n    \/\/ Possible string inputs:<\/span>
\n    \/\/<\/span>
\n    \/\/     “red”<\/span>
\n    \/\/     “#f00” or “f00”<\/span>
\n    \/\/     “#ff0000” or “ff0000”<\/span>
\n    \/\/     “#ff000000” or “ff000000”<\/span>
\n    \/\/     “rgb 255 0 0” or “rgb (255, 0, 0)”<\/span>
\n    \/\/     “rgb 1.0 0 0” or “rgb (1, 0, 0)”<\/span>
\n    \/\/     “rgba (255, 0, 0, 1)” or “rgba 255, 0, 0, 1”<\/span>
\n    \/\/     “rgba (1.0, 0, 0, 1)” or “rgba 1.0, 0, 0, 1”<\/span>
\n    \/\/     “hsl(0, 100%, 50%)” or “hsl 0 100% 50%”<\/span>
\n    \/\/     “hsla(0, 100%, 50%, 1)” or “hsla 0 100% 50%, 1”<\/span>
\n    \/\/     “hsv(0, 100%, 100%)” or “hsv 0 100% 100%”<\/span>
\n    \/\/<\/span>
\n    function inputToRGB(color) {<\/span><\/p>\n

        var rgb = { r: 0, g: 0, b: 0 };<\/span>
\n        var a = 1;<\/span>
\n        var ok = false;<\/span>
\n        var format = false;<\/span><\/p>\n

        if (typeof color == “string”) {<\/span>
\n            color = stringInputToObject(color);<\/span>
\n        }<\/span><\/p>\n

        if (typeof color == “object”) {<\/span>
\n            if (color.hasOwnProperty(“r”) && color.hasOwnProperty(“g”) && color.hasOwnProperty(“b”)) {<\/span>
\n                rgb = rgbToRgb(color.r, color.g, color.b);<\/span>
\n                ok = true;<\/span>
\n                format = String(color.r).substr(-1) === “%” ? “prgb” : “rgb”;<\/span>
\n            }<\/span>
\n            else if (color.hasOwnProperty(“h”) && color.hasOwnProperty(“s”) && color.hasOwnProperty(“v”)) {<\/span>
\n                color.s = convertToPercentage(color.s);<\/span>
\n                color.v = convertToPercentage(color.v);<\/span>
\n                rgb = hsvToRgb(color.h, color.s, color.v);<\/span>
\n                ok = true;<\/span>
\n                format = “hsv”;<\/span>
\n            }<\/span>
\n            else if (color.hasOwnProperty(“h”) && color.hasOwnProperty(“s”) && color.hasOwnProperty(“l”)) {<\/span>
\n                color.s = convertToPercentage(color.s);<\/span>
\n                color.l = convertToPercentage(color.l);<\/span>
\n                rgb = hslToRgb(color.h, color.s, color.l);<\/span>
\n                ok = true;<\/span>
\n                format = “hsl”;<\/span>
\n            }<\/span><\/p>\n

            if (color.hasOwnProperty(“a”)) {<\/span>
\n                a = color.a;<\/span>
\n            }<\/span>
\n        }<\/span><\/p>\n

        a = boundAlpha(a);<\/span><\/p>\n

        return {<\/span>
\n            ok: ok,<\/span>
\n            format: color.format || format,<\/span>
\n            r: mathMin(255, mathMax(rgb.r, 0)),<\/span>
\n            g: mathMin(255, mathMax(rgb.g, 0)),<\/span>
\n            b: mathMin(255, mathMax(rgb.b, 0)),<\/span>
\n            a: a<\/span>
\n        };<\/span>
\n    }<\/span><\/p>\n

    \/\/ Conversion Functions<\/span>
\n    \/\/ ——————–<\/span><\/p>\n

    \/\/ `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:<\/span>
\n    \/\/ <http:\/\/mjijackson.com\/2008\/02\/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript><\/span><\/p>\n

    \/\/ `rgbToRgb`<\/span>
\n    \/\/ Handle bounds \/ percentage checking to conform to CSS color spec<\/span>
\n    \/\/ <http:\/\/www.w3.org\/TR\/css3-color\/><\/span>
\n    \/\/ *Assumes:* r, g, b in [0, 255] or [0, 1]<\/span>
\n    \/\/ *Returns:* { r, g, b } in [0, 255]<\/span>
\n    function rgbToRgb(r, g, b){<\/span>
\n        return {<\/span>
\n            r: bound01(r, 255) * 255,<\/span>
\n            g: bound01(g, 255) * 255,<\/span>
\n            b: bound01(b, 255) * 255<\/span>
\n        };<\/span>
\n    }<\/span><\/p>\n

    \/\/ `rgbToHsl`<\/span>
\n    \/\/ Converts an RGB color value to HSL.<\/span>
\n    \/\/ *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]<\/span>
\n    \/\/ *Returns:* { h, s, l } in [0,1]<\/span>
\n    function rgbToHsl(r, g, b) {<\/span><\/p>\n

        r = bound01(r, 255);<\/span>
\n        g = bound01(g, 255);<\/span>
\n        b = bound01(b, 255);<\/span><\/p>\n

        var max = mathMax(r, g, b), min = mathMin(r, g, b);<\/span>
\n        var h, s, l = (max + min) \/ 2;<\/span><\/p>\n

        if(max == min) {<\/span>
\n            h = s = 0; \/\/ achromatic<\/span>
\n        }<\/span>
\n        else {<\/span>
\n            var d = max – min;<\/span>
\n            s = l > 0.5 ? d \/ (2 – max – min) : d \/ (max + min);<\/span>
\n            switch(max) {<\/span>
\n                case r: h = (g – b) \/ d + (g < b ? 6 : 0); break;<\/span>
\n                case g: h = (b – r) \/ d + 2; break;<\/span>
\n                case b: h = (r – g) \/ d + 4; break;<\/span>
\n            }<\/span><\/p>\n

            h \/= 6;<\/span>
\n        }<\/span><\/p>\n

        return { h: h, s: s, l: l };<\/span>
\n    }<\/span><\/p>\n

    \/\/ `hslToRgb`<\/span>
\n    \/\/ Converts an HSL color value to RGB.<\/span>
\n    \/\/ *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]<\/span>
\n    \/\/ *Returns:* { r, g, b } in the set [0, 255]<\/span>
\n    function hslToRgb(h, s, l) {<\/span>
\n        var r, g, b;<\/span><\/p>\n

        h = bound01(h, 360);<\/span>
\n        s = bound01(s, 100);<\/span>
\n        l = bound01(l, 100);<\/span><\/p>\n

        function hue2rgb(p, q, t) {<\/span>
\n            if(t < 0) t += 1;<\/span>
\n            if(t > 1) t -= 1;<\/span>
\n            if(t < 1\/6) return p + (q – p) * 6 * t;<\/span>
\n            if(t < 1\/2) return q;<\/span>
\n            if(t < 2\/3) return p + (q – p) * (2\/3 – t) * 6;<\/span>
\n            return p;<\/span>
\n        }<\/span><\/p>\n

        if(s === 0) {<\/span>
\n            r = g = b = l; \/\/ achromatic<\/span>
\n        }<\/span>
\n        else {<\/span>
\n            var q = l < 0.5 ? l * (1 + s) : l + s – l * s;<\/span>
\n            var p = 2 * l – q;<\/span>
\n            r = hue2rgb(p, q, h + 1\/3);<\/span>
\n            g = hue2rgb(p, q, h);<\/span>
\n            b = hue2rgb(p, q, h – 1\/3);<\/span>
\n        }<\/span><\/p>\n

        return { r: r * 255, g: g * 255, b: b * 255 };<\/span>
\n    }<\/span><\/p>\n

    \/\/ `rgbToHsv`<\/span>
\n    \/\/ Converts an RGB color value to HSV<\/span>
\n    \/\/ *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]<\/span>
\n    \/\/ *Returns:* { h, s, v } in [0,1]<\/span>
\n    function rgbToHsv(r, g, b) {<\/span><\/p>\n

        r = bound01(r, 255);<\/span>
\n        g = bound01(g, 255);<\/span>
\n        b = bound01(b, 255);<\/span><\/p>\n

        var max = mathMax(r, g, b), min = mathMin(r, g, b);<\/span>
\n        var h, s, v = max;<\/span><\/p>\n

        var d = max – min;<\/span>
\n        s = max === 0 ? 0 : d \/ max;<\/span><\/p>\n

        if(max == min) {<\/span>
\n            h = 0; \/\/ achromatic<\/span>
\n        }<\/span>
\n        else {<\/span>
\n            switch(max) {<\/span>
\n                case r: h = (g – b) \/ d + (g < b ? 6 : 0); break;<\/span>
\n                case g: h = (b – r) \/ d + 2; break;<\/span>
\n                case b: h = (r – g) \/ d + 4; break;<\/span>
\n            }<\/span>
\n            h \/= 6;<\/span>
\n        }<\/span>
\n        return { h: h, s: s, v: v };<\/span>
\n    }<\/span><\/p>\n

    \/\/ `hsvToRgb`<\/span>
\n    \/\/ Converts an HSV color value to RGB.<\/span>
\n    \/\/ *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]<\/span>
\n    \/\/ *Returns:* { r, g, b } in the set [0, 255]<\/span>
\n     function hsvToRgb(h, s, v) {<\/span><\/p>\n

        h = bound01(h, 360) * 6;<\/span>
\n        s = bound01(s, 100);<\/span>
\n        v = bound01(v, 100);<\/span><\/p>\n

        var i = math.floor(h),<\/span>
\n            f = h – i,<\/span>
\n            p = v * (1 – s),<\/span>
\n            q = v * (1 – f * s),<\/span>
\n            t = v * (1 – (1 – f) * s),<\/span>
\n            mod = i % 6,<\/span>
\n            r = [v, q, p, p, t, v][mod],<\/span>
\n            g = [t, v, v, q, p, p][mod],<\/span>
\n            b = [p, p, t, v, v, q][mod];<\/span><\/p>\n

        return { r: r * 255, g: g * 255, b: b * 255 };<\/span>
\n    }<\/span><\/p>\n

    \/\/ `rgbToHex`<\/span>
\n    \/\/ Converts an RGB color to hex<\/span>
\n    \/\/ Assumes r, g, and b are contained in the set [0, 255]<\/span>
\n    \/\/ Returns a 3 or 6 character hex<\/span>
\n    function rgbToHex(r, g, b, allow3Char) {<\/span><\/p>\n

        var hex = [<\/span>
\n            pad2(mathRound(r).toString(16)),<\/span>
\n            pad2(mathRound(g).toString(16)),<\/span>
\n            pad2(mathRound(b).toString(16))<\/span>
\n        ];<\/span><\/p>\n

        \/\/ Return a 3 character hex if possible<\/span>
\n        if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) {<\/span>
\n            return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);<\/span>
\n        }<\/span><\/p>\n

        return hex.join(“”);<\/span>
\n    }<\/span>
\n        \/\/ `rgbaToHex`<\/span>
\n        \/\/ Converts an RGBA color plus alpha transparency to hex<\/span>
\n        \/\/ Assumes r, g, b and a are contained in the set [0, 255]<\/span>
\n        \/\/ Returns an 8 character hex<\/span>
\n        function rgbaToHex(r, g, b, a) {<\/span><\/p>\n

            var hex = [<\/span>
\n                pad2(convertDecimalToHex(a)),<\/span>
\n                pad2(mathRound(r).toString(16)),<\/span>
\n                pad2(mathRound(g).toString(16)),<\/span>
\n                pad2(mathRound(b).toString(16))<\/span>
\n            ];<\/span><\/p>\n

            return hex.join(“”);<\/span>
\n        }<\/span><\/p>\n

    \/\/ `equals`<\/span>
\n    \/\/ Can be called with any tinycolor input<\/span>
\n    tinycolor.equals = function (color1, color2) {<\/span>
\n        if (!color1 || !color2) { return false; }<\/span>
\n        return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();<\/span>
\n    };<\/span>
\n    tinycolor.random = function() {<\/span>
\n        return tinycolor.fromRatio({<\/span>
\n            r: mathRandom(),<\/span>
\n            g: mathRandom(),<\/span>
\n            b: mathRandom()<\/span>
\n        });<\/span>
\n    };<\/span><\/p>\n

    \/\/ Modification Functions<\/span>
\n    \/\/ ———————-<\/span>
\n    \/\/ Thanks to less.js for some of the basics here<\/span>
\n    \/\/ <https:\/\/github.com\/cloudhead\/less.js\/blob\/master\/lib\/less\/functions.js><\/span><\/p>\n

    function desaturate(color, amount) {<\/span>
\n        amount = (amount === 0) ? 0 : (amount || 10);<\/span>
\n        var hsl = tinycolor(color).toHsl();<\/span>
\n        hsl.s -= amount \/ 100;<\/span>
\n        hsl.s = clamp01(hsl.s);<\/span>
\n        return tinycolor(hsl);<\/span>
\n    }<\/span><\/p>\n

    function saturate(color, amount) {<\/span>
\n        amount = (amount === 0) ? 0 : (amount || 10);<\/span>
\n        var hsl = tinycolor(color).toHsl();<\/span>
\n        hsl.s += amount \/ 100;<\/span>
\n        hsl.s = clamp01(hsl.s);<\/span>
\n        return tinycolor(hsl);<\/span>
\n    }<\/span><\/p>\n

    function greyscale(color) {<\/span>
\n        return tinycolor(color).desaturate(100);<\/span>
\n    }<\/span><\/p>\n

    function lighten (color, amount) {<\/span>
\n        amount = (amount === 0) ? 0 : (amount || 10);<\/span>
\n        var hsl = tinycolor(color).toHsl();<\/span>
\n        hsl.l += amount \/ 100;<\/span>
\n        hsl.l = clamp01(hsl.l);<\/span>
\n        return tinycolor(hsl);<\/span>
\n    }<\/span><\/p>\n

    function brighten(color, amount) {<\/span>
\n        amount = (amount === 0) ? 0 : (amount || 10);<\/span>
\n        var rgb = tinycolor(color).toRgb();<\/span>
\n        rgb.r = mathMax(0, mathMin(255, rgb.r – mathRound(255 * – (amount \/ 100))));<\/span>
\n        rgb.g = mathMax(0, mathMin(255, rgb.g – mathRound(255 * – (amount \/ 100))));<\/span>
\n        rgb.b = mathMax(0, mathMin(255, rgb.b – mathRound(255 * – (amount \/ 100))));<\/span>
\n        return tinycolor(rgb);<\/span>
\n    }<\/span><\/p>\n

    function darken (color, amount) {<\/span>
\n        amount = (amount === 0) ? 0 : (amount || 10);<\/span>
\n        var hsl = tinycolor(color).toHsl();<\/span>
\n        hsl.l -= amount \/ 100;<\/span>
\n        hsl.l = clamp01(hsl.l);<\/span>
\n        return tinycolor(hsl);<\/span>
\n    }<\/span><\/p>\n

    \/\/ Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.<\/span>
\n    \/\/ Values outside of this range will be wrapped into this range.<\/span>
\n    function spin(color, amount) {<\/span>
\n        var hsl = tinycolor(color).toHsl();<\/span>
\n        var hue = (mathRound(hsl.h) + amount) % 360;<\/span>
\n        hsl.h = hue < 0 ? 360 + hue : hue;<\/span>
\n        return tinycolor(hsl);<\/span>
\n    }<\/span><\/p>\n

    \/\/ Combination Functions<\/span>
\n    \/\/ ———————<\/span>
\n    \/\/ Thanks to jQuery xColor for some of the ideas behind these<\/span>
\n    \/\/ <https:\/\/github.com\/infusion\/jQuery-xcolor\/blob\/master\/jquery.xcolor.js><\/span><\/p>\n

    function complement(color) {<\/span>
\n        var hsl = tinycolor(color).toHsl();<\/span>
\n        hsl.h = (hsl.h + 180) % 360;<\/span>
\n        return tinycolor(hsl);<\/span>
\n    }<\/span><\/p>\n

    function triad(color) {<\/span>
\n        var hsl = tinycolor(color).toHsl();<\/span>
\n        var h = hsl.h;<\/span>
\n        return [<\/span>
\n            tinycolor(color),<\/span>
\n            tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }),<\/span>
\n            tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l })<\/span>
\n        ];<\/span>
\n    }<\/span><\/p>\n

    function tetrad(color) {<\/span>
\n        var hsl = tinycolor(color).toHsl();<\/span>
\n        var h = hsl.h;<\/span>
\n        return [<\/span>
\n            tinycolor(color),<\/span>
\n            tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }),<\/span>
\n            tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }),<\/span>
\n            tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l })<\/span>
\n        ];<\/span>
\n    }<\/span><\/p>\n

    function splitcomplement(color) {<\/span>
\n        var hsl = tinycolor(color).toHsl();<\/span>
\n        var h = hsl.h;<\/span>
\n        return [<\/span>
\n            tinycolor(color),<\/span>
\n            tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}),<\/span>
\n            tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l})<\/span>
\n        ];<\/span>
\n    }<\/span><\/p>\n

    function analogous(color, results, slices) {<\/span>
\n        results = results || 6;<\/span>
\n        slices = slices || 30;<\/span><\/p>\n

        var hsl = tinycolor(color).toHsl();<\/span>
\n        var part = 360 \/ slices;<\/span>
\n        var ret = [tinycolor(color)];<\/span><\/p>\n

        for (hsl.h = ((hsl.h – (part * results >> 1)) + 720) % 360; –results; ) {<\/span>
\n            hsl.h = (hsl.h + part) % 360;<\/span>
\n            ret.push(tinycolor(hsl));<\/span>
\n        }<\/span>
\n        return ret;<\/span>
\n    }<\/span><\/p>\n

    function monochromatic(color, results) {<\/span>
\n        results = results || 6;<\/span>
\n        var hsv = tinycolor(color).toHsv();<\/span>
\n        var h = hsv.h, s = hsv.s, v = hsv.v;<\/span>
\n        var ret = [];<\/span>
\n        var modification = 1 \/ results;<\/span><\/p>\n

        while (results–) {<\/span>
\n            ret.push(tinycolor({ h: h, s: s, v: v}));<\/span>
\n            v = (v + modification) % 1;<\/span>
\n        }<\/span><\/p>\n

        return ret;<\/span>
\n    }<\/span><\/p>\n

    \/\/ Utility Functions<\/span>
\n    \/\/ ———————<\/span><\/p>\n

    tinycolor.mix = function(color1, color2, amount) {<\/span>
\n        amount = (amount === 0) ? 0 : (amount || 50);<\/span><\/p>\n

        var rgb1 = tinycolor(color1).toRgb();<\/span>
\n        var rgb2 = tinycolor(color2).toRgb();<\/span><\/p>\n

        var p = amount \/ 100;<\/span>
\n        var w = p * 2 – 1;<\/span>
\n        var a = rgb2.a – rgb1.a;<\/span><\/p>\n

        var w1;<\/span><\/p>\n

        if (w * a == -1) {<\/span>
\n            w1 = w;<\/span>
\n        } else {<\/span>
\n            w1 = (w + a) \/ (1 + w * a);<\/span>
\n        }<\/span><\/p>\n

        w1 = (w1 + 1) \/ 2;<\/span><\/p>\n

        var w2 = 1 – w1;<\/span><\/p>\n

        var rgba = {<\/span>
\n            r: rgb2.r * w1 + rgb1.r * w2,<\/span>
\n            g: rgb2.g * w1 + rgb1.g * w2,<\/span>
\n            b: rgb2.b * w1 + rgb1.b * w2,<\/span>
\n            a: rgb2.a * p  + rgb1.a * (1 – p)<\/span>
\n        };<\/span><\/p>\n

        return tinycolor(rgba);<\/span>
\n    };<\/span><\/p>\n

    \/\/ Readability Functions<\/span>
\n    \/\/ ———————<\/span>
\n    \/\/ <http:\/\/www.w3.org\/TR\/AERT#color-contrast><\/span><\/p>\n

    \/\/ `readability`<\/span>
\n    \/\/ Analyze the 2 colors and returns an object with the following properties:<\/span>
\n    \/\/    `brightness`: difference in brightness between the two colors<\/span>
\n    \/\/    `color`: difference in color\/hue between the two colors<\/span>
\n    tinycolor.readability = function(color1, color2) {<\/span>
\n        var c1 = tinycolor(color1);<\/span>
\n        var c2 = tinycolor(color2);<\/span>
\n        var rgb1 = c1.toRgb();<\/span>
\n        var rgb2 = c2.toRgb();<\/span>
\n        var brightnessA = c1.getBrightness();<\/span>
\n        var brightnessB = c2.getBrightness();<\/span>
\n        var colorDiff = (<\/span>
\n            Math.max(rgb1.r, rgb2.r) – Math.min(rgb1.r, rgb2.r) +<\/span>
\n            Math.max(rgb1.g, rgb2.g) – Math.min(rgb1.g, rgb2.g) +<\/span>
\n            Math.max(rgb1.b, rgb2.b) – Math.min(rgb1.b, rgb2.b)<\/span>
\n        );<\/span><\/p>\n

        return {<\/span>
\n            brightness: Math.abs(brightnessA – brightnessB),<\/span>
\n            color: colorDiff<\/span>
\n        };<\/span>
\n    };<\/span><\/p>\n

    \/\/ `readable`<\/span>
\n    \/\/ http:\/\/www.w3.org\/TR\/AERT#color-contrast<\/span>
\n    \/\/ Ensure that foreground and background color combinations provide sufficient contrast.<\/span>
\n    \/\/ *Example*<\/span>
\n    \/\/    tinycolor.isReadable(“#000”, “#111”) => false<\/span>
\n    tinycolor.isReadable = function(color1, color2) {<\/span>
\n        var readability = tinycolor.readability(color1, color2);<\/span>
\n        return readability.brightness > 125 && readability.color > 500;<\/span>
\n    };<\/span><\/p>\n

    \/\/ `mostReadable`<\/span>
\n    \/\/ Given a base color and a list of possible foreground or background<\/span>
\n    \/\/ colors for that base, returns the most readable color.<\/span>
\n    \/\/ *Example*<\/span>
\n    \/\/    tinycolor.mostReadable(“#123”, [“#fff”, “#000”]) => “#000”<\/span>
\n    tinycolor.mostReadable = function(baseColor, colorList) {<\/span>
\n        var bestColor = null;<\/span>
\n        var bestScore = 0;<\/span>
\n        var bestIsReadable = false;<\/span>
\n        for (var i=0; i < colorList.length; i++) {<\/span><\/p>\n

            \/\/ We normalize both around the “acceptable” breaking point,<\/span>
\n            \/\/ but rank brightness constrast higher than hue.<\/span><\/p>\n

            var readability = tinycolor.readability(baseColor, colorList[i]);<\/span>
\n            var readable = readability.brightness > 125 && readability.color > 500;<\/span>
\n            var score = 3 * (readability.brightness \/ 125) + (readability.color \/ 500);<\/span><\/p>\n

            if ((readable && ! bestIsReadable) ||<\/span>
\n                (readable && bestIsReadable && score > bestScore) ||<\/span>
\n                ((! readable) && (! bestIsReadable) && score > bestScore)) {<\/span>
\n                bestIsReadable = readable;<\/span>
\n                bestScore = score;<\/span>
\n                bestColor = tinycolor(colorList[i]);<\/span>
\n            }<\/span>
\n        }<\/span>
\n        return bestColor;<\/span>
\n    };<\/span><\/p>\n

    \/\/ Big List of Colors<\/span>
\n    \/\/ ——————<\/span>
\n    \/\/ <http:\/\/www.w3.org\/TR\/css3-color\/#svg-color><\/span>
\n    var names = tinycolor.names = {<\/span>
\n        aliceblue: “f0f8ff”,<\/span>
\n        antiquewhite: “faebd7”,<\/span>
\n        aqua: “0ff”,<\/span>
\n        aquamarine: “7fffd4”,<\/span>
\n        azure: “f0ffff”,<\/span>
\n        beige: “f5f5dc”,<\/span>
\n        bisque: “ffe4c4”,<\/span>
\n        black: “000”,<\/span>
\n        blanchedalmond: “ffebcd”,<\/span>
\n        blue: “00f”,<\/span>
\n        blueviolet: “8a2be2”,<\/span>
\n        brown: “a52a2a”,<\/span>
\n        burlywood: “deb887”,<\/span>
\n        burntsienna: “ea7e5d”,<\/span>
\n        cadetblue: “5f9ea0”,<\/span>
\n        chartreuse: “7fff00”,<\/span>
\n        chocolate: “d2691e”,<\/span>
\n        coral: “ff7f50”,<\/span>
\n        cornflowerblue: “6495ed”,<\/span>
\n        cornsilk: “fff8dc”,<\/span>
\n        crimson: “dc143c”,<\/span>
\n        cyan: “0ff”,<\/span>
\n        darkblue: “00008b”,<\/span>
\n        darkcyan: “008b8b”,<\/span>
\n        darkgoldenrod: “b8860b”,<\/span>
\n        darkgray: “a9a9a9”,<\/span>
\n        darkgreen: “006400”,<\/span>
\n        darkgrey: “a9a9a9”,<\/span>
\n        darkkhaki: “bdb76b”,<\/span>
\n        darkmagenta: “8b008b”,<\/span>
\n        darkolivegreen: “556b2f”,<\/span>
\n        darkorange: “ff8c00”,<\/span>
\n        darkorchid: “9932cc”,<\/span>
\n        darkred: “8b0000”,<\/span>
\n        darksalmon: “e9967a”,<\/span>
\n        darkseagreen: “8fbc8f”,<\/span>
\n        darkslateblue: “483d8b”,<\/span>
\n        darkslategray: “2f4f4f”,<\/span>
\n        darkslategrey: “2f4f4f”,<\/span>
\n        darkturquoise: “00ced1”,<\/span>
\n        darkviolet: “9400d3”,<\/span>
\n        deeppink: “ff1493”,<\/span>
\n        deepskyblue: “00bfff”,<\/span>
\n        dimgray: “696969”,<\/span>
\n        dimgrey: “696969”,<\/span>
\n        dodgerblue: “1e90ff”,<\/span>
\n        firebrick: “b22222”,<\/span>
\n        floralwhite: “fffaf0”,<\/span>
\n        forestgreen: “228b22”,<\/span>
\n        fuchsia: “f0f”,<\/span>
\n        gainsboro: “dcdcdc”,<\/span>
\n        ghostwhite: “f8f8ff”,<\/span>
\n        gold: “ffd700”,<\/span>
\n        goldenrod: “daa520”,<\/span>
\n        gray: “808080”,<\/span>
\n        green: “008000”,<\/span>
\n        greenyellow: “adff2f”,<\/span>
\n        grey: “808080”,<\/span>
\n        honeydew: “f0fff0”,<\/span>
\n        hotpink: “ff69b4”,<\/span>
\n        indianred: “cd5c5c”,<\/span>
\n        indigo: “4b0082”,<\/span>
\n        ivory: “fffff0”,<\/span>
\n        khaki: “f0e68c”,<\/span>
\n        lavender: “e6e6fa”,<\/span>
\n        lavenderblush: “fff0f5”,<\/span>
\n        lawngreen: “7cfc00”,<\/span>
\n        lemonchiffon: “fffacd”,<\/span>
\n        lightblue: “add8e6”,<\/span>
\n        lightcoral: “f08080”,<\/span>
\n        lightcyan: “e0ffff”,<\/span>
\n        lightgoldenrodyellow: “fafad2”,<\/span>
\n        lightgray: “d3d3d3”,<\/span>
\n        lightgreen: “90ee90”,<\/span>
\n        lightgrey: “d3d3d3”,<\/span>
\n        lightpink: “ffb6c1”,<\/span>
\n        lightsalmon: “ffa07a”,<\/span>
\n        lightseagreen: “20b2aa”,<\/span>
\n        lightskyblue: “87cefa”,<\/span>
\n        lightslategray: “789”,<\/span>
\n        lightslategrey: “789”,<\/span>
\n        lightsteelblue: “b0c4de”,<\/span>
\n        lightyellow: “ffffe0”,<\/span>
\n        lime: “0f0”,<\/span>
\n        limegreen: “32cd32”,<\/span>
\n        linen: “faf0e6”,<\/span>
\n        magenta: “f0f”,<\/span>
\n        maroon: “800000”,<\/span>
\n        mediumaquamarine: “66cdaa”,<\/span>
\n        mediumblue: “0000cd”,<\/span>
\n        mediumorchid: “ba55d3”,<\/span>
\n        mediumpurple: “9370db”,<\/span>
\n        mediumseagreen: “3cb371”,<\/span>
\n        mediumslateblue: “7b68ee”,<\/span>
\n        mediumspringgreen: “00fa9a”,<\/span>
\n        mediumturquoise: “48d1cc”,<\/span>
\n        mediumvioletred: “c71585”,<\/span>
\n        midnightblue: “191970”,<\/span>
\n        mintcream: “f5fffa”,<\/span>
\n        mistyrose: “ffe4e1”,<\/span>
\n        moccasin: “ffe4b5”,<\/span>
\n        navajowhite: “ffdead”,<\/span>
\n        navy: “000080”,<\/span>
\n        oldlace: “fdf5e6”,<\/span>
\n        olive: “808000”,<\/span>
\n        olivedrab: “6b8e23”,<\/span>
\n        orange: “ffa500”,<\/span>
\n        orangered: “ff4500”,<\/span>
\n        orchid: “da70d6”,<\/span>
\n        palegoldenrod: “eee8aa”,<\/span>
\n        palegreen: “98fb98”,<\/span>
\n        paleturquoise: “afeeee”,<\/span>
\n        palevioletred: “db7093”,<\/span>
\n        papayawhip: “ffefd5”,<\/span>
\n        peachpuff: “ffdab9”,<\/span>
\n        peru: “cd853f”,<\/span>
\n        pink: “ffc0cb”,<\/span>
\n        plum: “dda0dd”,<\/span>
\n        powderblue: “b0e0e6”,<\/span>
\n        purple: “800080”,<\/span>
\n        rebeccapurple: “663399”,<\/span>
\n        red: “f00”,<\/span>
\n        rosybrown: “bc8f8f”,<\/span>
\n        royalblue: “4169e1”,<\/span>
\n        saddlebrown: “8b4513”,<\/span>
\n        salmon: “fa8072”,<\/span>
\n        sandybrown: “f4a460”,<\/span>
\n        seagreen: “2e8b57”,<\/span>
\n        seashell: “fff5ee”,<\/span>
\n        sienna: “a0522d”,<\/span>
\n        silver: “c0c0c0”,<\/span>
\n        skyblue: “87ceeb”,<\/span>
\n        slateblue: “6a5acd”,<\/span>
\n        slategray: “708090”,<\/span>
\n        slategrey: “708090”,<\/span>
\n        snow: “fffafa”,<\/span>
\n        springgreen: “00ff7f”,<\/span>
\n        steelblue: “4682b4”,<\/span>
\n        tan: “d2b48c”,<\/span>
\n        teal: “008080”,<\/span>
\n        thistle: “d8bfd8”,<\/span>
\n        tomato: “ff6347”,<\/span>
\n        turquoise: “40e0d0”,<\/span>
\n        violet: “ee82ee”,<\/span>
\n        wheat: “f5deb3”,<\/span>
\n        white: “fff”,<\/span>
\n        whitesmoke: “f5f5f5”,<\/span>
\n        yellow: “ff0”,<\/span>
\n        yellowgreen: “9acd32”<\/span>
\n    };<\/span><\/p>\n

    \/\/ Make it easy to access colors via `hexNames[hex]`<\/span>
\n    var hexNames = tinycolor.hexNames = flip(names);<\/span><\/p>\n

    \/\/ Utilities<\/span>
\n    \/\/ ———<\/span><\/p>\n

    \/\/ `{ ‘name1’: ‘val1’ }` becomes `{ ‘val1’: ‘name1’ }`<\/span>
\n    function flip(o) {<\/span>
\n        var flipped = { };<\/span>
\n        for (var i in o) {<\/span>
\n            if (o.hasOwnProperty(i)) {<\/span>
\n                flipped[o[i]] = i;<\/span>
\n            }<\/span>
\n        }<\/span>
\n        return flipped;<\/span>
\n    }<\/span><\/p>\n

    \/\/ Return a valid alpha value [0,1] with all invalid values being set to 1<\/span>
\n    function boundAlpha(a) {<\/span>
\n        a = parseFloat(a);<\/span><\/p>\n

        if (isNaN(a) || a < 0 || a > 1) {<\/span>
\n            a = 1;<\/span>
\n        }<\/span><\/p>\n

        return a;<\/span>
\n    }<\/span><\/p>\n

    \/\/ Take input from [0, n] and return it as [0, 1]<\/span>
\n    function bound01(n, max) {<\/span>
\n        if (isOnePointZero(n)) { n = “100%”; }<\/span><\/p>\n

        var processPercent = isPercentage(n);<\/span>
\n        n = mathMin(max, mathMax(0, parseFloat(n)));<\/span><\/p>\n

        \/\/ Automatically convert percentage into number<\/span>
\n        if (processPercent) {<\/span>
\n            n = parseInt(n * max, 10) \/ 100;<\/span>
\n        }<\/span><\/p>\n

        \/\/ Handle floating point rounding errors<\/span>
\n        if ((math.abs(n – max) < 0.000001)) {<\/span>
\n            return 1;<\/span>
\n        }<\/span><\/p>\n

        \/\/ Convert into [0, 1] range if it isn’t already<\/span>
\n        return (n % max) \/ parseFloat(max);<\/span>
\n    }<\/span><\/p>\n

    \/\/ Force a number between 0 and 1<\/span>
\n    function clamp01(val) {<\/span>
\n        return mathMin(1, mathMax(0, val));<\/span>
\n    }<\/span><\/p>\n

    \/\/ Parse a base-16 hex value into a base-10 integer<\/span>
\n    function parseIntFromHex(val) {<\/span>
\n        return parseInt(val, 16);<\/span>
\n    }<\/span><\/p>\n

    \/\/ Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1<\/span>
\n    \/\/ <http:\/\/stackoverflow.com\/questions\/7422072\/javascript-how-to-detect-number-as-a-decimal-including-1-0><\/span>
\n    function isOnePointZero(n) {<\/span>
\n        return typeof n == “string” && n.indexOf(‘.’) != -1 && parseFloat(n) === 1;<\/span>
\n    }<\/span><\/p>\n

    \/\/ Check to see if string passed in is a percentage<\/span>
\n    function isPercentage(n) {<\/span>
\n        return typeof n === “string” && n.indexOf(‘%’) != -1;<\/span>
\n    }<\/span><\/p>\n

    \/\/ Force a hex value to have 2 characters<\/span>
\n    function pad2(c) {<\/span>
\n        return c.length == 1 ? ‘0’ + c : ” + c;<\/span>
\n    }<\/span><\/p>\n

    \/\/ Replace a decimal with it’s percentage value<\/span>
\n    function convertToPercentage(n) {<\/span>
\n        if (n <= 1) {<\/span>
\n            n = (n * 100) + “%”;<\/span>
\n        }<\/span><\/p>\n

        return n;<\/span>
\n    }<\/span><\/p>\n

    \/\/ Converts a decimal to a hex value<\/span>
\n    function convertDecimalToHex(d) {<\/span>
\n        return Math.round(parseFloat(d) * 255).toString(16);<\/span>
\n    }<\/span>
\n    \/\/ Converts a hex value to a decimal<\/span>
\n    function convertHexToDecimal(h) {<\/span>
\n        return (parseIntFromHex(h) \/ 255);<\/span>
\n    }<\/span><\/p>\n

    var matchers = (function() {<\/span><\/p>\n

        \/\/ <http:\/\/www.w3.org\/TR\/css3-values\/#integers><\/span>
\n        var CSS_INTEGER = “[-\\+]?\\d+%?”;<\/span><\/p>\n

        \/\/ <http:\/\/www.w3.org\/TR\/css3-values\/#number-value><\/span>
\n        var CSS_NUMBER = “[-\\+]?\\d*\\.\\d+%?”;<\/span><\/p>\n

        \/\/ Allow positive\/negative integer\/number.  Don’t capture the either\/or, just the entire outcome.<\/span>
\n        var CSS_UNIT = “(?:” + CSS_NUMBER + “)|(?:” + CSS_INTEGER + “)”;<\/span><\/p>\n

        \/\/ Actual matching.<\/span>
\n        \/\/ Parentheses and commas are optional, but not required.<\/span>
\n        \/\/ Whitespace can take the place of commas or opening paren<\/span>
\n        var PERMISSIVE_MATCH3 = “[\\s|\\(]+(” + CSS_UNIT + “)[,|\\s]+(” + CSS_UNIT + “)[,|\\s]+(” + CSS_UNIT + “)\\s*\\)?”;<\/span>
\n        var PERMISSIVE_MATCH4 = “[\\s|\\(]+(” + CSS_UNIT + “)[,|\\s]+(” + CSS_UNIT + “)[,|\\s]+(” + CSS_UNIT + “)[,|\\s]+(” + CSS_UNIT + “)\\s*\\)?”;<\/span><\/p>\n

        return {<\/span>
\n            rgb: new RegExp(“rgb” + PERMISSIVE_MATCH3),<\/span>
\n            rgba: new RegExp(“rgba” + PERMISSIVE_MATCH4),<\/span>
\n            hsl: new RegExp(“hsl” + PERMISSIVE_MATCH3),<\/span>
\n            hsla: new RegExp(“hsla” + PERMISSIVE_MATCH4),<\/span>
\n            hsv: new RegExp(“hsv” + PERMISSIVE_MATCH3),<\/span>
\n            hsva: new RegExp(“hsva” + PERMISSIVE_MATCH4),<\/span>
\n            hex3: \/^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$\/,<\/span>
\n            hex6: \/^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$\/,<\/span>
\n            hex8: \/^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$\/<\/span>
\n        };<\/span>
\n    })();<\/span><\/p>\n

    \/\/ `stringInputToObject`<\/span>
\n    \/\/ Permissive string parsing.  Take in a number of formats, and output an object<\/span>
\n    \/\/ based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`<\/span>
\n    function stringInputToObject(color) {<\/span><\/p>\n

        color = color.replace(trimLeft,”).replace(trimRight, ”).toLowerCase();<\/span>
\n        var named = false;<\/span>
\n        if (names[color]) {<\/span>
\n            color = names[color];<\/span>
\n            named = true;<\/span>
\n        }<\/span>
\n        else if (color == ‘transparent’) {<\/span>
\n            return { r: 0, g: 0, b: 0, a: 0, format: “name” };<\/span>
\n        }<\/span><\/p>\n

        \/\/ Try to match string input using regular expressions.<\/span>
\n        \/\/ Keep most of the number bounding out of this function – don’t worry about [0,1] or [0,100] or [0,360]<\/span>
\n        \/\/ Just return an object and let the conversion functions handle that.<\/span>
\n        \/\/ This way the result will be the same whether the tinycolor is initialized with string or object.<\/span>
\n        var match;<\/span>
\n        if ((match = matchers.rgb.exec(color))) {<\/span>
\n            return { r: match[1], g: match[2], b: match[3] };<\/span>
\n        }<\/span>
\n        if ((match = matchers.rgba.exec(color))) {<\/span>
\n            return { r: match[1], g: match[2], b: match[3], a: match[4] };<\/span>
\n        }<\/span>
\n        if ((match = matchers.hsl.exec(color))) {<\/span>
\n            return { h: match[1], s: match[2], l: match[3] };<\/span>
\n        }<\/span>
\n        if ((match = matchers.hsla.exec(color))) {<\/span>
\n            return { h: match[1], s: match[2], l: match[3], a: match[4] };<\/span>
\n        }<\/span>
\n        if ((match = matchers.hsv.exec(color))) {<\/span>
\n            return { h: match[1], s: match[2], v: match[3] };<\/span>
\n        }<\/span>
\n        if ((match = matchers.hsva.exec(color))) {<\/span>
\n            return { h: match[1], s: match[2], v: match[3], a: match[4] };<\/span>
\n        }<\/span>
\n        if ((match = matchers.hex8.exec(color))) {<\/span>
\n            return {<\/span>
\n                a: convertHexToDecimal(match[1]),<\/span>
\n                r: parseIntFromHex(match[2]),<\/span>
\n                g: parseIntFromHex(match[3]),<\/span>
\n                b: parseIntFromHex(match[4]),<\/span>
\n                format: named ? “name” : “hex8”<\/span>
\n            };<\/span>
\n        }<\/span>
\n        if ((match = matchers.hex6.exec(color))) {<\/span>
\n            return {<\/span>
\n                r: parseIntFromHex(match[1]),<\/span>
\n                g: parseIntFromHex(match[2]),<\/span>
\n                b: parseIntFromHex(match[3]),<\/span>
\n                format: named ? “name” : “hex”<\/span>
\n            };<\/span>
\n        }<\/span>
\n        if ((match = matchers.hex3.exec(color))) {<\/span>
\n            return {<\/span>
\n                r: parseIntFromHex(match[1] + ” + match[1]),<\/span>
\n                g: parseIntFromHex(match[2] + ” + match[2]),<\/span>
\n                b: parseIntFromHex(match[3] + ” + match[3]),<\/span>
\n                format: named ? “name” : “hex”<\/span>
\n            };<\/span>
\n        }<\/span><\/p>\n

        return false;<\/span>
\n    }<\/span><\/p>\n

    window.tinycolor = tinycolor;<\/span>
\n    })();<\/span><\/p>\n

    $(function () {<\/span>
\n        if ($.fn.spectrum.load) {<\/span>
\n            $.fn.spectrum.processNativeColorInputs();<\/span>
\n        }<\/span>
\n    });<\/span><\/p>\n

});<\/span>
\n
\n<\/span>Copy above code in script.js file.<\/b>
\n
\n<\/b>Style.css<\/span><\/b>
\n
\n<\/b>The style.css defines the css for the color picker plugin.
\n
\n<\/b>The following code represents the style.css file.<\/b>
\n
\n<\/b>.sp-container {<\/span>
\n    position:absolute;<\/span>
\n    top:0;<\/span>
\n    left:0;<\/span>
\n    display:inline-block;<\/span>
\n    *display: inline;<\/span>
\n    *zoom: 1;<\/span>
\n    \/* https:\/\/github.com\/bgrins\/spectrum\/issues\/40 *\/<\/span>
\n    z-index: 9999994;<\/span>
\n    overflow: hidden;<\/span>
\n}<\/span>
\n.sp-container.sp-flat {<\/span>
\n    position: relative;<\/span>
\n}<\/span><\/p>\n

\/* Fix for * { box-sizing: border-box; } *\/<\/span>
\n.sp-container,<\/span>
\n.sp-container * {<\/span>
\n    -webkit-box-sizing: content-box;<\/span>
\n       -moz-box-sizing: content-box;<\/span>
\n            box-sizing: content-box;<\/span>
\n}<\/span><\/p>\n

\/* http:\/\/ansciath.tumblr.com\/post\/7347495869\/css-aspect-ratio *\/<\/span>
\n.sp-top {<\/span>
\n  position:relative;<\/span>
\n  width: 100%;<\/span>
\n  display:inline-block;<\/span>
\n}<\/span>
\n.sp-top-inner {<\/span>
\n   position:absolute;<\/span>
\n   top:0;<\/span>
\n   left:0;<\/span>
\n   bottom:0;<\/span>
\n   right:0;<\/span>
\n}<\/span>
\n.sp-color {<\/span>
\n    position: absolute;<\/span>
\n    top:0;<\/span>
\n    left:0;<\/span>
\n    bottom:0;<\/span>
\n    right:20%;<\/span>
\n}<\/span>
\n.sp-hue {<\/span>
\n    position: absolute;<\/span>
\n    top:0;<\/span>
\n    right:0;<\/span>
\n    bottom:0;<\/span>
\n    left:84%;<\/span>
\n    height: 100%;<\/span>
\n}<\/span><\/p>\n

.sp-clear-enabled .sp-hue {<\/span>
\n    top:33px;<\/span>
\n    height: 77.5%;<\/span>
\n}<\/span><\/p>\n

.sp-fill {<\/span>
\n    padding-top: 80%;<\/span>
\n}<\/span>
\n.sp-sat, .sp-val {<\/span>
\n    position: absolute;<\/span>
\n    top:0;<\/span>
\n    left:0;<\/span>
\n    right:0;<\/span>
\n    bottom:0;<\/span>
\n}<\/span><\/p>\n

.sp-alpha-enabled .sp-top {<\/span>
\n    margin-bottom: 18px;<\/span>
\n}<\/span>
\n.sp-alpha-enabled .sp-alpha {<\/span>
\n    display: block;<\/span>
\n}<\/span>
\n.sp-alpha-handle {<\/span>
\n    position:absolute;<\/span>
\n    top:-4px;<\/span>
\n    bottom: -4px;<\/span>
\n    width: 6px;<\/span>
\n    left: 50%;<\/span>
\n    cursor: pointer;<\/span>
\n    border: 1px solid black;<\/span>
\n    background: white;<\/span>
\n    opacity: .8;<\/span>
\n}<\/span>
\n.sp-alpha {<\/span>
\n    display: none;<\/span>
\n    position: absolute;<\/span>
\n    bottom: -14px;<\/span>
\n    right: 0;<\/span>
\n    left: 0;<\/span>
\n    height: 8px;<\/span>
\n}<\/span>
\n.sp-alpha-inner {<\/span>
\n    border: solid 1px #333;<\/span>
\n}<\/span><\/p>\n

.sp-clear {<\/span>
\n    display: none;<\/span>
\n}<\/span><\/p>\n

.sp-clear.sp-clear-display {<\/span>
\n    background-position: center;<\/span>
\n}<\/span><\/p>\n

.sp-clear-enabled .sp-clear {<\/span>
\n    display: block;<\/span>
\n    position:absolute;<\/span>
\n    top:0px;<\/span>
\n    right:0;<\/span>
\n    bottom:0;<\/span>
\n    left:84%;<\/span>
\n    height: 28px;<\/span>
\n}<\/span><\/p>\n

\/* Don’t allow text selection *\/<\/span>
\n.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {<\/span>
\n    -webkit-user-select:none;<\/span>
\n    -moz-user-select: -moz-none;<\/span>
\n    -o-user-select:none;<\/span>
\n    user-select: none;<\/span>
\n}<\/span><\/p>\n

.sp-container.sp-input-disabled .sp-input-container {<\/span>
\n    display: none;<\/span>
\n}<\/span>
\n.sp-container.sp-buttons-disabled .sp-button-container {<\/span>
\n    display: none;<\/span>
\n}<\/span>
\n.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {<\/span>
\n    display: none;<\/span>
\n}<\/span>
\n.sp-palette-only .sp-picker-container {<\/span>
\n    display: none;<\/span>
\n}<\/span>
\n.sp-palette-disabled .sp-palette-container {<\/span>
\n    display: none;<\/span>
\n}<\/span><\/p>\n

.sp-initial-disabled .sp-initial {<\/span>
\n    display: none;<\/span>
\n}<\/span><\/p>\n

\/* Gradients for hue, saturation and value instead of images.  Not pretty… but it works *\/<\/span>
\n.sp-sat {<\/span>
\n    background-image: -webkit-gradient(linear,  0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));<\/span>
\n    background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));<\/span>
\n    background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));<\/span>
\n    background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));<\/span>
\n    background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));<\/span>
\n    background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));<\/span>
\n    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)”;<\/span>
\n    filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=’#FFFFFFFF’, endColorstr=’#00CC9A81′);<\/span>
\n}<\/span>
\n.sp-val {<\/span>
\n    background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));<\/span>
\n    background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));<\/span>
\n    background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));<\/span>
\n    background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));<\/span>
\n    background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));<\/span>
\n    background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));<\/span>
\n    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)”;<\/span>
\n    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr=’#00CC9A81′, endColorstr=’#FF000000′);<\/span>
\n}<\/span><\/p>\n

.sp-hue {<\/span>
\n    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);<\/span>
\n    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);<\/span>
\n    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);<\/span>
\n    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));<\/span>
\n    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);<\/span>
\n    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);<\/span>
\n}<\/span><\/p>\n

\/* IE filters do not support multiple color stops.<\/span>
\n   Generate 6 divs, line them up, and do two color gradients for each.<\/span>
\n   Yes, really.<\/span>
\n *\/<\/span>
\n.sp-1 {<\/span>
\n    height:17%;<\/span>
\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff0000′, endColorstr=’#ffff00′);<\/span>
\n}<\/span>
\n.sp-2 {<\/span>
\n    height:16%;<\/span>
\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffff00′, endColorstr=’#00ff00′);<\/span>
\n}<\/span>
\n.sp-3 {<\/span>
\n    height:17%;<\/span>
\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#00ff00′, endColorstr=’#00ffff’);<\/span>
\n}<\/span>
\n.sp-4 {<\/span>
\n    height:17%;<\/span>
\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#00ffff’, endColorstr=’#0000ff’);<\/span>
\n}<\/span>
\n.sp-5 {<\/span>
\n    height:16%;<\/span>
\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#0000ff’, endColorstr=’#ff00ff’);<\/span>
\n}<\/span>
\n.sp-6 {<\/span>
\n    height:17%;<\/span>
\n    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff00ff’, endColorstr=’#ff0000′);<\/span>
\n}<\/span><\/p>\n

.sp-hidden {<\/span>
\n    display: none !important;<\/span>
\n}<\/span><\/p>\n

\/* Clearfix hack *\/<\/span>
\n.sp-cf:before, .sp-cf:after { content: “”; display: table; }<\/span>
\n.sp-cf:after { clear: both; }<\/span>
\n.sp-cf { *zoom: 1; }<\/span><\/p>\n

\/* Mobile devices, make hue slider bigger so it is easier to slide *\/<\/span>
\n@media (max-device-width: 480px) {<\/span>
\n    .sp-color { right: 40%; }<\/span>
\n    .sp-hue { left: 63%; }<\/span>
\n    .sp-fill { padding-top: 60%; }<\/span>
\n}<\/span>
\n.sp-dragger {<\/span>
\n   border-radius: 5px;<\/span>
\n   height: 5px;<\/span>
\n   width: 5px;<\/span>
\n   border: 1px solid #fff;<\/span>
\n   background: #000;<\/span>
\n   cursor: pointer;<\/span>
\n   position:absolute;<\/span>
\n   top:0;<\/span>
\n   left: 0;<\/span>
\n}<\/span>
\n.sp-slider {<\/span>
\n    position: absolute;<\/span>
\n    top:0;<\/span>
\n    cursor:pointer;<\/span>
\n    height: 3px;<\/span>
\n    left: -1px;<\/span>
\n    right: -1px;<\/span>
\n    border: 1px solid #000;<\/span>
\n    background: white;<\/span>
\n    opacity: .8;<\/span>
\n}<\/span><\/p>\n

\/*<\/span>
\nTheme authors:<\/span>
\nHere are the basic themeable display options (colors, fonts, global widths).<\/span>
\nSee http:\/\/bgrins.github.io\/spectrum\/themes\/ for instructions.<\/span>
\n*\/<\/span><\/p>\n

.sp-container {<\/span>
\n    border-radius: 0;<\/span>
\n    background-color: #ECECEC;<\/span>
\n    border: solid 1px #f0c49B;<\/span>
\n    padding: 0;<\/span>
\n}<\/span>
\n.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {<\/span>
\n    font: normal 12px “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Geneva, Verdana, sans-serif;<\/span>
\n    -webkit-box-sizing: border-box;<\/span>
\n    -moz-box-sizing: border-box;<\/span>
\n    -ms-box-sizing: border-box;<\/span>
\n    box-sizing: border-box;<\/span>
\n}<\/span>
\n.sp-top {<\/span>
\n    margin-bottom: 3px;<\/span>
\n}<\/span>
\n.sp-color, .sp-hue, .sp-clear {<\/span>
\n    border: solid 1px #666;<\/span>
\n}<\/span><\/p>\n

\/* Input *\/<\/span>
\n.sp-input-container {<\/span>
\n    float:right;<\/span>
\n    width: 100px;<\/span>
\n    margin-bottom: 4px;<\/span>
\n}<\/span>
\n.sp-initial-disabled  .sp-input-container {<\/span>
\n    width: 100%;<\/span>
\n}<\/span>
\n.sp-input {<\/span>
\n   font-size: 12px !important;<\/span>
\n   border: 1px inset;<\/span>
\n   padding: 4px 5px;<\/span>
\n   margin: 0;<\/span>
\n   width: 100%;<\/span>
\n   background:transparent;<\/span>
\n   border-radius: 3px;<\/span>
\n   color: #222;<\/span>
\n}<\/span>
\n.sp-input:focus  {<\/span>
\n    border: 1px solid orange;<\/span>
\n}<\/span>
\n.sp-input.sp-validation-error {<\/span>
\n    border: 1px solid red;<\/span>
\n    background: #fdd;<\/span>
\n}<\/span>
\n.sp-picker-container , .sp-palette-container {<\/span>
\n    float:left;<\/span>
\n    position: relative;<\/span>
\n    padding: 10px;<\/span>
\n    padding-bottom: 300px;<\/span>
\n    margin-bottom: -290px;<\/span>
\n}<\/span>
\n.sp-picker-container {<\/span>
\n    width: 172px;<\/span>
\n    border-left: solid 1px #fff;<\/span>
\n}<\/span><\/p>\n

\/* Palettes *\/<\/span>
\n.sp-palette-container {<\/span>
\n    border-right: solid 1px #ccc;<\/span>
\n}<\/span><\/p>\n

.sp-palette-only .sp-palette-container {<\/span>
\n    border: 0;<\/span>
\n}<\/span><\/p>\n

.sp-palette .sp-thumb-el {<\/span>
\n    display: block;<\/span>
\n    position:relative;<\/span>
\n    float:left;<\/span>
\n    width: 24px;<\/span>
\n    height: 15px;<\/span>
\n    margin: 3px;<\/span>
\n    cursor: pointer;<\/span>
\n    border:solid 2px transparent;<\/span>
\n}<\/span>
\n.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {<\/span>
\n    border-color: orange;<\/span>
\n}<\/span>
\n.sp-thumb-el {<\/span>
\n    position:relative;<\/span>
\n}<\/span><\/p>\n

\/* Initial *\/<\/span>
\n.sp-initial {<\/span>
\n    float: left;<\/span>
\n    border: solid 1px #333;<\/span>
\n}<\/span>
\n.sp-initial span {<\/span>
\n    width: 30px;<\/span>
\n    height: 25px;<\/span>
\n    border:none;<\/span>
\n    display:block;<\/span>
\n    float:left;<\/span>
\n    margin:0;<\/span>
\n}<\/span><\/p>\n

.sp-initial .sp-clear-display {<\/span>
\n    background-position: center;<\/span>
\n}<\/span><\/p>\n

\/* Buttons *\/<\/span>
\n.sp-palette-button-container,<\/span>
\n.sp-button-container {<\/span>
\n    float: right;<\/span>
\n}<\/span><\/p>\n

\/* Replacer (the little preview div that shows up instead of the <input>) *\/<\/span>
\n.sp-replacer {<\/span>
\n    margin:0;<\/span>
\n    overflow:hidden;<\/span>
\n    cursor:pointer;<\/span>
\n    padding: 4px;<\/span>
\n    display:inline-block;<\/span>
\n    *zoom: 1;<\/span>
\n    *display: inline;<\/span>
\n    border: solid 1px #91765d;<\/span>
\n    background: #eee;<\/span>
\n    color: #333;<\/span>
\n    vertical-align: middle;<\/span>
\n}<\/span>
\n.sp-replacer:hover, .sp-replacer.sp-active {<\/span>
\n    border-color: #F0C49B;<\/span>
\n    color: #111;<\/span>
\n}<\/span>
\n.sp-replacer.sp-disabled {<\/span>
\n    cursor:default;<\/span>
\n    border-color: silver;<\/span>
\n    color: silver;<\/span>
\n}<\/span>
\n.sp-dd {<\/span>
\n    padding: 2px 0;<\/span>
\n    height: 16px;<\/span>
\n    line-height: 16px;<\/span>
\n    float:left;<\/span>
\n    font-size:10px;<\/span>
\n}<\/span>
\n.sp-preview {<\/span>
\n    position:relative;<\/span>
\n    width:25px;<\/span>
\n    height: 20px;<\/span>
\n    border: solid 1px #222;<\/span>
\n    margin-right: 5px;<\/span>
\n    float:left;<\/span>
\n    z-index: 0;<\/span>
\n}<\/span><\/p>\n

.sp-palette {<\/span>
\n    *width: 220px;<\/span>
\n    max-width: 220px;<\/span>
\n}<\/span>
\n.sp-palette .sp-thumb-el {<\/span>
\n    width:16px;<\/span>
\n    height: 16px;<\/span>
\n    margin:2px 1px;<\/span>
\n    border: solid 1px #d0d0d0;<\/span>
\n}<\/span><\/p>\n

.sp-container {<\/span>
\n    padding-bottom:0;<\/span>
\n}<\/span><\/p>\n

\/* Buttons: http:\/\/hellohappy.org\/css3-buttons\/ *\/<\/span>
\n.sp-container button {<\/span>
\n  background-color: #eeeeee;<\/span>
\n  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);<\/span>
\n  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);<\/span>
\n  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);<\/span>
\n  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);<\/span>
\n  background-image: linear-gradient(to bottom, #eeeeee, #cccccc);<\/span>
\n  border: 1px solid #ccc;<\/span>
\n  border-bottom: 1px solid #bbb;<\/span>
\n  border-radius: 3px;<\/span>
\n  color: #333;<\/span>
\n  font-size: 14px;<\/span>
\n  line-height: 1;<\/span>
\n  padding: 5px 4px;<\/span>
\n  text-align: center;<\/span>
\n  text-shadow: 0 1px 0 #eee;<\/span>
\n  vertical-align: middle;<\/span>
\n}<\/span>
\n.sp-container button:hover {<\/span>
\n    background-color: #dddddd;<\/span>
\n    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);<\/span>
\n    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);<\/span>
\n    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);<\/span>
\n    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);<\/span>
\n    background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);<\/span>
\n    border: 1px solid #bbb;<\/span>
\n    border-bottom: 1px solid #999;<\/span>
\n    cursor: pointer;<\/span>
\n    text-shadow: 0 1px 0 #ddd;<\/span>
\n}<\/span>
\n.sp-container button:active {<\/span>
\n    border: 1px solid #aaa;<\/span>
\n    border-bottom: 1px solid #888;<\/span>
\n    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;<\/span>
\n    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;<\/span>
\n    -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;<\/span>
\n    -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;<\/span>
\n    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;<\/span>
\n}<\/span>
\n.sp-cancel {<\/span>
\n    font-size: 11px;<\/span>
\n    color: #d93f3f !important;<\/span>
\n    margin:0;<\/span>
\n    padding:2px;<\/span>
\n    margin-right: 5px;<\/span>
\n    vertical-align: middle;<\/span>
\n    text-decoration:none;<\/span><\/p>\n

}<\/span>
\n.sp-cancel:hover {<\/span>
\n    color: #d93f3f !important;<\/span>
\n    text-decoration: underline;<\/span>
\n}<\/span><\/p>\n

.sp-palette span:hover, .sp-palette span.sp-thumb-active {<\/span>
\n    border-color: #000;<\/span>
\n}<\/span><\/p>\n

.sp-preview, .sp-alpha, .sp-thumb-el {<\/span>
\n    position:relative;<\/span>
\n    background-image: url(data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);<\/span>
\n}<\/span>
\n.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {<\/span>
\n    display:block;<\/span>
\n    position:absolute;<\/span>
\n    top:0;left:0;bottom:0;right:0;<\/span>
\n}<\/span><\/p>\n

.sp-palette .sp-thumb-inner {<\/span>
\n    background-position: 50% 50%;<\/span>
\n    background-repeat: no-repeat;<\/span>
\n}<\/span><\/p>\n

.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {<\/span>
\n    background-image: url(data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi\/0DsT64h8UD8HmpIPCWG\/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);<\/span>
\n}<\/span><\/p>\n

.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {<\/span>
\n    background-image: url(data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m\/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);<\/span>
\n}<\/span><\/p>\n

.sp-clear-display {<\/span>
\n    background-repeat:no-repeat;<\/span>
\n    background-position: center;<\/span>
\n    background-image: url(data:image\/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq\/Hx8fLy8vT09PX19ff39\/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M\/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);<\/span><\/p>\n

}<\/span>
\n
\n<\/span>Copy above code in Style.css<\/b>
\n
\n<\/b>Render.jsp<\/span><\/b>
\n
\n<\/b>The following code represents the render.jsp<\/b>
\n
\n<\/b><%@include file=”\/libs\/granite\/ui\/global.jsp” %><%<\/span>
\n%><%@page session=”false”<\/span>
\n          import=”com.adobe.granite.ui.components.AttrBuilder,<\/span>
\n                  com.adobe.granite.ui.components.Config,<\/span>
\n                  com.adobe.granite.ui.components.Field,<\/span>
\n                  com.adobe.granite.ui.components.Tag” %><\/span>
\n                      <%<\/span>
\n    Config cfg = cmp.getConfig();<\/span>
\n    ValueMap vm = (ValueMap) request.getAttribute(Field.class.getName());<\/span>
\n    Field field = new Field(cfg);<\/span><\/p>\n

    boolean isMixed = field.isMixed(cmp.getValue());<\/span>
\n     <\/span>
\n    String name = cfg.get(“name”, String.class);<\/span><\/p>\n

    Tag tag = cmp.consumeTag();<\/span>
\n    AttrBuilder attrs = tag.getAttrs();<\/span><\/p>\n

    attrs.add(“id”, cfg.get(“id”, String.class));<\/span>
\n    attrs.addClass(cfg.get(“class”, String.class));<\/span>
\n    attrs.addRel(cfg.get(“rel”, String.class));<\/span>
\n    attrs.add(“title”, i18n.getVar(cfg.get(“title”, String.class)));<\/span><\/p>\n

    attrs.addClass(“coral-InputGroup”);<\/span>
\n    attrs.add(“value”, cfg.get(“value”, String.class)); <\/span><\/p>\n

    \/\/ Use JCR standard date format for storage<\/span>
\n    \/\/ FIXME data-stored-format is a bad name; use data-value-format<\/span>
\n    if (isMixed) {<\/span>
\n        attrs.addClass(“foundation-field-mixed”);<\/span>
\n    }<\/span>
\n     <\/span>
\n    attrs.addOthers(cfg.getProperties(), “id”, “class”, “rel”, “title”, “name”, “value”, “emptyText”, “type”, “displayedFormat”, “minDate”, “maxDate”, “displayTimezoneMessage”, “fieldLabel”, “fieldDescription”, “renderReadOnly”, “ignoreData”);<\/span>
\n     <\/span><\/p>\n

    AttrBuilder attrsInput = new AttrBuilder(request, xssAPI);<\/span>
\n    attrsInput.addClass(“coral-InputGroup-input coral-Textfield”);<\/span>
\n    attrsInput.add(“name”, name);<\/span><\/p>\n

    attrsInput.addDisabled(cfg.get(“disabled”, false));<\/span>
\n    attrsInput.add(“type”, cfg.get(“type”, “text”));<\/span><\/p>\n

    if (isMixed) {<\/span>
\n        attrsInput.add(“placeholder”, i18n.get(“<Mixed Entries>”)); <\/span>
\n    } else {<\/span>
\n        attrsInput.add(“value”, vm.get(“value”, String.class));<\/span>
\n        log.info(“Current value:” + vm.get(“value”, String.class)+”:”);<\/span>
\n        attrsInput.add(“placeholder”, i18n.getVar(cfg.get(“emptyText”, String.class)));<\/span>
\n    }<\/span><\/p>\n

    if (cfg.get(“required”, false)) {<\/span>
\n        attrsInput.add(“aria-required”, true);<\/span>
\n    }<\/span><\/p>\n

    AttrBuilder typeAttrs = new AttrBuilder(request, xssAPI);<\/span>
\n    typeAttrs.add(“type”, “hidden”);<\/span>
\n    typeAttrs.add(“value”, “Color”);<\/span>
\n    if (name != null && name.trim().length() > 0) {<\/span>
\n        typeAttrs.add(“name”, name + “@TypeHint”);<\/span>
\n    }<\/span><\/p>\n

%><div <%= attrs.build() %>><\/span>
\n    <input id=”full” <%= attrsInput.build() %>><\/span>
\n    <div class=”coral-InputGroup-button”><\/span>
\n        <button data-toggle=”popover” data-target=”#colorpicker” class=”coral-Button coral-Button–square” id=”customColorButton” type=”button” title=”<%= xssAPI.encodeForHTMLAttr(i18n.get(“Date Picker”)) %>”><\/span>
\n            <i class=”coral-Icon coral-Icon–sizeS coral-Icon coral-Icon–colorPalette”><\/i><\/span>
\n        <\/button><\/span>
\n    <\/div><\/span>
\n<\/div><\/span><\/p>\n

<div  id=”colorpicker” class=”coral-Popover”><\/div><\/span>
\n<script type=”text\/javascript”><\/span><\/p>\n

  $(document).ready(function() {<\/span><\/p>\n

   $(“#full”).spectrum({<\/span>
\n    color: “#ECC”,<\/span>
\n    showInput: true,<\/span>
\n    className: “full-spectrum”,<\/span>
\n    showInitial: true,<\/span>
\n    showPalette: true,<\/span>
\n    showSelectionPalette: true,<\/span>
\n    maxSelectionSize: 10,<\/span>
\n    preferredFormat: “hex”,<\/span>
\n    localStorageKey: “spectrum.demo”,<\/span>
\n    move: function (color) {<\/span>
\n         <\/span>
\n    },<\/span>
\n    show: function () {<\/span>
\n     <\/span>
\n    },<\/span>
\n    beforeShow: function () {<\/span>
\n     <\/span>
\n    },<\/span>
\n    hide: function () {<\/span>
\n     <\/span>
\n    },<\/span>
\n    change: function() {<\/span>
\n         <\/span>
\n    },<\/span>
\n    palette: [<\/span>
\n        [“rgb(0, 0, 0)”, “rgb(67, 67, 67)”, “rgb(102, 102, 102)”,<\/span>
\n        “rgb(204, 204, 204)”, “rgb(217, 217, 217)”,”rgb(255, 255, 255)”],<\/span>
\n        [“rgb(152, 0, 0)”, “rgb(255, 0, 0)”, “rgb(255, 153, 0)”, “rgb(255, 255, 0)”, “rgb(0, 255, 0)”,<\/span>
\n        “rgb(0, 255, 255)”, “rgb(74, 134, 232)”, “rgb(0, 0, 255)”, “rgb(153, 0, 255)”, “rgb(255, 0, 255)”], <\/span>
\n        [“rgb(230, 184, 175)”, “rgb(244, 204, 204)”, “rgb(252, 229, 205)”, “rgb(255, 242, 204)”, “rgb(217, 234, 211)”, <\/span>
\n        “rgb(208, 224, 227)”, “rgb(201, 218, 248)”, “rgb(207, 226, 243)”, “rgb(217, 210, 233)”, “rgb(234, 209, 220)”, <\/span>
\n        “rgb(221, 126, 107)”, “rgb(234, 153, 153)”, “rgb(249, 203, 156)”, “rgb(255, 229, 153)”, “rgb(182, 215, 168)”, <\/span>
\n        “rgb(162, 196, 201)”, “rgb(164, 194, 244)”, “rgb(159, 197, 232)”, “rgb(180, 167, 214)”, “rgb(213, 166, 189)”, <\/span>
\n        “rgb(204, 65, 37)”, “rgb(224, 102, 102)”, “rgb(246, 178, 107)”, “rgb(255, 217, 102)”, “rgb(147, 196, 125)”, <\/span>
\n        “rgb(118, 165, 175)”, “rgb(109, 158, 235)”, “rgb(111, 168, 220)”, “rgb(142, 124, 195)”, “rgb(194, 123, 160)”,<\/span>
\n        “rgb(166, 28, 0)”, “rgb(204, 0, 0)”, “rgb(230, 145, 56)”, “rgb(241, 194, 50)”, “rgb(106, 168, 79)”,<\/span>
\n        “rgb(69, 129, 142)”, “rgb(60, 120, 216)”, “rgb(61, 133, 198)”, “rgb(103, 78, 167)”, “rgb(166, 77, 121)”,<\/span>
\n        “rgb(91, 15, 0)”, “rgb(102, 0, 0)”, “rgb(120, 63, 4)”, “rgb(127, 96, 0)”, “rgb(39, 78, 19)”, <\/span>
\n        “rgb(12, 52, 61)”, “rgb(28, 69, 135)”, “rgb(7, 55, 99)”, “rgb(32, 18, 77)”, “rgb(76, 17, 48)”]<\/span>
\n    ]<\/span>
\n});<\/span><\/p>\n

  });<\/span><\/p>\n

<\/script><\/span>
\n
\n<\/b>Copy above code in render.jsp<\/b>
\n
\n<\/b>After this I created my component named as helloworld with cq:dialog and dialog.<\/p>\n

<\/a><\/div>\n

Specify a path that references JQuery plugin as a value of the sling:resourceType  property in CRXDE Lite as shown below:<\/p>\n

<\/div>\n
<\/div>\n
<\/a><\/div>\n

Now when drop this component on a page and open the dialog in edit  mode then it look like this:<\/p>\n

<\/a><\/div>\n

For getting the value of the dialog, Here is the code of helloworld.html:<\/b><\/p>\n

<p> Color : ${properties.color}<\/p><\/span>
\n<p style=”color:${properties.color @ context=’styleToken’};”> Text : ${properties.text}<\/p><\/span><\/p>\n

This HTL code will displaying the color values.<\/p>\n

Be Happy<\/i><\/b><\/span><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

In this blog I am going to discuss how to create a custom sling resource type for the AEM Touch […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,82,185,186,188,184,187],"tags":[],"class_list":["post-234","post","type-post","status-publish","format-standard","hentry","category-aem","category-cq5","category-creating-a-custom-experience-manager-slingresourcetype-for-touch-ui","category-custom-slingresourcetype","category-full-color-spectrum-field-for-a-touch-ui-component-dialog","category-slingresourcetype","category-touchui"],"yoast_head":"\nCreating a custom Experience Manager sling:resourceType for Touch UI - AEM Blog | Lhotse Technologies<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a custom Experience Manager sling:resourceType for Touch UI - AEM Blog | Lhotse Technologies\" \/>\n<meta property=\"og:description\" content=\"In this blog I am going to discuss how to create a custom sling resource type for the AEM Touch […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/\" \/>\n<meta property=\"og:site_name\" content=\"AEM Blog | Lhotse Technologies\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-20T14:16:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-17T07:35:39+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2017\/02\/Capture1.png\" \/>\n<meta name=\"author\" content=\"Team Lhotse\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Team Lhotse\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"104 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/\"},\"author\":{\"name\":\"Team Lhotse\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/fd7bee89b050d7c7195fc75b681b053d\"},\"headline\":\"Creating a custom Experience Manager sling:resourceType for Touch UI\",\"datePublished\":\"2017-02-20T14:16:00+00:00\",\"dateModified\":\"2020-01-17T07:35:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/\"},\"wordCount\":20839,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2017\/02\/Capture1.png\",\"articleSection\":[\"AEM\",\"CQ5\",\"Creating a custom Experience Manager sling:resourceType for Touch UI\",\"Custom sling:resourceType\",\"full color spectrum field for a touch UI component dialog\",\"sling:resourceType\",\"TouchUI\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/\",\"name\":\"Creating a custom Experience Manager sling:resourceType for Touch UI - AEM Blog | Lhotse Technologies\",\"isPartOf\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2017\/02\/Capture1.png\",\"datePublished\":\"2017-02-20T14:16:00+00:00\",\"dateModified\":\"2020-01-17T07:35:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/#primaryimage\",\"url\":\"http:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2017\/02\/Capture1.png\",\"contentUrl\":\"http:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2017\/02\/Capture1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/lhotsetechnologies.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating a custom Experience Manager sling:resourceType for Touch UI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#website\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/\",\"name\":\"AEM Blog | Lhotse Technologies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/lhotsetechnologies.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#organization\",\"name\":\"AEM Blog | Lhotse Technologies\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png\",\"contentUrl\":\"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png\",\"width\":539,\"height\":172,\"caption\":\"AEM Blog | Lhotse Technologies\"},\"image\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/fd7bee89b050d7c7195fc75b681b053d\",\"name\":\"Team Lhotse\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"caption\":\"Team Lhotse\"},\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/author\/team-lhotse\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating a custom Experience Manager sling:resourceType for Touch UI - AEM Blog | Lhotse Technologies","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/","og_locale":"en_US","og_type":"article","og_title":"Creating a custom Experience Manager sling:resourceType for Touch UI - AEM Blog | Lhotse Technologies","og_description":"In this blog I am going to discuss how to create a custom sling resource type for the AEM Touch […]","og_url":"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/","og_site_name":"AEM Blog | Lhotse Technologies","article_published_time":"2017-02-20T14:16:00+00:00","article_modified_time":"2020-01-17T07:35:39+00:00","og_image":[{"url":"http:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2017\/02\/Capture1.png","type":"","width":"","height":""}],"author":"Team Lhotse","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Team Lhotse","Est. reading time":"104 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/#article","isPartOf":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/"},"author":{"name":"Team Lhotse","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/fd7bee89b050d7c7195fc75b681b053d"},"headline":"Creating a custom Experience Manager sling:resourceType for Touch UI","datePublished":"2017-02-20T14:16:00+00:00","dateModified":"2020-01-17T07:35:39+00:00","mainEntityOfPage":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/"},"wordCount":20839,"commentCount":0,"publisher":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#organization"},"image":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/#primaryimage"},"thumbnailUrl":"http:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2017\/02\/Capture1.png","articleSection":["AEM","CQ5","Creating a custom Experience Manager sling:resourceType for Touch UI","Custom sling:resourceType","full color spectrum field for a touch UI component dialog","sling:resourceType","TouchUI"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/","url":"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/","name":"Creating a custom Experience Manager sling:resourceType for Touch UI - AEM Blog | Lhotse Technologies","isPartOf":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/#primaryimage"},"image":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/#primaryimage"},"thumbnailUrl":"http:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2017\/02\/Capture1.png","datePublished":"2017-02-20T14:16:00+00:00","dateModified":"2020-01-17T07:35:39+00:00","breadcrumb":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/#primaryimage","url":"http:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2017\/02\/Capture1.png","contentUrl":"http:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2017\/02\/Capture1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/lhotsetechnologies.com\/blog\/creating-a-custom-experience-manager-slingresourcetype-for-touch-ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/lhotsetechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating a custom Experience Manager sling:resourceType for Touch UI"}]},{"@type":"WebSite","@id":"https:\/\/lhotsetechnologies.com\/blog\/#website","url":"https:\/\/lhotsetechnologies.com\/blog\/","name":"AEM Blog | Lhotse Technologies","description":"","publisher":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/lhotsetechnologies.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/lhotsetechnologies.com\/blog\/#organization","name":"AEM Blog | Lhotse Technologies","url":"https:\/\/lhotsetechnologies.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png","contentUrl":"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png","width":539,"height":172,"caption":"AEM Blog | Lhotse Technologies"},"image":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/fd7bee89b050d7c7195fc75b681b053d","name":"Team Lhotse","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"Team Lhotse"},"url":"https:\/\/lhotsetechnologies.com\/blog\/author\/team-lhotse\/"}]}},"_links":{"self":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=234"}],"version-history":[{"count":3,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/234\/revisions"}],"predecessor-version":[{"id":586,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/234\/revisions\/586"}],"wp:attachment":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}