The RGB Color Model: How Screens Actually Make Color

Three lights, not three paints

RGB is an additive color model: it describes color as light being emitted, not pigment reflecting light. Every pixel on a screen is physically three sub-pixels — a red, a green, and a blue light source — sitting so close together that your eye can't resolve them individually and blends their light into a single perceived color. Turn all three up fully and you get white; turn them all off and you get black; balance them in between and you get everything else.

This is the exact opposite of how paint behaves. Pigments work subtractively — each one absorbs part of the light hitting it and reflects the rest, so every pigment you add removes more light. Mix red and green paint and each pigment swallows the wavelengths the other would have reflected: you get a dark muddy brown. Mix red and green light and nothing is swallowed — the two stimuli add together, and you see yellow. The first time you watch rgb(255, 0, 0) plus rgb(0, 255, 0) make bright yellow instead of mud, the additive model stops being abstract.

You can verify the sub-pixel story yourself. Put a drop of water on a white area of your phone screen (or use a magnifying glass on a monitor): the drop acts as a lens, and the "white" resolves into distinct red, green, and blue elements. Nothing on the screen is actually white — white is something your visual system constructs when all three primaries arrive together. Screen manufacturers arrange those sub-pixels in different physical layouts (classic vertical stripes on most LCD monitors, various diamond arrangements on OLED phones), but the principle is identical everywhere: three narrowband lights, spatially averaged by your eye.

Why three numbers are enough

There's nothing magical about the number three on the screen side — it's a mirror of the number three on your side. Human color vision comes from three types of cone cells in the retina, sensitive to overlapping ranges centered roughly on long ("reddish"), medium ("greenish"), and short ("bluish") wavelengths. Your brain never sees a light spectrum; it sees three cone response levels and reconstructs color from their ratios.

That's the loophole RGB exploits. A screen doesn't need to reproduce the actual spectrum of a lemon to show you a lemon — it only needs to trigger the same three cone responses the lemon would. Two utterly different light spectra that happen to excite the cones identically are indistinguishable to a human observer; color scientists call this metamerism, and it's the entire reason three primaries can simulate the whole visible palette. Every photo you've ever seen on a screen is a metameric forgery — and a completely convincing one, because your eye has no other information to check it against.

It also explains what happens when one cone type is missing. If the medium-wavelength cone doesn't function, every pair of colors that differed only in that cone's signal collapses together — which is why red and green become indistinguishable in deuteranopia. You can watch this happen to any color in our color blindness simulator, and it's worth internalizing if you design interfaces: RGB is calibrated for three-cone vision, and roughly 1 in 12 men see it through a different filter.

Why 0 to 255

Each channel is stored in one byte — eight bits — which can hold exactly 256 distinct values, from 0 to 255. Three bytes give 256 × 256 × 256 = 16,777,216 possible combinations, which is where the "16.7 million colors" figure on old monitor boxes came from. This 24-bit arrangement is often called true color, and it's still the default for the web, for PNG and JPEG images, and for CSS.

The byte structure also explains HEX codes completely: two hexadecimal digits cover exactly 256 values, so a HEX code is just the same three bytes written compactly. rgb(255, 99, 71) and #ff6347 aren't two similar colors — they're the identical color in two notations, and converting between them (as our converter does live) is pure arithmetic with no rounding and no loss.

Is 256 levels per channel enough? Mostly. It was chosen because it fits perceptual needs just about within one byte: under normal viewing conditions, adjacent levels differ by less than most people can detect. But "just about" shows its seams on smooth gradients — a slow sweep from dark blue to black can display faint visible bands where one 8-bit step is still a hair too coarse. That's why high-end displays and HDR video use 10 bits per channel (1,024 levels, about 1.07 billion combinations); the web is slowly growing syntax to reach them, but 0–255 remains the lingua franca.

The dirty secret: the numbers aren't linear

