`alpha` and `colorspace` attributes for `<input type=color>`
The ability to control the opacity of a color picked using <input type="color"> and determine the colorspace of the selected color. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The ability to control the opacity of a color picked using <input type="color"> and determine the colorspace of the selected color. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
api.HTMLInputElement.alpha Experimental | | | | 18.4 | | 18.4 |
| HTML attribute | ||||||
alpha Experimental | | | Preview | 18.4 | | 18.4 |
colorspace Experimental input elements of type color 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 a CSS color value format. | | | Preview | 18.4 | | 18.4 |
| DOM API | ||||||
| The colorSpace property of the HTMLInputElement interface reflects the input element's colorspace attribute, which indicates whether the color space of the serialized CSS color is sRGB (the default) or display-p3. It is only relevant to color controls. | | | 149 | 18.4 | | 18.4 |
Syntax
<label>Color (with transparency):
<input type="color" value="#3498dbcc">
</label>Live demo
Alpha-enabled picker
Use the alpha attribute when the browser supports transparency in color inputs.
Overlay preview
Place the chosen color over a patterned background to illustrate opacity.
Support checklist
Explain the role of alpha and colorspace in advanced color inputs.
Use cases
Improve form input
Use `alpha` and `colorspace` attributes for `<input type=color>` to make data entry more efficient, guided, or predictable inside real forms.
Reduce friction
Apply `alpha` and `colorspace` attributes for `<input type=color>` when the browser can help users complete a task with fewer mistakes or less repetitive work.
Cautions
- Test `alpha` and `colorspace` attributes for `<input type=color>` in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Keep labels, instructions, validation, and keyboard behavior clear so the enhancement helps rather than surprises users.
Related links
Powered by web-features