<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.
|Content categories||Flow content, listed, submittable, resettable, form-associated element, phrasing content, labellable element, palpable content.|
|Permitted content||None, it is an empty element.|
|Tag omission||Must have a start tag and must not have an end tag.|
|Permitted parent elements||Any element that accepts phrasing content.|
Beside the attributes listed below, this element can have any of the global attributes.
- 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.
- 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.
- Sets the default value of a color picker.
This Boolean attribute indicates that the color picker is not available for interaction. Additionally, disabled field values aren't submitted with the form.
- The name of the color picker, which is submitted with the form data.
- 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.
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:
|WHATWG HTML Living Standard||Living Standard|
|HTML 4.01 Specification||Recommendation||Initial definition|
|Feature||Chrome||Edge||Firefox (Gecko)||Internet Explorer||Opera||Safari|
|Basic support||1.0||12||1.0 (1.7 or earlier)||2||1.0||1.0|
|type="color"||20.0||38||29.0 (29.0) ¹||No support||11.01||10|
|Feature||Android||Firefox Mobile (Gecko)||IE Mobile||Opera Mobile||Safari Mobile|
|Basic support||(Yes)||4.0 (2.0)||(Yes)||(Yes)||(Yes)|
¹ This is not implemented for Windows Touch yet.