MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

<input> elements of type "color" provide a way for the user to specify a color, either by using a color well control to open a visual color picker or by entering the color into a text field in its "#rrggbb" hexadecimal format.

The element's presentation may vary substantially from one browser and/or platform to another; on one browser, it may simply be a textual input that automatically validates to ensure that the color information is entered in the proper format, on another browser, it may deploy a platform-standard color picker, and on yet another browser, it might use a custom color picker window.

<input type="color">

Value A 7-character DOMString specifying a <color> in lower-case hexadecimal notation
Events change and input
Supported Common Attributes autocomplete and list
IDL attributes list and value
Methods select()

Value

The value of a <input> element of type "color" is always a DOMString which contains a 7-character string specifying an RGB color in lower case hexadecimal notation. The value is never in any other form, and is never empty.

Setting the value to anything that isn't a valid, fully-opaque, RGB color in hexadecimal notation will result in the value being set to "#000000". In particular, you can't use CSS's standardized color names, or any CSS functions, to set the value. This makes sense, when you keep in mind that HTML and CSS are separate languages and specifications. In addition, colors with an alpha channel are not supported; specifying a color in 9-character notation will also result in the color being set to "#000000".

Using color inputs

Inputs of type "color" are exceptionally simple to use, due to the limited number of attributes that can be used with them.

Providing a default color

In addition to the very simple example above, you can create a color picker that specifies a default value, like this:

<input type="color" value="#ff0000">

If you don't specify a value, the default is "#000000", which is black. The value must be in seven-character hexadecimal notation, meaning the "#" character followed by two digits each representing red, green, and blue, like this: "#rrggbb". If you have colors that are in any other format (such as CSS color names, or CSS color functions such as rgb() or rgba(), you'll have to convert them.

Tracking color changes

As is the case with other <input> types, there are two events that can be used to detect changes to the color value: input and change. input is fired at the input element every time the color changes. The change event is fired when the user dismisses the color picker. In both cases, you can determine the new value of the element by looking at its value.

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach(function(p) {
    p.style.color = event.target.value;
  });
}

Selecting the value

If the <input> element's implementation of the "color" type on the user's browser doesn't support a color well, but is instead a text field for entering the color string directly, you can use the select() method to select the text currently in the edit field. If the browser instead uses a color well, select() does nothing.

colorWell.select();

Appearance variations

As previously mentioned, when a browser doesn't support a color picker interface, its implementation of color inputs will be a text box that validates the contents automatically to ensure that the value is in the correct format. For example, in Safari 10.1, you would see something that looks looks like this:

Screenshot of the example taken in Safari.

The same content looks like this in Firefox 55:

Screenshot of the example taken in Firefox 55 for macOS

In this case, clicking on the color well presents the platform's color picker (in this case, the macOS picker):

Screenshot of the element with the color picker open in Firefox Mac.

Validation

A color input's value is considered to be invalid if the user interface is unable to convert the user's input into seven-character lower-case hexadecimal notation. If and when this is the case, the :invalid pseudo-class is applied to the element.

Example

Let's create an example which does a little more with the color input by tracking the change and input events to take the new color and apply it to every <p> element in the document.

HTML

The HTML is fairly straightforward. A couple of paragraphs of descriptive material with an <input> of type "color" with the ID "colorWell" which we'll use to change the color of the paragraphs' text.

<p>An example demonstrating the use of the <code>&lt;input type="color"&gt;</code>
   control.</p>

<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell">

<p>Watch the paragraph colors change when you adjust the color picker.
   As you make changes in the color picker, the first paragraph's
   color changes, as a preview (this uses the <code>input</code>
   event). When you close the color picker, the <code>change</code>
   event fires, and we detect that to change every paragraph to
   the selected color.</p>

JavaScript

First, there's some setup. Establishing some variables, setting up a variable that contains the color we'll set the color well to when we first load up, and then setting up a load handler to do the main startup work once the page is fully loaded.

var colorWell
var defaultColor = "#0000ff";

window.addEventListener("load", startup, false);

Initialization

Once the page is loaded, our "load" handler, startup(), is called:

function startup() {
  colorWell = document.querySelector("#colorWell");
  colorWell.value = defaultColor;
  colorWell.addEventListener("input", updateFirst, false);
  colorWell.addEventListener("change", updateAll, false);
  colorWell.select();
}

This gets a reference to the color input in a variable called colorWell, then sets the color input's value to the value of defaultColor. Then the color input's input event is set up to call our updateFirst() function, and the change event is set to call updateAll(). These are both seen below.

Finally, we call select() to select the text content of the color input if the control is implemented as a text field.

Reacting to color changes

We have two functions that deal with color changes. The updateFirst() function is called in response to the input event. It changes the color of the first paragraph element in the document to match the new value of the color input. Since input events happen every time an adjustment is made to the value (for example, if the brightness of the color is increased), these will happen repeatedly as the color picker is used.

function updateFirst(event) {
  var p = document.querySelector("p");

  if (p) {
    p.style.color = event.target.value;
  }
}

When the color picker is dismissed, indicating that the value will not be changing again (unless the user re-opens the color picker), a change event is sent to the element. We handle that event using the updateAll() function:

function updateAll(event) {
  document.querySelectorAll("p").forEach(function(p) {
    p.style.color = event.target.value;
  });
}

This simply sets the color of every <p> block so that its color attribute matches the current value of the color input, which is referred to using event.target.

Result

The final result looks like this:

Specifications

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

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 20.0 38 29 (29) [1] No support 11.01 10
list 20.0 ? No support[2] No support ? ?
autocomplete 20.0 ? No support[3] No support ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.4 27.0 (27.0) No support (Yes) ?
list ? No support[2] No support ? ?
autocomplete ? No support[3] No support ? ?

[1] Firefox doesn't support inputs of type "color" yet on Windows Touch.

[2] See bug 960984 for the status of support for the list attribute in Firefox.

[3] See bug 960989 for the status of support for the autocomplete attribute in Firefox. You can change and get the value of the attribute but it has no effect.

Document Tags and Contributors

 Last updated by: Sheppy,