Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Colors and Backgrounds

CSS RGB Colors

Written by Updated

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:

  • 0 means no intensity
  • 255 means 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) → 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>

Browser Support

Feature
Chrome
Edge
Firefox
Safari
rgb()11211

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.

PreviousCSS HEX ColorsNextModern Colors