value="" on an input element with type="color" not working

For some reason, value="" on an color type input won’t work. Whenever I go into inspect element, it gives me this error: The specified value "ff0000" does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers. I don’t know how to fix this, or why it is happening. Its probably something stupid I’m missing, so here is my code:

<input type="color" id="colorpick" class="colorpick" name="colorpick" value="ff0000">

This should turn it red when ran, right?

>Solution :

From MDN:

The value of an <input> element of type color is always a DOMString which contains a 7-character string specifying an RGB color in hexadecimal format. While you can input the color in either upper- or lower-case, it will be stored in lower-case form. The value is never in any other form, and is never empty.

<input> wants a seven-character RGB hex color. That means leading with a #.

<input type="color" id="colorpick" class="colorpick" name="colorpick" value="#ff0000">

Note the # in front of ff0000.

Leave a Reply