CSS RGB Colors

RGB describes a color the way a screen actually produces it: by mixing red, green, and blue light at different intensities, from 0 (none) to 255 (full brightness).

In this page:

The rgb() Function
Mixing Colors with RGB
Adding Transparency with rgba()
RGB vs Other Color Formats
Practical RGB Patterns

The rgb() Function

rgb(red, green, blue) takes three numbers from 0 to 255 describing how much of each light channel to mix -- rgb(255, 0, 0) is pure red, rgb(0, 0, 0) is black, and rgb(255, 255, 255) is white. Modern CSS also accepts percentages or a space-separated syntax like rgb(255 0 0), both equivalent to the comma form.

Example: The rgb() Function

css

<style>
.red { background: rgb(255, 0, 0); }
.black { background: rgb(0, 0, 0); }
.white { background: rgb(255, 255, 255); }
</style>
<div class="red">Pure red</div>
<div class="black">Black</div>
<div class="white">White</div>

Mixing Colors with RGB

Because RGB is additive light mixing rather than paint mixing, combining channels behaves differently than intuition from art class -- red and green light together make yellow, not brown. Understanding the additive model helps predict what a given rgb() triple will actually look like before testing it.

Example: Mixing Colors with RGB

css

<style>
.mix {
  background: rgb(255, 255, 0);
}
</style>
<div class="mix">Red light + green light = yellow, not brown</div>

Adding Transparency with rgba()

rgba(red, green, blue, alpha) adds a fourth value from 0 (fully transparent) to 1 (fully opaque) controlling how much of whatever is behind the element shows through. This is the standard way to create semi-transparent overlays, tinted backgrounds, or fade effects without a separate opacity property affecting the whole element.

Example: Adding Transparency with rgba()

css

<style>
.overlay {
  background: rgba(0, 0, 0, 0.5);
  color: white;
}
</style>
<div class="overlay">Semi-transparent overlay</div>

RGB vs Other Color Formats

RGB values map directly to hex color codes (each channel becomes two hex digits), so rgb(255, 0, 0) and #FF0000 are the exact same color -- the choice between them is purely about which is easier to read or write in context. RGB's explicit numeric channels make it especially convenient when a color needs to be calculated or interpolated in JavaScript.

Example: RGB vs Other Color Formats

css

<style>
.rgb-red { background: rgb(255, 0, 0); }
.hex-red { background: #FF0000; }
</style>
<div class="rgb-red">rgb(255, 0, 0)</div>
<div class="hex-red">#FF0000 — the same color</div>

Practical RGB Patterns

A common pattern is defining a base color once and reusing rgba() with different alpha values for hover states, disabled states, or layered shadows, keeping the underlying color consistent while only varying opacity. This avoids maintaining several near-duplicate hex colors for what is conceptually one color at different strengths.

Example: Practical RGB Patterns

css

<style>
.btn {
  background: rgba(37, 99, 235, 1);
}
.btn:hover {
  background: rgba(37, 99, 235, 0.8);
}
</style>
<button class="btn">Hover me</button>

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Colors Next Lesson → CSS HEX Colors