CSS rgb() Function

CSS rgb() Function

The CSS rgb() function defines a color by combining red, green, and blue channel values.

Each channel can use a number from 0 to 255 or a percentage from 0% to 100%. Modern CSS also supports an optional alpha value for transparency, the none keyword for missing components, and relative color syntax.

Syntax

The modern rgb() syntax uses spaces between color channels and an optional slash before the alpha value.

rgb(red green blue)
rgb(red green blue / alpha)

The older comma-separated syntax is also supported:

rgb(red, green, blue)
rgb(red, green, blue, alpha)

For example:

color: rgb(255 0 0);
color: rgb(0 102 204);
color: rgb(100% 0% 0%);
color: rgb(0 102 204 / 50%);
color: rgb(0, 102, 204);

The function returns a CSS <color> value that can be used with properties such as color, background-color, and border-color.

Parameters

The rgb() function uses three color channels and an optional alpha component.

For example:

rgb(0 102 204 / 0.75)

This defines a blue color with 75% opacity.

The alpha component is optional. When omitted, the color is fully opaque.

How It Works

RGB colors use an additive color model. Red, green, and blue light combine to produce different colors.

A channel value of 0 contributes none of that channel, while 255 represents its maximum intensity in the standard numeric notation.

For example:

.heading {
  color: rgb(0 102 204);
}

This sets the heading text to a blue color with no red contribution, a green value of 102, and a blue value of 204.

Numeric Values

Numeric RGB channel values commonly range from 0 to 255.

For example:

color: rgb(255 0 0);
color: rgb(0 128 0);
color: rgb(0 0 255);
color: rgb(128 128 128);

Decimal channel values are also permitted:

color: rgb(25.5 100.5 200.5);

Values outside the usual 0 to 255 range can be written, but they are clamped to the supported channel range when the color is resolved for display.

For example:

color: rgb(300 -20 100);

In the standard RGB color space, this displays like rgb(255 0 100).

Percentage Values

RGB channels can use percentages instead of numbers.

For each channel, 0% corresponds to 0 and 100% corresponds to 255.

For example:

color: rgb(100% 0% 0%);
color: rgb(0% 100% 0%);
color: rgb(0% 0% 100%);
color: rgb(50% 50% 50%);

The first three expressions produce red, green, and blue. The fourth produces a medium gray.

Modern space-separated syntax also permits numbers and percentages in the same expression:

color: rgb(255 50% 0);

In legacy comma-separated syntax, the three channels must all be numbers or all be percentages.

Alpha and Transparency

The optional alpha component controls the opacity of the color.

In modern syntax, a slash separates the alpha component from the three color channels.

For example:

background-color: rgb(0 102 204 / 1);
background-color: rgb(0 102 204 / 0.75);
background-color: rgb(0 102 204 / 0.5);
background-color: rgb(0 102 204 / 0);

For example:

.overlay {
  background-color: rgb(0 0 0 / 60%);
}

This creates a black background color with 60% opacity.

Unlike the opacity property, an alpha value in background-color does not make the element's text or other content transparent.

Modern vs. Legacy Syntax

CSS supports both modern space-separated RGB syntax and older comma-separated syntax.

The modern syntax uses spaces between channels and a slash before alpha.

The legacy syntax uses commas and traditionally uses rgba() for colors with transparency.

Modern CSS treats rgb() and rgba() as aliases, so both function names can express colors with or without alpha.

For new stylesheets, the space-separated syntax is generally preferred because it is consistent with modern CSS color functions.

Relative Colors

Modern CSS supports relative color syntax, which creates a new color from the channels of an existing color.

The from keyword identifies the source color.

For example:

