While it is only supported in Opera and Chrome at this writing, the potential of the color HTML5 form input is very powerful: rendered correctly in the browser, it displays the operating system's color picker dialog window when selected, as shown in the screenshot to the right.
Uses
Once the element is supported in all browsers, it will be a great way to promote personalization of webpages: for example, allowing the user to choose the background and foreground colors of the site to suit their personal tastes, or for accessibility purposes, to make a website look better under conditions of color blindness.
Syntax
The code for the color input is an excellent demonstration of how HTML5 elements gracefully degrade in older browsers. Typical code for the color input would look something like the following:
<label for="background" accesskey="c" >Select background color:</label><input type="color" name="background" id="background" value="#ff0000">If you’ve written HTML forms before you’ll know that any input type that is not understood by a browser is interpreted as <input type="text" >. That is, <input type="generic"> will generate a simple text input. So if the browser does not understand <input type="color">, it will default to a text input, with #ff0000 as the default value in the example above.
As a result, the user (assuming they know hexadecimal color) will be able to enter their desired hue by hand, while browsers that do understand the input will render it completely, with the value of the input used as the default color in the picker.
Writing compatibility for other browsers
Gaining support in Firefox, Safari, IE and older browsers takes one of two approaches: either adding size and maxlength to the field, and validating the entered value server-side:
<label for="background" accesskey="c" >Select background color:</label><input type="color" name="background" id="background" value="#ff0000" maxlength="7" size="9" />(Note that the addition of maxlength and size will make the input invalid (but still fully functional) in HTML5.)
Alternatively, you could wire in a JavaScript polyfill to create an equivalent result: examples include Spectrum and color polyfill.