Color in Real-Time 3D: Albedo, PBR, and Tone Mapping
In a game or a 3D render, the color you paint onto a surface is almost never the color that reaches the screen. A material has a base color - its albedo - but the pixel is that albedo run through light, shading, energy budgets, and a final squeeze from a huge brightness range down to what a monitor can show. Get any step wrong and metal looks like plastic, midtones go muddy, or the sun clips to a flat white disc. This is the interactive guide to color from material to pixel.
The pixel is not the color
In flat design, the color you pick is the color you see. In 3D it is not even close. A surface carries a set of material properties - a base color, how metallic it is, how rough - and a renderer combines those with the lights in the scene to compute the color of every pixel, thousands of times per frame. The same wall is bright where the sun hits, dim in shadow, and tinted by nearby colored light, all from one base color.
Modern real-time rendering does this with physically based rendering (PBR): a set of rules chosen to respect real optics - conserving energy, working in linear light, and modeling metals and dielectrics differently - so materials look consistent under any lighting. And because the internal math produces a huge brightness range, a final tone-mapping step squeezes it down to the display. Understanding these four ideas - albedo, linear light, energy conservation, tone mapping - is understanding color in 3D.
Albedo and the lit pixel
Albedo (or base color) is a material's intrinsic reflectance - the fraction of each color of light it bounces back, with no lighting baked in. It's the color the surface would be under perfectly flat, full white light. The lit pixel is albedo times the light reaching that point, so a single albedo yields a whole range of pixels from bright highlight to near-black shadow. Change the light and watch the same material repaint itself.
One material, many pixels
The flat chip on the left is the material's albedo - its base color, no lighting. The sphere on the right is that same albedo lit: bright toward the light, dark away from it, with a touch of fill. Change the albedo or the light and note that the chip barely moves while the sphere's pixels range across the whole material.
Lighting must be linear
Here is the mistake that plagued a generation of renderers. Light in the real world adds and multiplies linearly, but the sRGB values stored in textures and shown on screens are gamma-encoded - deliberately non-linear. Multiply a gamma value by a light level directly and the math is simply wrong: midtones come out too dark, and blends look muddy. The fix is to decode textures to linear light, do all lighting there, then re-encode to sRGB at the very end. Compare the two.
The same light, wrong and right
Two spheres, the same albedo and the same light. The left is shaded by multiplying the gamma (sRGB) values directly - the old, wrong way; its terminator is too dark and the falloff looks harsh. The right decodes to linear light, shades, then re-encodes - the correct, softer, physically-right gradient. The difference is starkest in the midtones.
Energy conservation
A physical surface can't reflect more light than it receives, so a PBR material splits its reflection into diffuse (soft, colored by the albedo) and specular (the shiny highlight) - and the two must add up to no more than what came in. The metalness parameter controls the split: a dielectric (plastic, wood) is mostly diffuse with a weak white highlight; a metal has essentially no diffuse and a strong highlight tinted by its albedo. Slide from plastic to metal.
Diffuse and specular share one budget
Drag metalness from 0 (dielectric) to 1 (metal), and roughness from glossy to matte. As metalness rises, the diffuse component fades and the specular highlight takes over - and takes on the material's color. The bar shows the energy split; it never exceeds 100%, because a surface can't return more than it gets.
Tone mapping HDR to screen
All that linear lighting produces values far above 1.0 - a bright sky, a specular glint, a fireball. But a display maxes out at 1.0. Naively clamping everything brighter to white throws away all highlight detail and turns the sun into a flat disc. Tone mapping instead rolls the highlights off smoothly with a curve - Reinhard, ACES filmic, and others - keeping gradation and color in the brights. Switch the operator on an over-bright sphere.
Squeezing HDR into a display
A sphere lit far into HDR - its highlight peaks well above 1.0. The curve shows how each operator maps scene brightness (x) to display brightness (y). Clamp clips the highlight to a flat white blob; Reinhard and ACES roll it off so the shape and a hint of color survive. Push the exposure to exaggerate the difference.
The PBR color pipeline
Color in a modern renderer flows through a fixed sequence, and each stage lives in a specific color space:
Best practices and pitfalls
Test your understanding
Six questions on albedo, linear lighting, energy conservation, and tone mapping. Instant feedback, no scores recorded - a wrong answer comes with a short explanation.
Quick check
Continue your journey
Real-time color rests on transfer functions, HDR, tone mapping's cousins in film, and the physics of reflectance - here's where each goes deeper.
Gamma, Linear Light, and Transfer Functions
The linear-vs-gamma foundation all shading depends on.
Digital · 19HDR, Wide Gamut, PQ, HLG, and Modern Displays
The high-range, wide-gamut targets a renderer outputs to.
Digital · 69Color Grading and LUTs
Tone mapping's creative cousin - shaping the look after the render.
Digital · 39Color in Film and Video
Where the ACES filmic curve comes from.
Physics · 3The Physics of Light, Wavelength, and Spectrum
The light and reflectance the whole model approximates.
Physics · 33How Colorants Work
Where a material's albedo actually comes from.