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

Example

 

To create widget for selecting color, use:

HTML
<input type="color"  />

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

HTML
<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:

This is how an input type color looks on Mac and within Chrome

Description  

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.

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.
DOM interface HTMLInputElement

Browser Compatibility  

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)
type=color 4.4 27.0 (27.0) ? (Yes) ?

¹ This is not implemented for Windows Touch yet.

Specifications  

Specification Status Comment
WHATWG HTML Living Standard Living Standard  
HTML5 Recommendation  
HTML 4.01 Specification Recommendation Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/input/color

Element HTML Reference