CSS RGB Colors
The RGB format builds a color by mixing red, green, and blue light, with an optional alpha channel for transparency.
How RGB works
RGB stands for red, green, and blue, the three channels of light your screen combines to make color. You write <rgb()> with three numbers from 0 to 255, one per channel. Higher numbers mean more of that light.
An RGB color
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: rgb(255, 99, 71);
}
</style>
</head>
<body>
<p>This paragraph is tomato colored.</p>
</body>
</html>Reading the numbers
- rgb(0, 0, 0) is black, the absence of all light
- rgb(255, 255, 255) is white, full light on every channel
- rgb(255, 0, 0) is pure red
- Equal amounts of all three make a shade of gray
Adding transparency with RGBA
The <rgba()> form adds a fourth value, the alpha channel, ranging from 0 for fully transparent to 1 for fully opaque. It is perfect for overlays that let the background show through.
Semi-transparent background
<!DOCTYPE html>
<html>
<head>
<style>
.overlay {
background-color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="overlay">Overlay text</div>
</body>
</html>Note: Modern CSS also accepts a space-separated syntax, rgb(255 99 71 / 50%), and rgb() itself now supports alpha, so rgba() is no longer strictly required. The comma form shown here is the most widely supported.
