Every pixel on your screen is made of three tiny lights: one red, one green, and one blue. By adjusting each light's brightness from 0 (off) to 255 (maximum), your screen mixes over 16.7 million distinct colors. That number sounds impossibly large, but it comes from simple math: 256 red values multiplied by 256 green values multiplied by 256 blue values equals 16,777,216 combinations.
Additive Color Mixing
RGB is called an additive model because you create brighter colors by adding more light. This is the opposite of paint — mixing all paint colors produces dark brown, but mixing all light produces white. When all three screen lights are at maximum (255, 255, 255), every wavelength of visible light hits your eye simultaneously and your brain perceives white. When all are off (0, 0, 0), no light reaches your eye and you perceive black.
The additive nature explains some initially counterintuitive results. Red light plus green light produces yellow — which feels strange if your experience is with paint, where red and green make brown. But on a screen, yellow is literally the combination of red and green wavelengths hitting your retina at the same time. Your brain interprets that specific combination as yellow.
Using RGB in CSS
In CSS, you write RGB values as rgb(61, 175, 115), where the three numbers represent red, green, and blue intensity. For transparency, use rgba(61, 175, 115, 0.5) — the fourth number controls opacity from 0 (fully transparent) to 1 (fully opaque). This transparency capability is why many developers prefer RGB over HEX for overlays, shadows, and glass effects where partial transparency is essential.
Manipulating RGB Intuitively
Understanding RGB helps you manipulate colors logically without a color picker. Want a lighter version of your blue? Increase all three values proportionally toward 255. Want darker? Decrease toward 0. To desaturate a vivid color, move the three values closer together — rgb(200, 100, 100) is a vivid red, but rgb(170, 130, 130) is a muted, grayish red. The closer the three values are to each other, the more neutral the color becomes. When all three are equal, you get pure gray.
This mental model makes debugging color issues faster. If a color looks too warm, the red channel is probably too high relative to the others. Too cold means blue dominates. A greenish cast means the green channel exceeds what the design intended. You can diagnose and fix color problems by thinking about which channel needs adjustment rather than guessing with a color picker.