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!

☕ Buy a Coffee

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

HTML

<div class="rgb">This is an example of the rgb() function.</div>

CSS

.rgb {

   background-color: rgb(134, 56, 78);

   color: white;

   border: 2px solid red;

   margin: 20px;

   padding: 20px;

   text-align: center;

}

Result

Editor