CSS Colors and Backgrounds
CSS RGB Colors
Define sRGB colors with modern rgb() syntax, percentages, channel values, and optional alpha transparency.
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. The supporting concepts are explained in CSS Colors and CSS HEX Colors.
For example:
rgb(255, 0, 0)→ Redrgb(0, 255, 0)→ Greenrgb(0, 0, 255)→ Blue
Syntax
css
selector {
color: rgb(red, green, blue);
}Example
css
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
Complete CSS RGB Color Example
html
<!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>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| rgb() | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
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.