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

Syntax

css

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

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.

Note:

Accepted values:
rgb(r, g, b) — each channel is 0 to 255 or 0% to 100%
rgb(r g b / a) — modern syntax with alpha
rgba(r, g, b, a) — alpha from 0 to 1 or 0% to 100%
rgb(255 0 0) — pure red
rgb(0 0 0) — black, rgb(255 255 255) is white

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.

Note:

Accepted values:
rgb(r, g, b) — each channel 0 to 255
rgb(r g b) — modern space-separated syntax
rgb(r g b / a) — adds alpha after a slash
rgb(0% 50% 100%) — channels as percentages
rgba(r, g, b, a) — legacy alias with alpha from 0 to 1

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.

Note:

Accepted values:
rgba(r, g, b, a) — alpha from 0 (transparent) to 1 (opaque)
rgb(r g b / 50%) — alpha written as a percentage
hsla(h, s%, l%, a) — HSL color with alpha
#rrggbbaa — 8-digit hex with alpha
transparent — shorthand for fully transparent black

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>

Live Example

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

CSS RGB Colors

The rgb() Function

Mixing Colors with RGB

Adding Transparency with rgba()

RGB vs Other Color Formats

Practical RGB Patterns

Chapter Quiz — Complete all 21 topics to unlock

Login to run this code