onChange event is not working in color type input

This problem some people are having with inconsistent behaviour in different browsers happens because you're using the onchange event (change in jQuery), which is not the appropriate event for color inputs (that's why it sometimes works and it sometimes doesn't, especially on Mac OS X).

You should use oninput (or input when using jQuery), which works fine in all browsers and platforms.

$('#bgcolor').on('input',
    function() {
        console.log($(this).val());
    }
);

I get the same behavior both with Chrome and Firefox on Windows and it only occurs with pure black, pure white, o any color very close to either one of them.

If you look at the Color picker you'll notice that the rgb values don't change when you move the cursor in the main square (they do if you use the vertical slider to the right, but that's not what the average user would tend to do).

The same behavior occurs with other applications using the same color picker, for instance MSpaint or Tkinter's tkColorChooser.askcolor(). I assume this is Window's default color picker since "color" has the British English spelling "colour", that's my default language choice.

To fix this, just use any color that's not #ffffff or #000000 (or close) as your start color.

<label for="doesntWork1">doesn't work</label> <input type="color" id="doesntWork1" value="#ffffff" onchange="alert(this.value);" />
<p>
<label for="doesntWork2">doesn't work</label> <input type="color" id="doesntWork2" value="#000000" onchange="alert(this.value);" />
<p>
<label for="works1">works</label> <input type="color" id="works1" value="#fdffff" onchange="alert(this.value);" />
<p>
<label for="works2">works</label> <input type="color" id="works2" value="#000002" onchange="alert(this.value);" />