How Displays Make Color: LCD, OLED, and the Subpixel
The screen you're reading this on has no yellow in it, no orange, no pink. It makes every color you see from just three: red, green, and blue, arranged as microscopic subpixels that your eye blends. How it lights them - by filtering a backlight, or by glowing on its own - is the difference between an LCD and an OLED, and it decides everything from black levels to battery life. This is the interactive guide to how a display makes color.
Three lights, every color
A display is a grid of pixels, and every pixel is really three tiny lights - a red, a green, and a blue subpixel, sitting side by side. They're far too small to resolve, so your eye blends them by optical mixing into a single perceived color. Set all three bright and you see white; set red and green bright with blue off and you see yellow. The screen never makes yellow light - it makes red and green light that looks yellow.
This is pure additive color: lights adding together, brighter as you add more, white at the top. It's the opposite of paint. And it means a display's whole job is to control the brightness of three lights per pixel, millions of times over. How it controls them splits the technologies: an LCD filters a shared white backlight; an OLED lets each subpixel emit its own light. Same three colors, two very different machines.
Inside a pixel
Put a drop of water on your phone screen and you can almost see them; magnify a patch here and you definitely can. A solid color, zoomed in, dissolves into a grid of red, green, and blue subpixels at different brightnesses. Displays arrange those subpixels in different layouts - simple RGB stripes, or clever shared patterns like PenTile - each a trade-off you can inspect.
A color is a grid of tiny lights
Pick a color and a subpixel layout, then magnify. The solid swatch on the left is what you see; the panel on the right shows the actual subpixels making it. Notice how the same color is built from red, green, and blue lights at just the right brightnesses - and how the layout arranges them.
Building a color from subpixels
Work it the other way: choose how bright each subpixel glows and watch the color they add up to.
This is exactly what your device does when it draws a pixel - it looks up the three
R, G, B values and lights the subpixels to match. Slide the
three lights and build any color from scratch.
Three sliders, any color
Set the brightness of the red, green, and blue subpixels. The magnified pixel shows the three lights; the swatch shows the color they add to in your eye. Red + green = yellow; all three = white; all off = black. That's additive mixing, one pixel deep.
LCD versus OLED
Two ways to set a subpixel's brightness. An LCD shines a constant white backlight through the whole panel; each subpixel has a color filter (letting through red, green, or blue) and a liquid-crystal shutter that twists to block more or less of it. An OLED has no backlight at all - each subpixel is its own little light-emitting diode, glowing exactly as bright as needed. See the light path of each.
Filter a backlight, or emit directly
Switch between LCD and OLED and set the subpixel level. The LCD path starts with a white backlight, passes a shutter that dims it, then a color filter; the OLED path is just a subpixel emitting its own colored light. Turn the level to zero and watch what each does at black.
The battle for black
That difference shows up most at black. To make black, an OLED simply switches its subpixels off - they emit nothing, a perfect, absolute black, and contrast is effectively infinite. An LCD can't turn off its backlight per pixel; it blocks it with liquid crystal, but the block leaks, so LCD black is really a dark gray. Compare a night scene on each.
Why OLED black is truly black
The same dark image on a simulated LCD and OLED, with an adjustable backlight-leak for the LCD. The OLED's black areas emit nothing; the LCD's black glows a faint gray from leaked backlight. The readout compares the resulting contrast ratios.
The display, defined
The parts and terms behind the picture.
Best practices and pitfalls
Test your understanding
Six questions on subpixels, layouts, LCD versus OLED, and black levels. Instant feedback, no scores recorded - a wrong answer comes with a short explanation.
Quick check
Continue your journey
The subpixel connects to optical mixing, additive color, gamut, and the acuity that makes the trick work - here's where to go next.
Optical Mixing and Pointillism
Why your eye blends the three subpixels into one color.
Foundations · 45Additive and Subtractive Color Mixing
The additive light-mixing a screen runs on.
Vision · 91Chromatic Acuity: Why You See Detail in Brightness, Not Color
Why subpixel rendering and PenTile get away with it.
Digital · 12RGB, sRGB, Adobe RGB, ProPhoto, Display P3, and Rec.2020
Which colors those subpixels can actually reach.
Digital · 19HDR, Wide Gamut, PQ, HLG, and Modern Displays
How black levels and brightness feed HDR.
Digital · 35Bit Depth, Channels, and Alpha
The numbers that set each subpixel's brightness.