ChromoSelector - jQuery Color Picker plugin - Documentation / Demos / Showcase

• All default options

Code

$(document).ready(function () {
    $('#showcase1').chromoselector()
});

• Output: RGBA string
• Alpha selection: true
• Resizable: false
• Width: 130px

Code

$(document).ready(function () {
    $('#showcase2').chromoselector({
        width: 130,
        panelAlpha: true,
        resizable: false,
        color2str: function (color) {
            return color.getRgbaString();
        }
    })
});

• Output: HSLA string
• Alpha selection: true
• Side panel: true

Code

$(document).ready(function () {
    $('#showcase3').chromoselector({
        panelAlpha: true,
        panel: true,
        color2str: function (color) {
            return color.getHslaString();
        }
    })
});

• Preview in INPUT element
• Width: 260px
• Resizable: false
• Side panel: true
• Side panel mode: CMYK only

Code

$(document).ready(function () {
    // This function will update the input element based
    // on the currently selected color in the picker
    var updatePreview = function() {
        var color = $(this).chromoselector('getColor');
        $(this).css({
            'background-color': color.getHexString(),
            'color': color.getTextColor().getHexString(),
            'text-shadow': '0 1px 0 ' + color.getTextColor().getTextColor().getHexString()
        });
    };
    // Initialise the picker
    $('#showcase4').chromoselector({
        width: 260,
        resizable: false,
        panel: true,
        panelMode: 'cmyk',
        panelModes: [],
        preview: false,
        create: updatePreview,
        update: updatePreview,
        color2str: function (color) {
            return color.getCmykString();
        }
    })
});

• Dark theme
• Resizable: false
• Width: 130px

Code

// CSS code
.dark.ui-cs-chromoselector {
    background: #223;
    background: rgba(34,34,41,0.95);
    border: 1px solid black;
}

// JS Code
$(document).ready(function () {
    $('#showcase5').chromoselector({
        width: 130,
        resizable: false,
        pickerClass: 'dark',
        shadowColor: 'rgba(255,255,255,0.8)'
    })
});

• Preview in INPUT element
• Custom INPUT element styling
• Square corners

Code

$(document).ready(function () {
    // This function will update the input element based
    // on the currently selected color in the picker
    var updatePreview = function() {
        var color = $(this).chromoselector('getColor');
        $(this).css({
            'background-color': color.getHexString(),
            'color': color.getTextColor().getHexString(),
            'text-shadow': '0 1px 0 ' + color.getTextColor().getTextColor().getHexString()
        });
    };
    // The CSS is set here, so that even if
    // a user has disabled javascript, it will
    // still be possible to edit the color
    $('#showcase6').css({
        border: '5px ridge gray',
        cursor: 'pointer',
        height: '25px',
        width: '25px',
        'text-indent': '25px',
        padding: 0
    }).chromoselector({ // Initialise the picker
        create: updatePreview,
        update: updatePreview,
        preview: false,
        roundcorners: false
    });
});

Code

$(document).ready(function() {
    var updatePreview = function() {
        var color = $(this).chromoselector("getColor");
        $(this).css({
            "background-color": color.hex,
            "color": color.getTextColor().hex,
            "text-shadow": "0 1px 0 " + color.getTextColor().getTextColor().hex
        });
    };
    // Initialise the color picker
    $("#static_preview").chromoselector({
        target: "#static_preview_picker",
        autoshow: false,
        width: 285,
        preview: false,
        create: updatePreview,
        update: updatePreview
    }).chromoselector("show", 0);
});