is there a way to prevent the user from selecting a specific color inside the color picker (input type='color') either with js or css?

So for example I don't want the user to be able to select the color #ff0000 from the picker.

I cannot find an answer if this is even possible.

Thank you in advance for any info.

is there a way to prevent the user from selecting a specific color inside the color picker (input type='color') either with js or css?

So for example I don't want the user to be able to select the color #ff0000 from the picker.

I cannot find an answer if this is even possible.

Thank you in advance for any info.

• javascript
• html
• css

• you are throwing a pareto problem at a ponent that is simple and straight forward to use. either provide your own color picker or prompt the user to choose a different color. oh and HSL might be something worth looking at. – GottZ Commented Apr 23, 2019 at 11:17
• The interface doesn't provide any filters, you can only let user to pick a color, and then check the value and reject it, or change it programmatically. – Teemu Commented Apr 23, 2019 at 11:22
• You cannot change the behavior of the default color picker as that is provided by the browser itself. As GottZ said, you'd have to create/use a js color picker – JensV Commented Apr 23, 2019 at 11:22

4 Answers 4

Like most html input events, the colorpicker is firing events. The one we could use in this case is change. It gets fired as soon as the user picked a color and clicked ok.

Inside the callback function of this listener we can determine what should happen if the user selected a specific color.

function colorSelected(e) {
  if (e.target.value == "#ff0000") {
    alert("Please don't pick red");
  } else {

  }
}
document.getElementById("colorPicker").addEventListener("change", colorSelected);

<input type="color" id="colorPicker" value="#00ff00">

I would remend building your own interface with only a handful of "acceptable" colors. Sure it's nice to allow a user full control from a menu of millions of colors but if that choice is going to pose a problem you should limit the choice not try to hack the interface.

As others have said, you could check for the color selected after the input changes but I find it unlikely that you really only want to disallow ONE color. The color "red" is made up of many different hues and shades that likely don't meet your criteria for contrast, branding, meaning, etc. How are you possibly going to test against all of them?

Would remend the 'preventing the user from selecting a specific color', but you could simply include a check within the change event:

document.getElementById('myColorInput').addEventListener('change', function(e){
    if (e.target.value != '#ff0000') { 
        /* apply it */ 
    } else { 
        /* do not allow it ad warn the user or something */ 
    }
});

The action of selecting the color itself I do not think is possible, by default. But using that value further on, is all in your hands.

You could work around it by storing the value with each change, and if the check fails, revert to the original stored value (this will allow reverting to the last 'valid' value instead of only the default one, which is a nice little UX improvement):

document.getElementById('myColorInput').addEventListener('change', function(e){
    var target = e.target;
    var value  = target.value;

    var prevStoredValue = target.getAttribute('data-storedValue');

    if (value != '#ff0000') { 
        target.setAttribute('data-storedValue', value);

        /* use it further on */ 

    } else { 
        if (prevStoredValue) {
            target.value = prevStoredValue;
        } else {
            target.setAttribute('data-storedValue', '#FFFFFF'); // or any default value
        };

        /* do not allow it and warn the user or something */ 
    }
});

The concept of input is to provide pre-made widgets that you can chuck onto your website quickly and efficiently. These widgets themselves have many different ways to manipulate them. But when it es to the color widget, editability is very minimal.

If you wanted a user to choose a color, but you wanted to restrict a color, you may have to make your own color picker. However, you could make use javascript to fix this problem, but it would be very narrow.

Something like this:

if(color.value == '#ff0000') {
   alert('not allowed');
   color.value = '000000';
} 

or

if(color.value !== '#ff0000' || color.value !== '#fff000') {
    //allow
} else {
   alert('not allowed')
   color.value = '000000';
}

In the end, I think that making your own limited color picker would be the best option. Or use things like RGB, or HSL instead of using Hexa decimal!

Cheers