ChromoSelector - jQuery Color Picker plugin - Documentation / Demos / Custom Color Formats

Custom Color Formats

If you would like to use the HEX format with a leading hash, you don't need to do anything as it's the default (example 1).

If you would like to use a format that is known to chromoselector, you just need to implement the "color2str" function (examples 2-5). For a full list of supported format, please see the color manipulation page

If you would like to use a custom format, you will need to implement both the "color2str" and "str2color" functions (examples 6-8).

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

$(document).ready(function () {
    $('#color1').chromoselector({
        color2str: function (color) {
            return color.getRgbString();
        }
     });
});

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

$(document).ready(function () {
    $('#color3').chromoselector({
        color2str: function (color) {
            return color.getHslString();
        }
    });
});

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

$(document).ready(function () {
    $('#color5').chromoselector({
        str2color: function (str) {
            return '#' + str;
        },
        color2str: function (color) {
            return color.getHexString().substring(1);
        }
    });
});

$(document).ready(function () {
    $('#color6').chromoselector({
        str2color: function (str) {
            try {
                return $.parseJSON(str);
            } catch (e) {}
        },
        color2str: function (color) {
            var cmyk = color.getCmyk();
            for (var i in cmyk) {
                cmyk[i] = Math.round(cmyk[i] * 100) / 100;
            }
            return JSON.stringify(cmyk);
        }
    });
});

$(document).ready(function () {
    $('#color7').chromoselector({
        str2color: function (str) {
            var num = parseInt(str, 10) || 0;
            return {
                r: ((num & (255*255*255)) >> 16) / 255,
                g: ((num & (255*255)) >> 8) / 255,
                b: ((num & (255))) / 255
            };
        },
        color2str: function (color) {
            var rgb = color.getRgb();
            var num = (Math.round(rgb.r * 255) << 16)
                + (Math.round(rgb.g * 255) << 8)
                + Math.round(rgb.b * 255)
            return num;
        }
    });
});