RGB

How the three channels work

Every pixel on a screen contains three tiny subpixels: one red, one green, one blue. By controlling the brightness of each independently, the screen can produce any color within its gamut.

Combining the three in equal amounts produces neutral grays. All three at zero gives black; all three at 255 gives white:

Why 0–255?

The range 0–255 comes from using one 8-bit byte per channel. 2⁸ = 256 possible values (0 through 255). One byte per channel keeps image files compact and computation fast. The full color space therefore contains 256 × 256 × 256 = 16,777,216 colors — usually described as "16.7 million colors".

Modern CSS also accepts other units:

Additive color mixing

RGB is additive: adding light makes things brighter. Red and green light together produce yellow — not a darker color as you might expect from paint. Green and blue produce cyan; blue and red produce magenta. All three at full intensity produce white.

RGB vs HEX

HEX is simply a more compact way to write RGB. Each channel value between 0 and 255 is written as two hexadecimal digits (base 16). Three pairs form a six-digit HEX code.

rgb(79, 70, 229)
  │   │    │
  4F  46   E5    ← each value in hexadecimal (base 16)
  └───┴────┴────→  #4F46E5

The two representations describe the same color. HEX is shorter and easier to paste into code; RGB is more readable and easier to compute with.

RGB vs sRGB vs Display-P3

RGB is the general model. sRGB and Display-P3 are specific color spaces that define exactly how RGB values map to real colors.

When you write rgb(255, 0, 0) in CSS, browsers interpret it as sRGB by default. To specify a color in a different RGB space, use the color() function: color(display-p3 1 0 0).

Practical syntaxes

/* Classic comma syntax */
color: rgb(79, 70, 229);
color: rgba(79, 70, 229, 0.5);

/* Modern space-separated syntax */
color: rgb(79 70 229);
color: rgb(79 70 229 / 0.5);

/* Percentages */
color: rgb(31% 27% 90%);

/* Wide-gamut */
color: color(display-p3 0.30 0.28 0.90);

Continue reading

Frequently asked questions