Take a magnifying glass to your screen: pixels and subpixels

Short answer

There is no separate source emitting yellow light inside the yellow you see on a screen: that yellow comes from neighboring red and green subpixels lighting up together, and from the eye combining those two lights into a single color. Every pixel is built from three tiny light sources, and on common eight-bit screens each one can glow at any of 256 levels; the combination of all three gives 256 × 256 × 256, or 16,777,216 different colors. How these subpixels are arranged on the screen varies from screen to screen.

Under the magnifying glass

Open a white area on your phone's or computer's screen and look at it through a strong magnifying glass or your phone camera's zoom. The white disappears. In its place, small red, green, and blue lines or dots appear. What you see as white from a distance is these three colors lighting up together.

The eye can't tell these subpixels apart one by one, because at a normal reading distance they're too small. Instead, it combines the light from all three and sees a single color. Why three colored lights are enough to produce every color has to do with the eye's three cone types; that theory itself is the subject of BI-10.

The secret of yellow

The question on the lesson card finds its answer here: is there really yellow light in the yellow you see on a screen?

Examine a yellow area on screen with a magnifying glass. The blue subpixels are dark; the red and green ones are bright. There's no separate "yellow" subpixel on screen. When the eye receives red and green light at the same time, it responds just as if it had received a single yellow light, and it sees yellow. The light a screen produces may contain more or fewer wavelengths that fall in the yellow range, depending on the screen type, but that's not what produces the yellow you see — the mixture of red and green is.

This is a different route from the yellow we see in nature. A lemon's peel reflects back many wavelengths of sunlight together. A screen, instead, mixes only three narrow bands of color and leads the eye to the same response. That two different mixtures of light can look identical to the eye is one of color science's most surprising results, and it's what makes screens possible.

The same is true for every color on screen. Cyan is a mixture of green and blue; magenta is a mixture of red and blue. A human face is produced on screen no differently. A light skin tone, #F1C7A9, is made of subpixels glowing at 241 red, 199 green, and 169 blue; a dark skin tone, #4A2C1D, is the same three subpixels glowing at 74, 44, and 29. In both skin tones, red is the brightest subpixel and blue the dimmest; the difference lies in how brightly each of the three glows. Under the magnifying glass, every face, whatever its skin tone, is the same three colored points of light glowing in different proportions.

16.7 million colors

Every subpixel learns how brightly to glow from a number. How many different values that number can take depends on the screen's bit depth.

Common screens and image files use eight bits for each channel. A subpixel can move from fully dark to fully bright across 256 levels; 0 means no light, 255 means the brightest light. Since each of the three channels can take 256 values, the total number of combinations is 256 × 256 × 256 = 16,777,216. That's where the phrase "16.7 million colors" comes from.

This number looks impressive, but it can lead to a misunderstanding: not all 16.7 million codes look different to the eye, and a screen can't produce every color the eye can see either. The number of codes and the range of colors a screen can display are two separate things; the second one is the subject of EK-04. Where bit depth falls short is in smooth gradients: in an area that changes very slowly, like a sky or the shadow on a face, 256 levels can sometimes leave bands the eye can notice. Higher bit depths, and when they're needed, are covered in later lessons in the screen series.

Subpixel layout

The placement of subpixels on a screen isn't the same everywhere. Under a magnifying glass, on some screens you'll see red, green, and blue subpixels arranged as equal-sized stripes side by side. On other screens, the shapes and counts are different.

A common example is the family of layouts known as PenTile. In this family's basic structure, the RGBG pattern, each pixel has only two subpixels, and the number of green subpixels is twice that of red and blue. This choice is explained by the fact that the eye's peak sensitivity to colored light and fine detail falls around green. Samsung bought the relevant intellectual property from Clairvoyante, the company that commercialized the technology, in 2008.

Different layouts display the same image with small differences: faint colored fringing at the edges of very fine text, edges that look sharper on some screens and softer on others. How a screen produces its light — the difference between LCD's backlighting and OLED's self-emitting pixels — is the subject of EK-03.

Example — a portrait on screen

Open a group portrait in a photo app showing light- and dark-skinned people together, and zoom your phone's camera in close on the screen's surface. On a light-skinned person's cheek, the red and green subpixels glow brightly and the blue ones a bit more dimly. On a dark-skinned person's cheek, the same three subpixels glow much more dimly; red is still the brightest. Between the two, there's no separate light called "skin color."

This observation makes concrete how screens produce color, and it shows something else: every skin tone on screen is the same three channels at different brightness levels. Dark skin tones live in the subpixels' low levels, where the screen's settings, brightness, and bit depth determine whether detail is preserved. That's why testing whether an image looks good across every skin tone means looking not only at light skin tones, but also at the dark skin tones that live in the screen's low levels.

Common misconception

Summary

1. Every pixel is made of subpixels, each glowing in a single primary color; the eye can't see them separately and perceives a combined color.
2. Eight-bit channels give 256 levels; the combination of three channels is 16,777,216 color codes, but the number of codes isn't the same thing as the range of colors a screen can display.
3. Subpixel layout varies from screen to screen; in the PenTile RGBG pattern there are two subpixels per pixel, and every skin tone on screen is produced by the same three channels at different brightness levels.

Test yourself

1. (Easy) What colors of light do the subpixels that make up a screen pixel usually produce?
2. (Easy) How many levels of brightness does an eight-bit channel give?
3. (Medium) Is there really yellow light in the yellow you see on a screen?
4. (Medium) Where does the number 16.7 million come from?
5. (Hard) How does the PenTile RGBG layout differ from a stripe layout, and what explains this choice?
6. (Hard) How are light- and dark-skinned faces produced on screen, and why does testing dark skin tones matter separately?

Answers

1. Red, green, and blue ("Under the magnifying glass").
2. 256 ("16.7 million colors").
3. There's no separate subpixel on screen that emits yellow light. Yellow comes from red and green subpixels lighting up together; the eye perceives these two lights as a single yellow. The light may contain more or fewer wavelengths that fall in the yellow range depending on the screen type, but it's the mixture that produces the yellow we see ("The secret of yellow").
4. Since each channel can take 256 levels, there are 256 × 256 × 256 = 16,777,216 combinations ("16.7 million colors").
5. In a stripe layout, each pixel has three subpixels — red, green, and blue — side by side; in the RGBG pattern there are two subpixels per pixel, and green is at twice the count of red and blue. This is explained by the eye's peak sensitivity falling around green ("Subpixel layout").
6. Both are different brightness levels of the same three subpixels: #F1C7A9 glows at roughly 241, 199, and 169; #4A2C1D at 74, 44, and 29. Because dark skin tones live in the low levels, the screen's settings and bit depth determine whether detail is preserved; that's why they're looked at separately ("The secret of yellow", "Example — a portrait on screen").

Sources

• OLED-Info, "Pentile OLEDs: introduction and market status."
• Charles Poynton, "Digital Video and HD: Algorithms and Interfaces," 2nd edition, Morgan Kaufmann (Elsevier), 2012.
• R. W. G. Hunt, "The Reproduction of Colour," 6th edition, Wiley, 2004.

Next step

EK-02 carries the three brightness levels we saw under the magnifying glass into the language of writing: it lays out, side by side like a dictionary, how the same color is written in four different forms — RGB, hex code, HSL, and HSV — and shows what gets lost when you move from one of these notations to another. EK-04, meanwhile, looks at the colors a screen can't reach: it explains why a color can appear on a new phone and never appear at all on an old monitor, through gamut triangles that grow from sRGB to Rec. 2020.