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.

Digital · 98 4 Live Demos ~3 min read Display tech
R G B
Three subpixels per pixel
additive
Lights add to any color
LCD vs OLED
Filtered vs self-emissive
true black
OLED turns pixels off
01

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.

The core idea: a screen builds every color from three subpixels - red, green, blue - mixed additively in your eye. The technology is just the mechanism for setting each subpixel's brightness: LCD gates a backlight through filters; OLED emits directly. That mechanism decides black level, contrast, and more.
02

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.

Interactive 01 · Magnify the pixel

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.

03

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.

Interactive 02 · Additive build

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.

04

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.

Interactive 03 · The light path

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.

05

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.

Interactive 04 · Black levels & contrast

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.

06

The display, defined

The parts and terms behind the picture.

Subpixel
One of the three colored lights - red, green, or blue - that make up a pixel. Your eye blends them.
RGB stripe
The classic layout: equal red, green, blue subpixels in vertical stripes, one full set per pixel.
PenTile
A layout that shares subpixels between pixels (often extra green), saving subpixels at some cost to color sharpness.
Backlight (LCD)
A constant white light behind an LCD; each subpixel filters and shutters it. Always on, so it leaks at black.
Self-emissive (OLED)
Each subpixel makes its own light and can turn fully off, giving perfect black and per-pixel control.
Contrast ratio
Brightest white divided by darkest black. OLED's near-zero black makes it effectively infinite; LCD is limited by leak.
07

Best practices and pitfalls

Color is still just RGB
Whatever the panel, every color is three subpixels. Design in RGB and let the hardware render it.
Dark UI saves OLED power
OLED pixels off means no power, so dark themes genuinely cut battery on OLED - not on LCD, whose backlight stays on.
Beware PenTile for fine color
Shared subpixels can fringe thin colored text or lines. Give small text luminance contrast and enough size.
Subpixel text is layout-specific
Subpixel anti-aliasing assumes an RGB stripe; it fringes on BGR or rotated screens. Prefer grayscale AA for portability.
Mind OLED burn-in
Static bright elements can age OLED subpixels unevenly. Vary static UI and avoid permanent max-brightness logos.
Black backgrounds pop on OLED
True black lets bright elements float. On LCD, the same design reveals the gray backlight glow - test on both.
"There is no yellow in your phone. There is a red light and a green light, side by side, too small to separate, and an eye generous enough to call their sum 'yellow.' Every image you've ever seen on a screen is that trick, a few million times a frame." Editorial summary · three lights, endlessly
The takeaway: displays make every color from three subpixels - red, green, blue - mixed additively in your eye, laid out as RGB stripes or shared PenTile patterns. LCDs filter a constant backlight (so black leaks to gray); OLEDs emit per subpixel and switch fully off for true black and near-infinite contrast. The color is always RGB; the technology just decides how each light is lit.
08

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

Loading…
 
Question 1 of 6
09

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.