30

The Color Solid: Visualizing All Colors in Three Dimensions

A chromaticity diagram is a flat map - useful, but it throws away brightness. The honest picture of color is a solid: because every color needs exactly three numbers, all colors fill a three-dimensional shape. The same colors form a cube in RGB, a cylinder in HSL, a cone in HSV, and a lumpy rounded blob in perceptual space. Spin them, slice them, and see why real gamuts taper to a point at black and white.

Foundations · 56 4 Live Demos ~31 min read Color spaces
3D
Color needs three numbers
cube
RGB's natural shape
slice
Cross-sections of the solid
football
Why gamuts taper
01

Why color is a solid

Human color vision is three-dimensional: three cone types mean any color we can see is captured by exactly three numbers. Pick any three independent coordinates - red/green/blue, or hue/saturation/lightness, or L*/a*/b* - and every color is a single point in that 3D space. The full set of representable colors is therefore a solid, a volume you could in principle hold in your hands.

The 2D chromaticity diagram (covered in its own article) is a shadow of this solid - it shows hue and saturation but flattens away lightness, which is why two very different colors (a dark brown and a bright orange) can sit at nearly the same spot on it. To see color whole, you need the third dimension back.

Same colors, different sculptures. A color space is just a choice of coordinates. Change the coordinates and the shape of the solid changes - cube, cylinder, cone, blob - but the colors inside are the same. The art of color science is picking coordinates whose geometry matches the question you are asking.
02

Spin the solid

Here is the same set of colors drawn three ways. RGB arranges them by how much red, green, and blue light each contains - a cube with black and white at opposite corners. HSL re-coordinates them by hue, saturation, and lightness into a cylinder. HSV folds them into a cone, with black at the apex. Rotate each and watch the same colors take a new shape.

Interactive 01 · The color solid

The same colors, three geometries

Choose a model and rotate. Each dot is a real color placed at its coordinates and tinted with its own value, depth-sorted so the solid reads as a volume. The RGB cube has primaries at its corners; the HSL cylinder stacks hue-rings by lightness; the HSV cone tapers to black at the point.

03

Slicing the solid

The other way to understand a 3D shape is to cut it. Take a horizontal slice through the perceptual (Lab) solid at one lightness and you get a disc of every hue and chroma available at that brightness. Slide the cut up and down: near black and near white the slice shrinks to almost nothing; in the middle it is widest. That changing cross-section is the solid's profile.

Interactive 02 · Lightness slice

A cross-section at one lightness

A horizontal slice of the sRGB-within-Lab solid at the chosen lightness, plotted as a* (green to red) against b* (blue to yellow). Colors outside what a screen can show are left dark. Sweep the lightness and watch the in-gamut disc grow and shrink - widest in the midtones, nearly a dot at the extremes.

04

One color, many coordinates

A single color is one point that has a different address in every solid. Pick a color and read its coordinates in each system at once - the same physical color, described by RGB, HSL, and CIELAB. Switching color spaces is just relabelling that one point.

Interactive 03 · The same point

One color's address in three solids

Choose a color; the cards show where that one point sits in the RGB cube, the HSL cylinder, and the CIELAB solid. The color never changed - only the coordinate system used to name it.

05

The object-color solid

Device gamuts (and the set of all possible surface colors) are not nice cubes - they are lumpy shapes pinched at both ends, like a rounded football or a spinning top. The reason is simple once you see it: you cannot have a color that is very dark and very saturated and bright at once. As lightness approaches black or white, the maximum possible chroma falls to zero. Trace that boundary below.

Interactive 04 · Why gamuts taper

The football of realizable color

For each lightness the curve shows the maximum chroma the sRGB gamut can reach - zero at black, rising to a bulge in the middle, back to zero at white. That envelope is the silhouette of the color solid. Move the marker: at your chosen lightness, the swatch shows the most saturated color available - vivid in the midtones, impossible near the extremes.

06

A short history of color solids

Early spheres & cones
Runge's color sphere (1810) and others arranged hue around an equator with white and black at the poles.
The Munsell tree (1905)
An irregular, perceptually-spaced solid - hue, value, chroma - whose lumpy shape honestly reflects available pigments.
The RGB cube
The engineer's solid: three primaries as axes, used by every screen and image format.
CIELAB solid
A perceptually-uniform blob where distance approximates perceived difference - the basis of ΔE.
HSL / HSV
Convenient re-shapings of the RGB cube into a cylinder and a cone for color pickers.
Optimal-color limits
The Rösch-MacAdam solid: the outer boundary of every physically possible surface color.
"Flatten color and you lose half its truth. The diagram is a map; the solid is the territory - and the territory is shaped like a top, fat in the middle and sharp at both ends." Editorial summary · the third dimension
07

Pitfalls and gotchas

Chromaticity = the gamut
The 2D horseshoe ignores lightness. The real gamut is a 3D solid; compare gamuts as volumes.
HSL cylinder is honest
HSL pretends full saturation exists at every lightness; the true solid tapers, so HSL distorts perceived chroma.
Cube edges aren't perceptual
Equal steps in the RGB cube are not equal perceptual steps - use a Lab or Oklab solid for that.
Expecting bright vivid darks
A "bright deep saturated" color is geometrically impossible - the solid is pinched near black and white.
Forgetting the solid is bounded
Even human vision has an outer optimal-color limit; no device or pigment exceeds it.
One projection is the whole
Any single 2D view hides structure. Rotate and slice before trusting a shape.
08

Test your understanding

Six questions on the color solid, its many shapes, slicing, and the object-color limits. 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 solid ties together the diagram, the spaces, and the gamut. Follow the thread.