Dofactory.com
Dofactory.com

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.

Example

#

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">
  <fieldset>
    <legend>Select Color</legend>

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

    <input type="submit" value="Submit">
  </fieldset>
</form> 

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.


Syntax

<input type="color">

Browser support

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

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?


Guides