rgb() CSS Function
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 | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 1 | 1 | 3.5 | 1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 4 | 10.1 | 1 | 1 | 37 |
Last updated by CSSPortal on: 7th October 2023