Here's the part most tutorials skip, and it changes how you should think about every RGB value you read: 128 is not half of 255 in light. A gray of rgb(128, 128, 128) emits only about a fifth of the light of white, not half. The stored numbers are related to physical light output through a curve — the sRGB transfer function, casually called gamma.

This isn't a defect; it's compression tuned to your eyes. Human vision is far more sensitive to differences between dark tones than between bright ones. If the 256 levels were spaced linearly in physical light, the shadows would get a handful of coarse, visibly-banded steps while the highlights wasted dozens of levels on differences nobody can perceive. Spacing the levels along a perceptual curve spends the limited 8-bit budget where your eyes actually are. Every sRGB value you've ever written is gamma-encoded; the display applies the inverse curve when turning your numbers back into photons.

The practical consequence: you can't do honest math on raw RGB values. Average red (255, 0, 0) and green (0, 255, 0) channel-by-channel and you get (128, 128, 0) — an olive that's visibly darker than both parents, because averaging gamma-encoded numbers doesn't average light. Correct blending converts to linear light first, mixes there, and converts back — and even that only fixes brightness, not hue drift. Our color mixer goes a step further and mixes in the perceptual OKLab space precisely because naive RGB interpolation produces those muddy, dark midpoints. If you've ever wondered why your hand-rolled gradient looks dingy in the middle, this is why.

The same trap applies to accessibility math: text contrast is defined by WCAG on relative luminance, which is computed from linearized channels with unequal weights (green counts most, blue least, matching cone sensitivity). Eyeballing channel differences tells you nothing reliable — measure real ratios with a contrast checker.

RGB is a family, not one thing

Strictly speaking, "RGB" alone doesn't fully define a color — you also need to know which red, green, and blue primaries are being used, and what counts as white. A triplet like (255, 0, 0) means "my reddest red," and different screens have different reddest reds. A color space pins this down: primaries, white point, and transfer curve together.

The web standardized on sRGB in the late 1990s, and that's what plain CSS rgb() values, HEX codes, and this site's tools all assume — it's the safe meaning of an unlabeled RGB triplet to this day. Newer screens cover more: Apple devices and most flagship phones support Display P3, whose primaries are noticeably more saturated. color(display-p3 1 0 0) is a visibly more intense red than sRGB's rgb(255, 0, 0) — on hardware that can show it. On hardware that can't, the browser clamps it back toward what the panel can do. That's the honest trade-off of wide gamut in 2026: a progressive enhancement, not a baseline, which is exactly why sRGB remains the right default for values you publish and share.

Learning to read a triplet by eye

Fluent developers read RGB values the way musicians read chords, and the skill is learnable. The rules that get you most of the way:

• Equal channels are gray. (180, 180, 180) is light gray; the moment channels diverge, color appears.
• The largest channel names the hue family. Red dominant leans red/orange/pink; green dominant leans green/yellow-green; blue dominant leans blue/violet.
• The runner-up channel steers it. High red with substantial green is orange or yellow; high red with substantial blue is magenta or pink.
• The gap between the largest and smallest channel is the saturation. A wide spread reads vivid; a narrow spread reads washed-out and grayish.
• The overall level sets lightness — but remember the gamma caveat: the relationship is curved, not proportional.

Run (64, 130, 246) through those rules: blue clearly dominant, meaningful green, low red — a saturated azure blue, medium lightness. That's #4082f6, a whisker from the blue used all over this site. If you want to make the skill automatic, our daily game Color Match is deliberate practice: it shows you a color, you estimate the code, and it scores your guess with a real perceptual-difference measure. A few rounds a day builds the intuition faster than any amount of reading.

RGB in CSS, current edition

