JSFiddle - React, Tailwind, and code Playground

by Alvin Reyes

HTML

<link rel="stylesheet" href="http://bgrins.github.com/spectrum/spectrum.css">
<script src="http://bgrins.github.com/spectrum/spectrum.js"></script>
<title>SDL Tridion ColorPicker</title>
<body>
    	<h2>Choose a color</h2>

    <div class="full">
        <input type="text" id="full" />
        <p>Thanks to http://bgrins.github.com/spectrum for the color picker.</p>
    </div>
</body>

CSS

.full-spectrum .sp-palette {
    max-width: 200px;
}

JavaScript

// for SDL Tridion field and to store the color
var args = window.dialogArguments;
var pickedcolor;

$(document).ready(function () {

    // get and check field value
    if (args) {
        var fields = args.getFields();
        if (fields && fields.length > 0) {
            var values = fields[0].getValues();
            if (values && values.length > 0) {
                pickedcolor = values[0];
            }
        }
    }

    // see Spectrum jQuery Colorpicker documentation at:
    // http://bgrins.github.io/spectrum/

    $("#full").spectrum({
        color: pickedcolor,
        flat: true,
        showInput: true,
        className: "full-spectrum",
        showInitial: true,
        showPalette: true,
        showSelectionPalette: true,
        maxPaletteSize: 10,
        preferredFormat: "hex",
        localStorageKey: "spectrum.demo",
        move: function (color) {},
        show: function () {},
        beforeShow: function () {},
        hide: function () {},
        change: function (c) {
            var labelfull = $("#colorfull");
            color = c.toHexString();
            labelfull.text(c.toHexString());
        },
        palette: [
            ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"], ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",  "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)", "rgb(204, 65, 37)", "rgb(224, 102, 102)",...