Currently supported in all modern browsers with the exception of Safari and Internet Explorer, the potential of the color HTML5 input is great, allowing the user to make any color selection in a form:

Select the (temporary) background color for this page:

Uses

Color is a great way to allow the personalization of webpages: for example, prompting 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.

Like the <progress> input, the default appearence of the color dialog is strongly dependant on the browser and its underlying operating system.

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 looks like:

<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.

Responding To Color Changes

Using the selected color is very simple. Taking the code from the example above:

<label for="bgcolor">Select the (temporary) background color for this page:</label>
<input type="color" value="#ff0000" id="bgcolor" name="bgcolor" oninput="changeBackground(bgcolor.value)">

We can apply the following piece of JavaScript:

function changeBackground(colorValue){
	document.body.style.backgroundColor = colorValue;
}

Note that current browser behaviour has similar issues to the range input: Chrome will change the background color of the page in response to a onchange event, but Firefox will not alter the background until after after the color picker is closed. To make browser behaviour the same, I have chosen to fire the function oninput.

If you wanted to make the background color semi-permanent, you could write the new color value into a cookie or LocalStorage.

Restricting Color Well Selection

By default the “well” that appears offers the user the entire color gamut to choose from. With the same principle as the range input, the user’s choices can be directed to just a few colors by using a <datalist> with appropriate <option> values:

<input type="color" value="#333333" list="colors">
<datalist id=colors>
	<option>#ffffff</option>
	<option>#ff0000</option>
	<option>#ff7700</option>
</datalist>

If you’re using Chrome, you can see the result below:

As this behaviour is part of the spec, I expect other browsers to follow in supporting it presently.

Writing compatibility for other browsers

Gaining support in Safari and IE takes one of two approaches: either validating the value with the Constraint API:

<input type="text" value="#ffffff" id="bgcolor" pattern="^#([A-Fa-f0-9]{6})$" required title="Hexadecimal value required">

… or wiring in a JavaScript polyfill to create an equivalent behaviour: examples include Spectrum and color polyfill.

Painting by Nik Ehm, used under a Creative Commons Attribution ShareAlike 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.