We built a 13-color palette for a project, drawn from a set of traditional Japanese colors, each with a name and a story behind it. Every one of them looked good on its own.
Later we lined up all 13 hue angles in a row. The golden yellow and the yamabuki were only 8.8 degrees apart.
How close 8.8 degrees is
How far apart two neighboring hues need to be before the eye separates them shifts with lightness and chroma. In this chroma range, it takes about 15 degrees or more before they read as two colors.
At 8.8 degrees, two colors look distinct when they’re apart. Put them side by side and they look like one color printed off-register.
Picking colors and using them
When we pick colors, we look at one at a time. The people using them see several at once.
So a palette has to hand over more than 13 hex codes. It also has to spell out how they relate:
- The calculated contrast of every foreground/background pair, and whether it reaches 4.5:1
- Which hues are too close to sit next to each other
- Which colors are too saturated to work as anything but accents
- Which step each neutral maps to in dark mode and in light mode
What happened to those two
We didn’t drop them and we didn’t adjust them. We added a rule: the two never appear on the same screen.
The same palette had a neutral gray called Kiri (mist) with a contrast of only 3.01:1, right on the line where it works for large text and fails for body copy. We kept it too, and the guidelines say exactly where it can go.
A swatch sheet tells you which colors you have. The guidelines we hand over also answer whether this color works in this spot.
