HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Colors and Backgrounds

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:

  • 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

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

PropertyDescriptionExample
colorSets text colorcolor: rgb(0, 0, 255);
background-colorSets background colorbackground-color: rgb(240, 240, 240);
border-colorSets border colorborder-color: rgb(255, 0, 0);
outline-colorSets outline coloroutline-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>

Output

Browser Output

css

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.

PreviousCSS HEX ColorsNextCSS Background Color