The horseshoe: the visual version

Every widget from the article Why the map of visible color is a horseshoe, in one place, for when you would rather play than read. Under each heading is a short note on what that widget illustrates. Two of them are bigger versions of the article's charts, with more to play with.

Three kinds of cones in the eye

The retina of an average human eye has three kinds of light-sensitive cells, called cones. The curves show how strongly each kind reacts to a single wavelength. The L and M curves overlap a lot, so no light can wake up only one of them. That overlap is why the edge of the horseshoe is curved.

What the three cone types respond to

400500600700100%0wavelength (nm)
  • L cone (long wavelengths)
  • M cone (medium wavelengths)
  • S cone (short wavelengths)
L cone
94%
M cone
98%
S cone
0%

The strip is the closest color your screen can show for each wavelength. A real single wavelength is more vivid than any screen can make, and the ends are dark because the eye barely responds there.

L and M both respond above 90% from 545 to 560 nm.

550 nm

Each cone type reports one number. L and M overlap a lot, so no light can excite one of them alone.

The map and what can show a point

The chromaticity map with x across and y up. Hover or tap a point, or use the x and y sliders, and it tells you which color spaces can show it.

Gamut explorer

0.00.00.20.20.40.40.60.60.80.8D65xy
x, y
0.315, 0.330
u′v′
0.1991, 0.4692
Inside the horseshoe?
yes
sRGB
yes
Display P3
yes
BT.2020
yes
0.315
0.330

Move over the map (or tap it, or use the sliders) to see which color spaces can show that point.

Drawing the horseshoe

Slide through the wavelengths and watch the curve get drawn from the cone responses. The horseshoe is what you can mix from one pure light for every wavelength.

Drawing the horseshoe, one wavelength at a time

0.00.00.20.20.40.40.60.60.80.8xy
Wavelength
380 nm
Chromaticity
x 0.1741, y 0.0050
L cone0%
M cone0%
S cone0%
380 nm

Slide through the pure colors of the rainbow. Each one lands on the curved edge. The straight edge, the line of purples, has no single wavelength: those colors only exist as mixes.

From xy to u′v′

The same colors on the xy chart and on u′v′, a later chart designed so equal distances look more equal. Slide between the two to see the shape change.

The same colors, two different charts

sRGB
34% in xy · 33% in u′v′
Display P3
46% in xy · 42% in u′v′
BT.2020
64% in xy · 57% in u′v′
1931 xy

The same colors drawn with two different coordinates. The physics is identical; the picture is not.

Dragging your own primaries

Drag three to six primaries around and watch how much of the visible color they cover. Three well-placed lights already cover most of it, a fourth adds a lot, and after that the gains get small.

Primaries playground

0.00.00.20.20.40.40.60.60.80.8D65123xy
Primaries
3
Share of visible colors
34%

Drag the numbered points (or focus one and use the arrow keys). The polygon is every color those lights can make.

For the story behind each chart, read the full article.

© 2026, Built with Gatsby