# 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. Every hue goes through the same steps, so whichever hue you pick, your text gets the same contrast: How every ramp is built, for `proBlue`: 1. Hue: `proBlue` sits at 250°, one of 36 hues. 2. Lightness: each of the 20 stops gets one CIELab L\*, the same in every hue, from 96.5 at `_50` to 10.2 at `_1000`. 3. Chroma: each stop gets one chroma, the most that 29 of the 36 named hues can show in Display P3 there, from 0.017 to a peak of 0.163. A hue that can't reach it keeps 98% of what Display P3 allows. 4. Ramp: #eff6ff, #ddecff, #cbe1fe, #b8d7fe, #a4cbfe, #8fc0fe, #7ab4fd, #63a7fd, #579aef, #508edc, #4882ca, #4176b8, #3a69a5, #335e94, #2c5282, #254771, #1e3b60, #183150, #122640, #0b1c32, in Display P3 hex. 5. Every hue: all 36 families follow the same recipe, so each stop has one lightness across the palette. 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: The live page plots every hue from 0° to 360° at one stop's lightness: the most chroma Display P3 allows there, the one chroma the palette uses at that stop, and the hues that can't reach it. You drag across the 20 stops to move it, and can draw it flat, as a hue wheel, or in 3D as the whole Display P3 gamut with the palette's 720 colors inside. It starts at `_400`, where the palette's chroma is 0.161. [Try it on the live page](https://colortokenskit.com/basics/how-the-colors-were-built/). The colored area is the most [chroma](https://colortokenskit.com/reference/glossary/index.md#chroma), or vividness, that a [Display P3](https://colortokenskit.com/reference/glossary/index.md#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](https://colortokenskit.com/under-the-hood/how-ramps-are-built/index.md#one-chroma-per-stop) 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](https://colortokenskit.com/reference/glossary/index.md#display-p3), which gives every hue more room. When one color should stand out, [`saturate(by:)`](https://colortokenskit.com/api/saturate/index.md) 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: The live page shows twelve hues at HSL lightness 50% next to the same hues at stop `_350`, with a switch that removes the hue. The HSL colors run from L\* 32 (blue) to L\* 97 (yellow); every palette color sits at L\* 72.0. [Try it on the live page](https://colortokenskit.com/basics/how-the-colors-were-built/). 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\*](https://colortokenskit.com/reference/glossary/index.md#cielab-and-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?](https://colortokenskit.com/under-the-hood/why-oklch/index.md) has the color science. ## What about screens without Display P3? Every iPhone since the iPhone 7 can show [Display P3](https://colortokenskit.com/reference/glossary/index.md#display-p3), a wider range of color than [sRGB](https://colortokenskit.com/reference/glossary/index.md#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](https://colortokenskit.com/reference/glossary/index.md#delta-e-ok). [What does the library offer?](https://colortokenskit.com/basics/color-library/index.md) shows every family, stop by stop. ## Sources - The library's [Color+ProColors.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Platform/SwiftUI/Color+ProColors.swift), which places a hue every 10° and says where each name came from, and [UniformRamp.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Services/Ramps/UniformRamp.swift), which sets each stop's lightness and chroma. - Björn Ottosson, [A perceptual color space for image processing](https://bottosson.github.io/posts/oklab/) (2020), which introduces OKLab and OKLCH. - W3C, [CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/), which defines `hsl()`, `oklch()` and `display-p3`. - W3C, [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/), which defines relative luminance and contrast ratio. - Gregory High, Phil Green and Peter Nussbaum, [The Helmholtz–Kohlrausch effect on display-based light colors and simulated substrate colors](https://doi.org/10.1002/col.22839) (2023), which finds the effect strong in blues and negligible in yellows. - Apple, [iPhone 7 technical specifications](https://support.apple.com/kb/SP743), which lists its wide color (P3) display. ## See also - [How accessible is it?](https://colortokenskit.com/basics/how-accessible/index.md): What the palette guarantees for contrast in every hue and mode, and what you still need to check. - [Color theory](https://colortokenskit.com/advanced/color-theory/index.md): Pair stops that always read, and pick secondary hues that match your brand, in both modes. - [Fitting colors into Display P3](https://colortokenskit.com/under-the-hood/gamut-mapping/index.md): Stay inside Display P3 without losing contrast: chroma drops, lightness holds. - [What does equal lightness cost?](https://colortokenskit.com/under-the-hood/trade-offs/index.md): What equal contrast costs, from quieter reds to olive yellows, and what you can do about each. - [How do other color systems choose their colors?](https://colortokenskit.com/under-the-hood/other-color-systems/index.md): Compare how Material, Radix, Tailwind and others pick colors, and what each choice costs you. --- From ColorTokensKit, by Penguin Design Ventures: https://colortokenskit.com/basics/how-the-colors-were-built/ (updated September 26, 2026).