<input> elements of typecolor 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 aCSS 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.

Try it

<p>Choose your colors:</p><div>  <input type="color" name="foreground" value="#e66465" />  <label for="foreground">Foreground color</label></div><div>  <input    type="color"       name="background"    value="oklab(50% 0.1 0.1 / 0.5)"    colorspace="display-p3"    alpha />  <label for="background">Background color</label></div>

p,label {  font:    1rem "Fira Sans",    sans-serif;}input {  margin: 0.4rem;}

Value

ACSS color value.

Additional attributes

In addition to theglobal attribute and theinput attributes common to all<input> elements, thecolor input also supports the following attributes:

alphaExperimental

Aboolean attribute, if present, indicates the color's alpha component can be manipulated by the end user and does not have to be fully opaque.

colorspaceExperimental

Defines thecolor space for the color and hints at the desired user interface for the color picker widget. Possibleenumerated values are:

• "limited-srgb": The color is in thesRGB color space. This includesrgb(),hsl(),hwb(), and<hex-color> values. The color value is limited to 8-bits perr,g, andb component. This is the default.
• "display-p3": TheDisplay P3 color space, e.g.,color(display-p3 1.84 -0.19 0.72 / 0.6)

Using color inputs

Inputs of typecolor are simple, due to the limited number of attributes they support.

Providing a default color

You can update the example above to set a default value, so that the color picker is pre-filled with the default color and the color picker (if any) will also default to that color.

<input type="color" value="#ff0000" /><input  type="color"   name="body"  value="oklab(50% 0.1 0.1 / 0.5)"  colorspace="display-p3"  alpha />

If you don't specify a value or if the value is invalid or otherwise not supported by the browser, the value defaults to#000000, which is opaque black.

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 andchange.input is fired on the<input> element every time the color changes. Thechange 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 itsvalue.

Here's an example that watches changes over time to the color value:

colorPicker.addEventListener("input", updateFirst);colorPicker.addEventListener("change", watchColorPicker);function watchColorPicker(event) {  document.querySelectorAll("p").forEach((p) => {    p.style.color = event.target.value;  });}

Selecting the value

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. In this case you can use theselect() method to select the text currently in the edit field.

If the browser instead uses a color picker,select() does nothing. You should be aware of this behavior so your code can respond appropriately in either case.

colorPicker.select();

Validation

A color input's value is considered to be invalid if theuser agent 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 thechange andinput 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 typecolor with the IDcolor-picker, 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="color-picker">Color:</label><input type="color" value="#ff0000" /><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

Initialization

The following code initializes the color input:

const defaultColor = "#0000ff";const colorPicker = document.querySelector("#color-picker");colorPicker.value = defaultColor;colorPicker.addEventListener("input", updateFirst);colorPicker.addEventListener("change", updateAll);colorPicker.select();

This gets a reference to the color<input> element in a variable calledcolorPicker, then sets the color input's value to the value indefaultColor. Then the color input'sinput event is set up to call ourupdateFirst() function, and thechange event is set to callupdateAll(). These are both seen below.

Finally, we callselect() to select the text content of the color input if the control is implemented as a text field (this has no effect if a color picker interface is provided instead).

Reacting to color changes

We provide two functions that deal with color changes. TheupdateFirst() function is called in response to theinput event. It changes the color of the first paragraph element in the document to match the new value of the color input. Sinceinput events are fired 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) {  const p = document.querySelector("p");  if (p) {    p.style.color = event.target.value;  }}

When the color picker is dismissed, indicating that the value will not change again (unless the user re-opens the color picker), achange event is sent to the element. We handle that event using theupdateAll() function, usingEvent.target.value to obtain the final selected color:

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

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

Result

The final result looks like this:

Technical summary

Specifications

Browser compatibility

html.elements.input.type_color

html.elements.input.alpha

html.elements.input.colorspace

See also

• HTMLInputElement.alpha
• HTMLInputElement.colorspace