CSS RGB & RGBA Colors

CSS RGB colors combine red, green, and blue components to create a color, while an optional alpha value can control the color's transparency.

RGB is based on the red, green, and blue color channels used by digital displays. By changing the amount of each component, you can create millions of different colors.

RGB Syntax

An RGB color is written with the rgb() color function. The three values represent red, green, and blue in that order.

color: rgb(0 136 204);

Each component can use a number from 0 through 255. A value of 0 means none of that color component is added, while 255 represents its maximum amount.

Red, Green, and Blue Values

Using the maximum value for one component while the other two are zero produces the three primary RGB colors.

color: rgb(255 0 0);   /* Red */
color: rgb(0 255 0);   /* Green */
color: rgb(0 0 255);   /* Blue */

When all three components are 0, the result is black. When all three are 255, the result is white.

color: rgb(0 0 0);       /* Black */
color: rgb(255 255 255); /* White */

Equal red, green, and blue values between these extremes produce shades of gray.

Mixing RGB Colors

RGB colors are created by combining different amounts of red, green, and blue light. Mixing two components at their maximum values produces additional colors.

color: rgb(255 255 0);   /* Yellow */
color: rgb(0 255 255);   /* Cyan */
color: rgb(255 0 255);   /* Magenta */

Values do not have to be either 0 or 255. Intermediate values provide precise control over the resulting color.

color: rgb(70 130 180);

This example produces steelblue, one of the named colors used in the site's color palette.

RGB Percentages

RGB components can also be written as percentages. A value of 0% represents none of a component, while 100% represents its maximum amount.

color: rgb(0% 53.3% 80%);

This percentage-based value represents approximately the same color as rgb(0 136 204).

RGB Alpha Transparency

An optional alpha value can be added after a slash to control the opacity of the RGB color.

background-color: rgb(0 136 204 / 0.5);

An alpha value of 1 is fully opaque, 0 is fully transparent, and values between them create partial transparency.

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

Alpha can also be written as a percentage, where 100% is fully opaque and 0% is fully transparent.

Legacy RGBA Syntax

Older CSS commonly used the rgba() function with commas to add an alpha value to an RGB color.

background-color: rgba(0, 136, 204, 0.5);

The rgba() function is still supported, but modern CSS allows the alpha value to be included directly in rgb() using slash syntax.

background-color: rgb(0 136 204 / 0.5);

You will encounter both forms in existing stylesheets, so it is useful to recognize both syntaxes.

RGB & RGBA Example

Use the Red, Green, and Blue sliders to create a color, then adjust Alpha to change its transparency. The current CSS color value updates as the sliders move.

<style>
.color-example {
  background-color: rgb(0 136 204 / 0.8);
  color: white;
}
</style>

<div class="color-example">RGB & RGBA Color</div>

Play in Editor

The first three values determine the color itself. The alpha value changes how much of the content behind the color can show through.