.box {
  background-color: rgb(from #0066cc r g b / 50%);
}

This takes the red, green, and blue channels from #0066cc and applies 50% opacity.

The channel keywords r, g, and b can also be used in calculations:

.box {
  background-color: rgb(from #0066cc r g calc(b * 0.8));
}

This creates a new color by reducing the source color's blue channel to 80% of its original value.

Relative RGB channel keywords resolve to numbers in the 0 to 255 scale, even when the source color was originally written using percentages.

Relative color syntax is useful for creating related colors from a single base color without manually repeating every channel value.

Missing Components

The none keyword represents a missing component in modern CSS color syntax.

For example:

color: rgb(none 102 204);
color: rgb(0 none 204);
color: rgb(0 102 204 / none);

For an ordinary standalone RGB color, missing color channels behave as zero, while a missing alpha component behaves as fully opaque.

Missing components also have special behavior during color interpolation, where they can borrow corresponding components from another color.

For example:

.box {
  background-color: rgb(none 102 204);
}

This displays like rgb(0 102 204) when used as a standalone color.

The none keyword is not the same as the string "none" or the number zero in all color interpolation contexts.

RGB vs. Hexadecimal Colors

RGB and hexadecimal color notation can represent the same colors using different syntax.

For example, these declarations produce the same color:

color: rgb(0 102 204);
color: #0066cc;

RGB notation is convenient when individual channels need to be adjusted or when transparency is specified directly.

Hexadecimal notation is often more compact for fixed colors.

Example

This example demonstrates how different RGB channel combinations produce different background colors.

HTML:

<div class="rgb-demo">
  <div class="rgb-demo-item rgb-demo-red">rgb(255 0 0)</div>
  <div class="rgb-demo-item rgb-demo-green">rgb(0 128 0)</div>
  <div class="rgb-demo-item rgb-demo-blue">rgb(0 102 204)</div>
  <div class="rgb-demo-item rgb-demo-purple">rgb(128 0 128)</div>
</div>

CSS:

.rgb-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 12px;
  padding: 15px;
  background-color: #f1f3f5;
}
.rgb-demo-item {
  padding: 25px 10px;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
}
.rgb-demo-red {
  background-color: rgb(255 0 0);
}
.rgb-demo-green {
  background-color: rgb(0 128 0);
}
.rgb-demo-blue {
  background-color: rgb(0 102 204);
}
.rgb-demo-purple {
  background-color: rgb(128 0 128);
}

Each box uses a different combination of red, green, and blue channel values.

Changing any channel changes the resulting color without requiring a named color or hexadecimal value.

Transparency Example

This example shows how the alpha component changes the appearance of the same RGB color over a patterned background.

HTML:

<div class="rgb-alpha-demo">
  <div class="rgb-alpha-item rgb-alpha-one">100%</div>
  <div class="rgb-alpha-item rgb-alpha-two">75%</div>
  <div class="rgb-alpha-item rgb-alpha-three">50%</div>
  <div class="rgb-alpha-item rgb-alpha-four">25%</div>
</div>

CSS:

.rgb-alpha-demo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 15px;
  background-color: #ffffff;
  background-image: repeating-linear-gradient(
    45deg,
    #e5e7eb 0px 10px,
    #ffffff 10px 20px
  );
}
.rgb-alpha-item {
  padding: 25px 5px;
  color: #111111;
  text-align: center;
  font-weight: bold;
}
.rgb-alpha-one {
  background-color: rgb(0 102 204 / 100%);
}
.rgb-alpha-two {
  background-color: rgb(0 102 204 / 75%);
}
.rgb-alpha-three {
  background-color: rgb(0 102 204 / 50%);
}
.rgb-alpha-four {
  background-color: rgb(0 102 204 / 25%);
}

All four boxes use the same red, green, and blue values. Only the alpha component changes.

As the alpha value decreases, more of the patterned background becomes visible through the box's background color.

The text remains unaffected because the alpha value applies only to the background color.

Common Uses

The rgb() function can define colors throughout a stylesheet.

For example:

:root {
  --primary-color: rgb(0 102 204);
  --primary-transparent: rgb(0 102 204 / 20%);
}
.heading {
  color: var(--primary-color);
}
.panel {
  background-color: var(--primary-transparent);
  border: 1px solid var(--primary-color);
}
.card {
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}

Custom properties allow the same RGB values to be reused throughout a stylesheet.

Limitations

The rgb() function has several important rules and considerations.

• Three color channels are required, although individual channels can use none in modern syntax.
• RGB channel numbers commonly use the 0 to 255 scale, while percentages use 0% to 100%.
• Alpha values use the 0 to 1 scale or percentages from 0% to 100%.
• Modern space-separated syntax uses a slash before alpha.
• Legacy comma-separated syntax cannot mix numbers and percentages among the three color channels.
• The rgb() function defines colors in the sRGB color space, rather than a wider-gamut space such as Display P3.
• RGB values do not directly express perceptual properties such as lightness and hue.
• Relative color syntax requires more recent browser support than basic RGB notation.
• Text and background colors still need sufficient contrast for accessibility.

For example, this is valid modern syntax:

color: rgb(255 50% 0 / 80%);

The following is invalid because modern space-separated syntax does not use commas:

color: rgb(255, 0 0);

The following is invalid because legacy comma-separated RGB channels cannot mix numbers and percentages:

color: rgb(255, 50%, 0);

Use one consistent syntax style within each color expression.

Browser Support

The CSS rgb() function is Baseline Widely available and is supported by all major modern browsers.

Basic numeric and percentage RGB notation has been supported for many years. Modern space-separated syntax and alpha values are also broadly supported.

Relative color syntax, including rgb(from ...), is a newer feature and should be checked separately when compatibility with older browsers is required.

For example:

.box {
  background-color: rgb(0, 102, 204);
  background-color: rgb(0 102 204);
}

The first declaration provides legacy syntax, while the second uses modern syntax.

For current compatibility information, visit Can I Use? and search for CSS RGB color notation or CSS relative colors.

Specifications

The rgb() function is defined in the CSS Color Module Level 4 .

Relative color syntax is further developed in the CSS Color Module Level 5 .

Related CSS functions include rgba(), hsl(), hwb(), color(), and color-mix().