We once built a 13-color palette from a set of traditional colors, each with a name and a story behind it. Every one of them looked good on its own.
The problem only showed up when we lined up their hue angles. Two of them were just 8.8 degrees apart.
What 8.8 degrees means
How far apart two neighboring hues need to be before the eye separates them depends on lightness and chroma. At this chroma, it takes roughly 15 degrees or more before people read them as two colors.
At 8.8 degrees, you get this: apart, they’re two different colors. Side by side, they look like one color printed badly.
A palette is judged by its relationships, not its colors
When we pick colors, we look at them one at a time. When people use them, they see several at once.
So what a palette really has to deliver isn’t 13 hex codes. It’s this:
- The measured contrast of every foreground/background pair, and whether it clears 4.5:1
- Which hues sit too close together and must never be adjacent
- Which colors are too saturated to be anything but accents
- Which step of the neutral scale each role maps to, in dark mode and in light mode
What we did with those two
We didn’t drop either one, and we didn’t adjust them. We added a rule: the two never appear in the same frame.
The same palette had a neutral gray at only 3.01:1, right on the line where it passes for large text and fails for body copy. We kept that too, with its one permitted use written down.
That’s the difference between a design system and a swatch sheet
A swatch sheet answers “what colors do we have?” A design system answers “can this color go here?”
⭐ The second one is the deliverable. The first is a screenshot.
