rgb() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The rgb() CSS function is used to define colors by specifying the intensity of red, green, and blue components. Each component can be given as a number between 0 and 255 or as a percentage, allowing precise control over the resulting color. This function is part of the broader RGB color model, which is widely used in digital displays to mix colors from these three primary channels.

Unlike hsl(), which defines colors in terms of hue, saturation, and lightness, rgb() focuses on direct additive color mixing. The values for red, green, and blue are combined to produce a wide spectrum of colors, and the resulting color can be applied to any CSS property that accepts a color value, such as color, background-color, or border-color.

For example, rgb(255, 0, 0) represents pure red, rgb(0, 255, 0) is pure green, and rgb(0, 0, 255) is pure blue. You can also use percentages like rgb(100%, 50%, 0%) to achieve an orange tone.

This function can also be combined with rgba() to include an alpha channel for transparency, offering more flexibility in designing layered effects. Using rgb() ensures consistent and predictable color rendering across browsers and is particularly useful when you need precise control over individual color channels.

Syntax

rgb() = rgb( <red>, <green>, <blue> )

Values

<red>This value can be either a <number> or <percentage> where the number 255 corresponds to 100%
<green>This value can be either a <number> or <percentage> where the number 255 corresponds to 100%
<blue>This value can be either a <number> or <percentage> where the number 255 corresponds to 100%

Example

HTML

<div class="card red-box">Red Box</div>

<div class="card green-box">Green Box</div>

<div class="card blue-box">Blue Box</div>

<div class="card custom-box">Custom Mixed Box</div>

CSS

/* General styling for the boxes */

.card {

  width: 200px;

  height: 100px;

  margin: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

  font-family: sans-serif;

  font-weight: bold;

  border-radius: 8px;

}



/* Pure Red: max red, no green, no blue */

.red-box {

  background-color: rgb(255, 0, 0);

}



/* Pure Green: no red, max green, no blue */

.green-box {

  background-color: rgb(0, 255, 0);

}



/* Pure Blue: no red, no green, max blue */

.blue-box {

  background-color: rgb(0, 0, 255);

}



/* Custom Purple: mix of red and blue */

.custom-box {

  background-color: rgb(128, 0, 128);

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS rgb() function. Hover over a browser icon to see the version that first introduced support for this CSS function.