RGB colors in CSS are used to define colors using the Red, Green, and Blue color model.
Each color value ranges from 0 to 255, where:
0means no intensity255means full intensity
The combination of these three values creates a wide range of colors.
For example:
rgb(255, 0, 0)→ Redrgb(0, 255, 0)→ Greenrgb(0, 0, 255)→ Blue
selector {
color: rgb(red, green, blue);
}p {
color: rgb(255, 0, 0);
}👉 This sets the text color to red using RGB format.
Attributes
| Property | Description | Example |
|---|---|---|
| color | Sets text color | color: rgb(0, 0, 255); |
| background-color | Sets background color | background-color: rgb(240, 240, 240); |
| border-color | Sets border color | border-color: rgb(255, 0, 0); |
| outline-color | Sets outline color | outline-color: rgb(0, 255, 0); |
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS RGB Colors</title>
<style>
body {
background-color: rgb(240, 240, 240);
}
h1 {
color: rgb(0, 0, 255);
}
p {
color: rgb(0, 128, 0);
}
div {
border: 2px solid rgb(255, 0, 0);
padding: 10px;
}
</style>
</head>
<body>
<h1>RGB Color Example</h1>
<p>This paragraph uses RGB color.</p>
<div>This box has a red border using RGB.</div>
</body>
</html>Output
Browser Output
The page will have a light gray background
The heading will appear in blue (rgb(0, 0, 255))
The paragraph will appear in green (rgb(0, 128, 0))
The box will have a red border (rgb(255, 0, 0))
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
Notes
- RGB values range from 0 to 255 Allows precise control over colors
- You can also use rgba() to add transparency
Example: rgba(255, 0, 0, 0.5) - Easier to adjust colors dynamically compared to HEX
- Widely supported across all browsers
Conclusion
RGB colors offer a flexible and powerful way to define colors in CSS. With precise control over red, green, and blue values, developers can create a wide variety of colors and even add transparency for modern web designs.