HTML alpha Attribute

HTML alpha Attribute

The HTML alpha attribute allows the user to select a color with an alpha component, which controls the color's opacity. It is a Boolean attribute used with an <input> element whose type attribute is set to color.

Syntax

The alpha attribute is placed on an <input> element with type="color". Because it is a Boolean attribute, its presence allows the color's alpha component to be changed by the user.

<input type="color" alpha>

Attribute Value

The attribute does not require a value. If alpha is omitted, the color input uses a fully opaque color.

Elements That Use the alpha Attribute

The alpha attribute is currently valid on the <input> element when the input is a color control.

Using the alpha Attribute

The following example creates a color input that allows the user to select a color with transparency when the browser supports the alpha attribute:

<label for="color">Choose a color:</label>
<input type="color" id="color" name="color" alpha>

The appearance of the color picker depends on the browser and operating system. Browsers that support alpha can provide a way to adjust the transparency of the selected color.

The Alpha Component

A color's alpha component determines its opacity. A fully opaque color completely covers the content behind it, while a partially transparent color allows some of the background to show through.

When the alpha attribute is present, the selected color can include an alpha component rather than being restricted to a fully opaque color. The exact color format returned by the control can depend on the selected color and browser implementation.

Boolean Attribute

The alpha attribute is a Boolean attribute. Its presence enables the option to manipulate the color's alpha component.

<!-- Alpha component can be adjusted -->
<input type="color" alpha>

<!-- Color remains fully opaque -->
<input type="color">

To disable alpha selection, remove the attribute entirely. Writing alpha="false" does not disable it because the attribute is still present.

Common Mistakes

Do not use alpha="false" to disable alpha selection. Because alpha is a Boolean attribute, its presence enables the feature.

<!-- Correct: alpha selection enabled -->
<input type="color" alpha>

<!-- Correct: alpha selection not enabled -->
<input type="color">

Do not use the alpha attribute with other input types. It applies specifically to the Color state created with type="color".

Do not assume every browser currently provides an interface for selecting transparency. Browser support for the alpha attribute is still limited.

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 alpha attribute for <input type="color"> has limited browser support 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.

Summary

The HTML alpha attribute is a Boolean attribute used with <input type="color">. When present, it allows the user to manipulate the alpha component of the selected color so the color can be partially transparent instead of fully opaque. Browser support is currently limited, so the feature should be used with appropriate compatibility considerations.