HTML <input> type="color"

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.

Select Color

<form action="/tutorial/action.html">
    <legend>Select Color</legend>

    <input type="color" name="color" value="#af24f0"><br /><br />

    <input type="submit" value="Submit">

Using input type="color"

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">

Browser support

Here is when type="color" support started for each browser:

20.0 Jun 2012
29.0 Apr 2014
38.0 Aug 2016
11.01 Jan 2011
10.1 Mar 2017

You may also like

 Back to <input>

Author: Jack Poorte
Published: Jun 20 2021
Last Reviewed: Sep 30 2023

What's your favorite/least favorite part of Dofactory?