rgb() CSS Function

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The CSS rgb() function is used to define colors using the Red Green Blue (RGB) color model. RGB is a color model that represents color by adding together the intensities of the red, green, and blue components.

The rgb() function takes three parameters, representing the intensity of the red, green, and blue components, respectively. The values can be integers between 0 and 255, or percentage values between 0% and 100%.

For example, the following CSS rule will define the color of the body element to be red:

body {
  color: rgb(255, 0, 0);
}

The following CSS rule will define the color of the h1 element to be 50% green:

h1 {
  color: rgb(0, 128, 0);
}

You can also use the rgb() function to create more complex colors, such as purple or turquoise. For example, the following CSS rule will define the color of the p element to be purple:

p {
  color: rgb(128, 0, 128);
}

The rgb() function is a very powerful tool for defining colors in CSS. It allows you to create any color you can imagine, and it is supported by all major browsers.

Here is a brief summary of the CSS rgb() function:

  • Syntax: rgb(red, green, blue)
  • Parameters:
    • red: The intensity of the red component, as an integer between 0 and 255 or a percentage value between 0% and 100%.
    • green: The intensity of the green component, as an integer between 0 and 255 or a percentage value between 0% and 100%.
    • blue: The intensity of the blue component, as an integer between 0 and 255 or a percentage value between 0% and 100%.
  • Returns: A color value in RGB format.

Example:

body {
  color: rgb(255, 0, 0);
}

h1 {
  color: rgb(0, 128, 0);
}

p {
  color: rgb(128, 0, 128);
}

This will create a red body element, a green h1 element, and a purple p element.

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

<div class="rgb">This is an example of the rgb() function.</div>
.rgb {
background-color: rgb(134, 56, 78);
color: white;
border: 2px solid red;
margin: 20px;
padding: 20px;
text-align: center;
}

Browser Support

The following table will show you the current browser support for the CSS rgb() function.

Desktop
Edge Chrome Firefox Opera Safari
12113.51
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.11137

Last updated by CSSPortal on: 7th October 2023