Skip to content
ColorTokensKitby Penguin Design Ventures
/
Contents
Explanation

How did we choose and build these colors?

Why every hue shares one lightness and one chroma at each stop, and how the 36 hues were named.

Updated View as Markdown

Every hue goes through the same steps, so whichever hue you pick, your text gets the same contrast:

HueAny hue: proBlue sits at 250°
LightnessOne L* per stop, the same in every hue
ChromaThe most 29 of 36 hues reach; the rest keep 98%
Ramp20 stops, from _50 to _1000
Every hue36 ramps, one lightness per row

Here's every hue at one stop. Drag across the stops to watch the cap move, or switch to the wheel or the 3D view:

Try it / Every hue at one stop
View
Stop · drag across_400
_50_1000

L* 67.5 in every hue · chroma cap 0.161 · proTurquoise, proCyan, proCobalt, proIndigo, proIris, proViolet can't reach it

0.00.10.20.3the palette's chroma at _400pinkrubyredtomatocoralorangebrownambergoldmustardyellowolivechartreuselimegrassgreenjadeemeraldminttealturquoisecyanceruleanskyazurebluecobaltindigoirisvioletgrapepurpleorchidplummagentaroseThe palette at _400: one lightness, one chroma, every hue

Colored area: the most chroma Display P3 can show at this lightness, hue by hue. Faded above the line: color we leave out so every hue is equally vivid. Black marks under the line: hues that can't reach the cap, which keep 98% of their maximum.

The colored area is the most chroma, or vividness, that a Display P3 screen like an iPhone's can show at this lightness, hue by hue. The line is the palette's cap, the one chroma every hue gets. The black marks under it are the hues that can't reach it: at _400, turquoise and cyan, and the violet-blues from cobalt to violet. How the ramps are built explains where the cap sits.

Why aren't the colors brighter?#

Because every hue gets the same amount of color at each stop, the most that nearly every hue can show. The faded color above the line is what we give up: pick _600, and red could have twice the chroma it gets.

We tried giving every hue its own sRGB maximum, at the same L*. Light yellows got up to 3.5 times the typical chroma, and yellow-greens even more, so they looked far more colorful than the rest. The darkest indigos and violets got more than twice. Blues with extra chroma also look lighter than they measure (the Helmholtz–Kohlrausch effect), so those dark stops stood out from their neighbors at the same L*.

So every hue keeps one chroma per stop. The palette got more vivid only by moving to Display P3, which gives every hue more room. When one color should stand out, saturate(by:) adds chroma and keeps the contrast.

Why does every hue share one lightness?#

So you can swap one hue for another without checking contrast again. Switch to "Lightness only" to take the hue away:

Try it / Same lightness?
Show

HSL, lightness 50%

L* 53
L* 67
L* 97
L* 90
L* 88
L* 88
L* 91
L* 55
L* 32
L* 41
L* 60
L* 55

ColorTokensKit, stop _350

L* 72
L* 72
L* 72
L* 72
L* 72
L* 72
L* 72
L* 72
L* 72
L* 72
L* 72
L* 72

Every HSL swatch says 50% lightness, yet the lightness your eyes see (L*) runs from 32 to 97. The ColorTokensKit row holds one L* for every hue. Switch to “Lightness only” to see it.

Your eyes don't see every hue as equally bright. At the same HSL lightness, yellow's gray is nearly white and blue's is dark. The palette measures lightness the way your eyes do, as L*, and gives every hue the same one at each stop, so its row turns into one gray. That's why _600 is 4.68:1 on white in every hue. Why OKLCH? has the color science.

What about screens without Display P3?#

Every iPhone since the iPhone 7 can show Display P3, a wider range of color than sRGB, and the palette uses it. That's what lets every hue share 16% to 29% more chroma than the same rule allows inside sRGB.

There's no sRGB fallback. Of the 720 colored stops, 301 are beyond sRGB, and an sRGB-only screen, such as many external monitors, clips them, so they look less vivid there.

How were the 36 hues named?#

There's a hue every 10°, so every family sits the same distance from its neighbors. Eleven of them fill the gaps between the older names: coral, amber, mustard, chartreuse, emerald, turquoise, cerulean, azure, grape, orchid and rose.

The other names come from the library's earlier palette, where each sat at the median hue that nine color systems give it, from Tailwind and Material to Apple's system colors and the XKCD color survey. Each moved 5° or less to land on the grid, a change smaller than a just-noticeable difference. What does the library offer? shows every family, stop by stop.

Sources#

See also