rgb()

Below are descriptions of the allowed values for both absolute and relative colors.

Absolute value syntax

rgb(R G B[ / A])

The parameters are as follows:

R, G, B

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

A Optional

An <alpha-value> 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 (/).

Relative value syntax

rgb(from <color> R G B[ / A])

The parameters are as follows:

from <color>

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

R, G, B

Each value can be represented as a <number> between 0 and 255, a <percentage> 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.

A Optional

An <alpha-value> representing the alpha channel value of the output 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 the alpha channel value of the origin color. If included, the value is preceded by a slash (/).

Defining relative color output channel components

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:

• The r, g and b values are each resolved to <number>s between 0 and 255, inclusive.
• The alpha channel is resolved to a <number> between 0 and 1, inclusive.

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.

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.

Let's start with an origin color of hsl(0 100% 50%) (equivalent to rgb(255 0 0)). The following function outputs the same color as the origin color — it uses the origin color's r, g, and b channel values (255, 0, and 0) as the output channel values:

rgb(from hsl(0 100% 50%) r g b)

This function's output color is the sRGB color() equivalent of rgb(255 0 0): color(srgb 1 0 0).

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

rgb(from hsl(0 100% 50%) 132 132 224)

In the above case, the output color is the sRGB color() equivalent of rgb(132 132 224): color(srgb 0.517647 0.517647 0.878431).

The following function creates a relative color based on the origin color:

rgb(from hsl(0 100% 50%) r 80 80)

This example:

• Converts the origin color (hsl(0 100% 50%)) into an rgb() equivalent (rgb(255 0 0)).
• Sets the R channel value for the output color to the origin color rgb() equivalent's R channel value — 255.
• Sets the output color's G and B channel values to new values not based on the origin color: 80 and 80, respectively.

The final output color is the equivalent of rgb(255 80 80) in the sRGB color space — color(srgb 1 0.313726 0.313726).

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.

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.

rgb(from hsl(0 100% 50% / 0.8) r g b / alpha)
/* Computed output color: color(srgb 1 0 0 / 0.8) */

rgb(from hsl(0 100% 50% / 0.8) r g b / 0.5)
/* Computed output color: color(srgb 1 0 0 / 0.5) */

In the following example, the hsl() origin color is again converted into an rgb() representation — rgb(255 0 0). calc() calculations are applied to the R, G, B, and A values. After calculating, the R, G, B and A values are 127.5, 25, 175, and 0.9 respectively. The final output color is the equivalent of rgb(127.5 25 175 / 0.9) in the sRGB color space: color(srgb 0.5 0.0980392 0.686275 / 0.9).

rgb(from hsl(0 100% 50%) calc(r/2) calc(g + 25) calc(b + 175) / calc(alpha - 0.1))

<rgb()> = 
  <legacy-rgb-syntax>  |
  <modern-rgb-syntax>  

<legacy-rgb-syntax> = 
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )      

<modern-rgb-syntax> = 
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<alpha-value> = 
  <number>      |
  <percentage>  

In this example, we have three <div> elements with different background colors displayed over a striped background.

HTML

<div>
  <div id="integer"></div>
  <div id="percent"></div>
  <div id="alpha"></div>
</div>

CSS

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 <body> to better demonstrate the transparency of alpha channels.

div {
  display: flex;
  gap: 20px;
  height: 50px;
  flex: 1;
}
body {
  height: calc(100vh - 20px);
}

body {
  background: repeating-linear-gradient(-45deg, #eee 0 2px, #fff 2px 6px);
  padding: 10px;
}

#integer {
  background-color: rgb(189 85 218);
}

#percent {
  background-color: rgb(74% 33% 85%);
}

#alpha {
  background-color: rgb(189 85 218 / 0.25);
}

Result

This example styles three <div> elements with different background colors. The left-hand one is given the unmodified --base-color, while the middle and right ones are given variants of that --base-color that successively remove more from the red channel and add more to the blue channel.

These variants are defined using relative colors — the --base-color custom property is passed into an rgb() function, and the output color has its red and blue channels modified to achieve the desired effect via calc() functions, while the green channel is left unchanged.

<div id="container">
  <div class="item" id="one"></div>
  <div class="item" id="two"></div>
  <div class="item" id="three"></div>
</div>

CSS

#container {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

.item {
  flex: 1;
  margin: 20px;
}

:root {
  --base-color: orange;
  /* equal to rgb(255 165 0) */
}

#one {
  background-color: var(--base-color);
}

#two {
  background-color: rgb(from var(--base-color) calc(r - 76.5) g calc(b + 76.5));
  /* 76.5 is 30% of 255 */
}

#three {
  background-color: rgb(from var(--base-color) calc(r - 153) g calc(b + 153));
  /* 153 is 60% of 255 */
}

/* Use @supports to add in support for old syntax that requires r g b values to
   be specified as percentages (with units) in calculations. This is required
   for Safari 16.4+. */
@supports (color: rgb(from red r g calc(b + 30%))) {
  #two {
    background-color: rgb(from var(--base-color) calc(r - 30%) g calc(b + 30%));
  }

  #three {
    background-color: rgb(from var(--base-color) calc(r - 60%) g calc(b + 60%));
  }
}

Result

For legacy reasons, the rgb() function accepts a form in which all values are separated using commas.

HTML

<div class="space-separated"></div>
<div class="comma-separated"></div>

CSS

div {
  width: 100px;
  height: 50px;
  margin: 1rem;
}

div.space-separated {
  background-color: rgb(255 0 0 / 50%);
}

div.comma-separated {
  background-color: rgb(255, 0, 0, 0.5);
}

Result

• The <color> data type for a list of all color notations
• sRGB color picker and conversion tool
• Using relative colors
• CSS colors module