<input type="color">
<input> elements of type color provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in a CSS color value format.
The element's presentation may vary substantially from one browser and/or platform to another—it might be a basic textual input that automatically validates to ensure that the color information is entered in the proper format, or a platform-standard color picker, or some kind of custom color picker window.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 20 | 14 | 29 | 12.1 | 25 | 12.2 | |
Syntax
<label>Theme Color:
<input type="color" value="#3498db">
</label>Live demo
col-input and tekitinput. combination
Color input and text input linkcol-co-d display.
Use cases
-
Using <input type="color">
<input> elements of type color provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in a CSS color value format.
Cautions
- Limited browser support. Check compatibility before use.
Accessibility
- Verify how this element is announced by screen readers.