Colors RGB and RGBA
RGB mixes red, green, and blue light in amounts from 0 to 255 each to build any color a screen can display, and its cousin RGBA adds a fourth alpha value from 0 to 1 to control how transparent that color is.
Mixing Light, Not Paint
Every pixel on your screen is actually three tiny lights — one red, one green, one blue — sitting so close together your eye blends them into a single color. RGB in CSS mirrors this directly. rgb(red, green, blue) takes three numbers, each ranging from 0 to 255, that control how strongly that colored light is switched on. This is called additive color: the more light you add, the brighter and closer to white the result gets — the opposite of mixing paint, where more color added tends toward black.
- rgb(0, 0, 0) — no light at all, pure black
- rgb(255, 255, 255) — all three lights at full strength, pure white
- rgb(255, 0, 0) — only red light, pure red
- rgb(0, 255, 0) — only green light, pure green
- rgb(0, 0, 255) — only blue light, pure blue
- rgb(128, 128, 128) — all three channels equal and halfway, a mid gray
A Small RGB Palette
<!DOCTYPE html>
<html>
<head>
<style>
.ocean {
background-color: rgb(20, 90, 150);
}
.sand {
background-color: rgb(230, 210, 170);
}
.coral {
background-color: rgb(240, 110, 90);
}
</style>
</head>
<body>
<div class="ocean">Ocean</div>
<div class="sand">Sand</div>
<div class="coral">Coral</div>
</body>
</html>Adding Transparency With RGBA
RGBA adds a fourth value — alpha — after the usual red, green, and blue: rgba(red, green, blue, alpha). Alpha controls opacity, but on a completely different scale than the color channels: it runs from 0 (fully transparent, invisible) to 1 (fully opaque, solid). A value like 0.5 means the color is applied at half-strength, letting whatever is behind it show through evenly.
A Semi-Transparent Overlay
<!DOCTYPE html>
<html>
<head>
<style>
.modal-backdrop {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.6);
}
</style>
</head>
<body>
<p>Page content behind the overlay.</p>
<div class="modal-backdrop"></div>
</body>
</html>Why Reach for RGB Instead of a Named Color
Named colors like tomato or steelblue are convenient, but there are only a limited, fixed set of them. RGB gives you all 16.7 million combinations of the three channels (256 x 256 x 256), which is what lets you match a brand color exactly, build a smooth gradient between two shades, or reproduce a color you picked up from a design tool or photo.
Exercise: Colors RGB
What is the valid numeric range for each of the R, G, and B channels in rgb()?
