What is RGB?

An RGB value tells a screen how much red, green, and blue light to emit at each pixel, and the mix of those three beams is the color you see. The model is additive: the more light you add, the brighter the result. That's the opposite of ink on paper, which gets darker with every layer.

How RGB values are written

Each of the three channels is written as a number from 0 to 255 (the range 8 bits can hold): 0 means none of that light, and 255 means full intensity. A color written as rgb(132 17 170) mixes 132 parts red, 17 parts green, and 170 parts blue, which renders as a deep purple. All three channels at 0 make black; all three at 255 make white.

On the web, the same three numbers are usually written as a hex code: #8411AA is 132, 17, and 170 translated into hexadecimal. The two notations define identical colors, so pick whichever your project's style guide uses.

Using RGB in CSS

In CSS, the rgb() function works anywhere a color does: color: rgb(132 17 170) produces the exact same purple as color: #8411AA. An optional alpha value adds transparency, so rgb(132 17 170 / 0.5) renders that purple at half opacity. The older rgba() function still works, but it's now just an alias for rgb(), according to MDN's rgb() reference.

Color depth and gamut

Most screens use 24-bit color, often called true color: 8 bits per channel gives 256 levels each, and 256 × 256 × 256 works out to 16,777,216 possible colors. The 32-bit setting on older PCs used those same 16.7 million colors plus 8 bits for transparency, while the older 16-bit high color mode topped out at 65,536. Newer displays with 10 bits per channel push past 1 billion.

Even the deepest screen can't show everything. A display's gamut, the range of colors it can physically reproduce, is always smaller than the full range human eyes can see, and sRGB, the web's default color space, covers only part of that. RGB is also device-dependent: the same value can look slightly different from one screen to the next because panels and their calibration vary.

RGB vs. CMYK

RGB and CMYK solve opposite problems:

• RGB is additive. It mixes emitted light, so it's the model for anything shown on a screen: websites, apps, photos, video.
• CMYK is subtractive. It mixes cyan, magenta, yellow, and black ink, and each ink absorbs light instead of emitting it, so it's the model for print.

Keep an editable RGB original of anything you design, and ask your printer what it wants before you export: some print shops require CMYK files converted to a specific ICC profile (a file that describes their printing device), while others ask for RGB and handle the conversion themselves. When a printer does ask for CMYK, expect vivid greens and blues to dull slightly in the conversion, because CMYK reproduces a narrower range of colors than a screen can show.