<input type="color">

The <input type="color"> element is a specific version of the <input> element, used to create an input field which allow user to select color and enter color code. A color picker's UI has no required features other than accepting simple colors as text (more info).

The browser will generate a input field for selecting, and changing the colors. The data which the user enters will be represented as color.

Attributes

Beside the attributes listed below, this element can have any of the global attributes.

autocompleteHTML5

Sets the value of the autocomplete attribute of a color field. If true, automatically fills it with the previously stored value for the color picker.

autofocusHTML5

This Boolean attribute lets you specify that a form field should have input focus when the page loads, unless the user overrides it, for example, by typing in a different field. Only one form element in a document can have the autofocus attribute, which is a Boolean.

defaultvalue

Sets the default value of a color picker.

disabled

This Boolean attribute indicates that the color picker is not available for interaction. Additionally, disabled field values aren't submitted with the form.

name

The name of the color picker, which is submitted with the form data.

value

The value of the color picker, which color will be selected in color picker by default.The value property of the input must be a 7 character long string starting with # and containing a color in hex format. e.g #FF0000, which is the hex code for the red color.

Examples

To create widget for selecting color, use:

<input type="color"  />

The above example will create color picker element with default black color selected.

<input type="color"  value="#ff0000" />

The above example will create color picker element with red color selected.

Here is an image of the color control displayed on Mac inside the Chrome browser:

Specifications

Browser compatibility

¹ This is not implemented for Windows Touch yet.