RGB and RGBA Colors

The rgb() function specifies a color by its red, green, and blue intensities as integers from 0 to 255 or as percentages. It maps directly to how screens produce light by combining red, green, and blue sub-pixels.

RGBA and Transparency

The rgba() function adds an alpha channel as a fourth argument — a number from 0 (fully transparent) to 1 (fully opaque). Fractional values produce partial transparency: rgba(0, 0, 0, 0.5) is 50% transparent black. This is commonly used for overlays, shadows, and frosted-glass effects. Modern CSS also allows the new rgb(r g b / a) space-separated syntax, which accepts the same range of values.

rgb(255, 0, 0) — Red
rgb(0, 128, 0) — Green
rgba(0, 0, 0, 0.5) — 50% black overlay
rgb(255 255 255 / 80%) — Modern syntax, 80% white

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>RGB and RGBA</title>
  <style>
    .hero {
      position: relative;
      height: 200px;
      background: url(landscape.jpg) center/cover;
    }
    .overlay {
      position: absolute; inset: 0;
      background: rgba(0, 0, 0, 0.55);
      display: flex; align-items: center;
      justify-content: center; color: white;
      font-size: 2rem; font-weight: bold;
    }
    .chip { display: inline-block; width: 80px; height: 40px;
            margin: 4px; border-radius: 4px; }
  </style>
</head>
<body>
  <!-- Image overlay using rgba -->
  <div class="hero">
    <div class="overlay">Hero Text</div>
  </div>

  <div class="chip" style="background:rgb(231,76,60)"></div>
  <div class="chip" style="background:rgba(231,76,60,0.5)"></div>
  <div class="chip" style="background:rgba(231,76,60,0.2)"></div>
  <p>Same red, different alpha values.</p>
</body>
</html>

HTML

Full Editor

Pro Tip

Use rgba() for overlays rather than setting opacity on the element — the opacity property applies to the whole element including its children, while rgba() only affects the background, leaving text and child elements at full opacity.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned