Lab: the visual version

Every widget from the article Lab: numbers that match what you see, in one place, for when you would rather play than read. Under each heading is a short note on what that widget illustrates. The last one is a bigger version of the article's chart, with more to play with.

The lightness curve

Lab's lightness (L*) is roughly a cube root of the amount of light. The straight line is for comparison. An 18% gray, the "middle gray" of photography, lands halfway.

Luminance vs perceived lightness

Luminance
18%
Perceived lightness L*
49.5
A straight line would say
18
18%

Perceived lightness is roughly the cube root of luminance. An 18% gray lands about halfway up.

HSL lightness vs real lightness

Twelve colors with the same HSL saturation and lightness, and the L* each one really has. Yellow is far lighter than blue, so HSL's "50%" is not one lightness. Flip the switch to see each color as the gray with the same L*.

Same HSL lightness, very different brightness

0°

L* 53

30°

L* 67

60°

L* 97

90°

L* 90

120°

L* 88

150°

L* 88

180°

L* 91

210°

L* 55

240°

L* 32

270°

L* 41

300°

L* 60

330°

L* 55

Twelve colors with the same HSL lightness. Their L* values are all over the place.

The a*/b* plane

A slice of Lab at one lightness: a* across, b* up, gray in the middle. Pick a point to see its color, chroma and hue, and whether sRGB can show it. Close to black or white there is almost no room for color.

Lab explorer

Lightness L*
50
Green–red a*
0
Blue–yellow b*
0
Chroma C
0.0
Hue h
0°
Hex
#777777
50
0
0

One slice of Lab at a fixed lightness. The hatched area is colors sRGB can't show at this lightness.

For the formulas and the reasoning, read the full article.

© 2026, Built with Gatsby