Tutorial Article

CSS RGB Colors

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: The combination of these three values creates a wide range of colors. For example: 👉 This sets the text color to red using RGB format. Attributes Property Description Example […]

Apr 1, 2026CSSCSS Colors & BackgroundsTutorials

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:

0 means no intensity
255 means full intensity

The combination of these three values creates a wide range of colors.

For example:

rgb(255, 0, 0) → Red
rgb(0, 255, 0) → Green
rgb(0, 0, 255) → Blue

Syntax

selector {
    color: rgb(red, green, blue);
}

Example

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

<!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.