An representing the alpha channel value of the color, where the number 0 corresponds to 0% (fully transparent) and 1 corresponds to 100% (fully opaque). Additionally, the keyword none can be used to explicitly specify no alpha channel. If the A channel value is not explicitly specified, it defaults to 100%. If included, the value is preceded by a slash (/).

In the examples we've seen so far in this section, the alpha channels have not been explicitly specified for either the origin or output colors. When the output color alpha channel is not specified, it defaults to the same value as the origin color alpha channel. When the origin color alpha channel is not specified (and it is not a relative color), it defaults to 1. Therefore, the origin and output alpha channel values are 1 for the above examples.

When using relative color syntax inside an rgb() function, the browser converts the origin color into an equivalent RGB color (if it is not already specified as such). The color is defined as three distinct color channel values — r (red), g (green), and b (blue) — plus an alpha channel value (alpha). These channel values are made available inside the function to be used when defining the output color channel values:

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Let's look at some examples that specify origin and output alpha channel values. The first one specifies the output alpha channel value as being the same as the origin alpha channel value, whereas the second one specifies a different output alpha channel value, unrelated to the origin alpha channel value.

When defining a relative color, the different channels of the output color can be expressed in several different ways. Below, we'll study some examples to illustrate these.

The next function uses absolute values for the output color's channel values, outputting a completely different color not based on the origin color:

Each value can be represented as a between 0 and 255, a between 0% and 100%, or the keyword none (equivalent to 0% in this case). These values represent the red, green, and blue channels, respectively.

Each value can be represented as a between 0 and 255, a between 0% and 100%, or the keyword none (equivalent to 0% in this case). These values represent the red, green, and blue channel values of the output color, respectively.

In the first two examples below, we are using relative color syntax. However, the first one outputs the same color as the origin color and the second one outputs a color not based on the origin color at all. They don't really create relative colors! You'd be unlikely to ever use these in a real codebase, and would probably just use an absolute color value instead. We included these examples as a starting point for learning about relative rgb() syntax.

80blackrgb

Note: As mentioned above, if the output color is using a different color model to the origin color, the origin color is converted to the same model or space as the output color in the background so that it can be represented in a way that is compatible (i.e. using the same channels).

The background colors are set using the rgb() color function. The three colors are the same. The third is semi-transparent, so we included a repeating-linear-gradient() on the to better demonstrate the transparency of alpha channels.

Note: To fully enable the representation of the full spectrum of visible colors, the output of relative rgb() color functions is serialized to color(srgb). That means that querying the output color value via the HTMLElement.style property or the CSSStyleDeclaration.getPropertyValue() method returns the output color as a color(srgb ...) value.

The keyword from is always included when defining a relative color, followed by a value representing the origin color: This is the original color that the relative color is based on. The origin color can be any valid syntax, including another relative color.

This example styles three