The <input> tag with a type="color" attribute creates a color picker.
The control consists of a small button with the current color displayed inside. Clicking this button opens a color picker.
An <input> element of type color.
Click the colored button to open the color picker with an initial value.
<form action="/tutorial/action.html">
<fieldset>
<legend>Select Color</legend>
<input type="color" name="color" value="#af24f0"><br /><br />
<input type="submit" value="Submit">
</fieldset>
</form>
An <input type="color"> tag creates a color picker.
Clicking the color input button will open a color picker.
A preview of the selected color is displayed inside the control.
An initial color can be specified with the value attribute which accepts hex color values.
The default color value is #000000, which is black.
<input type="color">
Here is when type="color" support started for each browser:
 Chrome
|
20.0 | Jun 2012 |
 Firefox
|
29.0 | Apr 2014 |
 IE/Edge
|
38.0 | Aug 2016 |
 Opera
|
11.01 | Jan 2011 |
 Safari
|
10.1 | Mar 2017 |
Back to <input>
