RGB Color

Mix it yourself

Drag a channel and watch the header above change. This is the rgb() function — three numbers, nothing more.

The syntax

Set color for text or background-color for a fill. Both take the same three numbers.

/* three integers, 0 to 255, comma-separated */
h1 {
  color: rgb(217, 90, 60);
}

p {
  background-color: rgb(30, 30, 30);
}

Black, white, and gray

Gray happens whenever all three channels match — the lower the number, the darker the result.

Adding transparency: rgba()

rgba() takes the same three channels plus a fourth value, alpha, from 0 (invisible) to 1 (solid). It's the difference between paint and stained glass.

rgba(217, 90, 60, 0.25)   /* barely there */
rgba(217, 90, 60, 0.6)    /* translucent */
rgba(217, 90, 60, 1)      /* fully opaque */

A few named reference points

Not something to memorize — just a sense of where common colors sit on the 0–255 scale.