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.<\/p>\n
The problem only showed up when we lined up their hue angles. Two of them were just 8.8 degrees apart.<\/p>\n
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.<\/p>\n
At 8.8 degrees, you get this: apart, they’re two different colors. Side by side, they look like one color printed badly.<\/strong><\/p>\n When we pick colors, we look at them one at a time. When people use them, they see several at once.<\/p>\n So what a palette really has to deliver isn’t 13 hex codes. It’s this:<\/p>\n We didn’t drop either one, and we didn’t adjust them. We added a rule: the two never appear in the same frame.<\/strong><\/p>\n 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.<\/p>\n A swatch sheet answers “what colors do we have?” A design system answers “can this color go here?”<\/p>\n \u2b50 The second one is the deliverable. The first is a screenshot.<\/p>\n","protected":false},"excerpt":{"rendered":" A palette built from traditional colors looked fine swatch by swatch. Measuring the hue angles showed two that could never sit side by side.<\/p>\n","protected":false},"author":1,"featured_media":1019,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[28],"tags":[],"class_list":["post-2130","post","type-post","status-publish","format-standard","has-post-thumbnail","category-brand-notes-en-us"],"yoast_head":"\nA palette is judged by its relationships, not its colors<\/h2>\n
\n
What we did with those two<\/h2>\n
That’s the difference between a design system and a swatch sheet<\/h2>\n