HTML colorspace Attribute

HTML colorspace Attribute

The HTML colorspace attribute specifies the color space used by an <input type="color"> control. It can use the traditional limited sRGB color space or the wider Display P3 color space on supporting browsers and displays.

Syntax

The colorspace attribute is used on an <input> element whose type is color.

<input type="color" colorspace="display-p3">

The attribute is enumerated and accepts either limited-srgb or display-p3.

Attribute Values

The colorspace attribute supports two color-space values.

Elements That Use the colorspace Attribute

The colorspace attribute applies to the <input> element when its type is color.

Using limited-srgb

The limited-srgb value uses the sRGB color space and limits each red, green, and blue component to 8 bits. It is the default color space for the control.

<label for="standard-color">Select a Color:</label>
<input type="color" id="standard-color" name="standard-color" colorspace="limited-srgb" value="#0088cc">

Because limited-srgb is the default, it does not normally need to be specified explicitly.

Using display-p3

The display-p3 value requests the Display P3 color space, which has a wider color gamut than sRGB.

<label for="wide-color">Select a Display P3 Color:</label>
<input type="color" id="wide-color" name="wide-color" colorspace="display-p3">

On a browser and display that support wide-gamut colors, Display P3 can represent some colors that cannot be represented within the limited sRGB gamut.

Default Color Space

If the colorspace attribute is omitted, the color input uses limited-srgb.

<!-- Uses limited-srgb by default -->
<input type="color" value="#0088cc">

<!-- Explicitly uses limited-srgb -->
<input type="color" colorspace="limited-srgb" value="#0088cc">

Explicitly specifying limited-srgb can make the intended color space clear, but it is not necessary when the default behavior is desired.

Using colorspace with alpha

The colorspace attribute can be combined with the alpha attribute when the color control should also allow transparency.

<input type="color" colorspace="display-p3" alpha>

The colorspace attribute determines the color space, while alpha allows the selected color to include an alpha component. Support for both features depends on the browser.

Browser and Display Support

Requesting colorspace="display-p3" does not guarantee that every user will see a wider range of colors. The browser must support the attribute, and the device's display must be capable of displaying the wider color gamut for the visual difference to be fully represented.

Pages should therefore continue to work correctly when a browser does not support the requested color-space behavior.

Common Mistakes

Do not use srgb as the attribute value. The keyword for the standard limited sRGB color space is limited-srgb.

<!-- Incorrect -->
<input type="color" colorspace="srgb">

<!-- Correct -->
<input type="color" colorspace="limited-srgb">

Do not use colorspace with unrelated input types. The attribute applies to <input type="color">.

Do not assume that display-p3 will produce visibly different colors on every device. The result depends on browser support, the selected color, and the display's color capabilities.

Browser Support

Baseline: Limited availability indicates that a feature is not yet available in all core browsers. Use these features with caution because they may only work in select browsers, so additional compatibility checks may be needed before general use.

The colorspace attribute for <input type="color"> has limited availability and should be tested before it is relied on for production interfaces.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the colorspace Attribute

The example provides one color input using the default limited sRGB color space and another requesting Display P3. The available color picker and supported color range depend on the browser and display.

Summary

The HTML colorspace attribute specifies the color space used by an <input type="color"> control. The limited-srgb value uses the standard limited sRGB color space and is the default, while display-p3 requests the wider Display P3 color space. Because support is still limited, color controls should continue to work when browsers ignore the attribute.