Search code examples
javascriptjquerycsscolor-picker

How to hide certain colors using spectrum color picker


I am new to using Spectrum's color picker. So I looked through all functions spectrum-color picker had to offer, but I cannot find a way to hide some colors in the color picker so that users cannot select them.

E.g., all light colors: #FFFFFF, #F5F5F5, #FFFAFA, #F0FFF0, #F5FFFA, #F0FFFF, #F0F8FF, #F8F8FF, #FFF5E, #F5F5DC, #FDF5E6, #FFFAF0, #FFFFF0, #FAEBD7, #FAF0E6, #FFF0F5 shouldn't be available in the color picker.

Is there a way I can do this?


Solution

  • you have to make an array list with restricted color hax. then you should use change method in order to deal with. and jquery $.inArray() Function to determine restricted Color.

    for example

    var banColor = ['#ffffff','#000000','#F0FFF0', '#F5FFFA', '#F0FFFF', '#F0F8FF', '#F8F8FF', '#FFF5E', '#F5F5DC', '#FDF5E6', '#FFFAF0', '#FFFFF0', '#FAEBD7', '#FAF0E6', '#FFF0F5'];
    
    $(".example").spectrum({
        color: "#f00",
        change: function(color) {
            if( $.inArray( color.toHexString(), banColor ) >= 0 ){
                $("#basic-log").text("change called: " + color.toHexString() +' Is Not Allowed');
                // Reset your palate
            }
        }
    });