Color RGB
Deep dive into the RGB color model with interactive sliders
What Is the RGB Color Model?
RGB stands for Red, Green, and Blue — the three primary colors of light. Every color on your screen is produced by mixing these three channels at different intensities, each ranging from 0 (off) to 255 (full intensity).
RGB is an additive color model: adding all three channels at full intensity produces white, while all channels at zero produces black. This is the opposite of paint mixing, where combining all colors tends toward black (subtractive mixing).
How RGB Mixing Works
Unlike paint, where mixing colors makes them darker, light works the opposite way. Combining colored lights adds energy, making the result brighter. Here are the primary light mixtures:
Common RGB Colors
| Color | Swatch | R | G | B | HEX |
|---|---|---|---|---|---|
| Red | 255 | 0 | 0 | #FF0000 | |
| Green | 0 | 128 | 0 | #008000 | |
| Blue | 0 | 0 | 255 | #0000FF | |
| Yellow | 255 | 255 | 0 | #FFFF00 | |
| Cyan | 0 | 255 | 255 | #00FFFF | |
| Magenta | 255 | 0 | 255 | #FF00FF | |
| White | 255 | 255 | 255 | #FFFFFF | |
| Black | 0 | 0 | 0 | #000000 | |
| Orange | 255 | 165 | 0 | #FFA500 | |
| Purple | 128 | 0 | 128 | #800080 | |
| Pink | 255 | 192 | 203 | #FFC0CB | |
| Gray | 128 | 128 | 128 | #808080 |
Try It — CSS rgb() Syntax
.element {
background-color: rgb(66, 133, 244);
color: #ffffff;
}The Math Behind RGB
Each channel uses 8 bits, giving 256 possible values (0–255). With three channels, the total number of representable colors is 256 × 256 × 256 = 16,777,216 — about 16.7 million unique colors.
In CSS, you can also use percentage notation: rgb(100%, 40%, 0%) is equivalent to rgb(255, 102, 0). Modern CSS also supports the new space-separated syntax:rgb(255 102 0).
rgb(0,0,0) is black, rgb(128,128,128) is medium gray, and rgb(255,255,255) is white.