The classic comma syntax rgb(255, 99, 71) still works everywhere and always will. Modern CSS prefers space separation with an optional alpha after a slash — rgb(255 99 71 / 0.5) — for consistency with newer functions like oklch() and color(). The old rgba() function survives as a synonym, and eight-digit hex (#ff634780) encodes the same alpha as a fourth byte. Percentages are also legal (rgb(100% 39% 28%)) though rarely seen in practice.

Which notation should you use? For stored, shared, exact values — design tokens, brand guides — HEX is the most compact and universally pasteable. For values you're actively manipulating in code, rgb() keeps the channels legible. And when you're deriving colors (hover states, tint ladders), consider not doing it in RGB at all — that's the one job it's bad at, as the next section explains.

Screens vs. print: RGB vs. CMYK

Print is the other side of the additive/subtractive mirror. Ink on paper can only remove light that the paper would have reflected, so print works in CMYK — cyan, magenta, and yellow inks (each subtracting one RGB primary), plus black for depth and economy. The two systems don't cover the same range of colors: a glowing sRGB blue or vivid green physically cannot be built from reflective ink, which is why on-screen mockups routinely look more electric than what comes back from the printer, and why any RGB↔CMYK conversion is an approximation rather than a translation. If your work is headed to paper, our guide to why print colors never match your screen covers the practical defenses.

Where RGB falls short

RGB is how screens work, but it's a poor model for how humans think about color. Try to make "the same blue, but lighter" and there's no single channel to adjust — all three must change together in a non-obvious, gamma-warped way. Ask "which of these two colors is more saturated?" and the triplets stare back mutely.

That mismatch is why the same underlying values get re-sliced into friendlier coordinate systems. HSL and HSV reorganize the RGB cube around hue, so "lighter" and "more muted" become single-axis moves. And because even those inherit RGB's perceptual unevenness — pure yellow and pure blue sit at the same HSL lightness while looking wildly different in brightness — modern CSS added perceptually uniform spaces, with OKLCH as the current best practice for programmatic color manipulation. None of these replace RGB; they're all views over the same three-light hardware reality, chosen per task.

Common misconceptions, corrected

"RGB values are percentages of brightness." They're not, twice over. First, they run 0–255, not 0–100 — a surprisingly common source of off-by-a-lot bugs when moving between tools. Second, because of gamma encoding, even the normalized value isn't a fraction of emitted light: 50% of the code range is roughly 21% of the photons. Treat the numbers as positions on a perceptual scale, not measurements of light.

"Doubling a channel doubles that color's contribution." Same gamma trap from the other side. Going from (60, 0, 0) to (120, 0, 0) far more than doubles the physical red light, because the encoding curve is steep in the dark range. This is why "just scale the channels" produces lighting effects that look wrong, and why real graphics pipelines do their arithmetic in linear space.

"A monitor can show every color humans can see." No display can. The visible spectrum contains colors — deeply saturated spectral greens and violets especially — that sit outside the triangle any three fixed primaries can mix. sRGB covers a modest portion of human vision; Display P3 covers more; nothing covers it all. Every screen image is a good-enough projection into the display's triangle, which is also why extremely saturated brand colors sometimes simply cannot be reproduced on a given panel — or in print.

"Equal RGB steps look like equal color steps." Even after gamma correction, the RGB cube isn't perceptually uniform: a 10-unit move near gray is far more visible than the same move inside saturated blue, and identical numeric distances can look like completely different amounts of change. When "how different do these look?" is the actual question — checking whether two grays are distinguishable, or whether a brand color drifted in production — the right tool is a perceptual difference metric, which is exactly what our Delta E calculator computes.

"RGB is on its way out because of OKLCH." RGB isn't going anywhere — it's what the hardware physically is, and what every image format stores. OKLCH and friends are better coordinate systems for humans and code layered on top; the browser converts them back to RGB signals before anything reaches the screen. Learn RGB to understand what's actually happening; use perceptual spaces to manipulate it comfortably.

Seeing it in practice

The fastest way to make all of this concrete is to poke at real values. Drop any image into the image color picker and read the RGB triplet of individual pixels — you'll find "white" areas that are (243, 238, 231), and "black" shadows that never reach zero. Convert a few colors in the converter and watch HEX, RGB, and HSL move together. Blend two colors in the mixer and compare the perceptual blend against what naive channel averaging would have produced. The model sticks once you've seen your own screen doing it.