How do you pick a primary color that works for both small buttons and large fills?

Pick a base color that holds up as a small saturated accent, then define lighter or desaturated variants for large areas, because one fixed value cannot serve both demands. A primary color is asked to do two opposite jobs: as a tiny element like a button or an icon it needs to be vivid enough to grab attention, and as a large fill like a hero band or a sidebar it needs to be calm enough not to fatigue the eye. Those demands pull apart, so the method is to treat the primary not as a single swatch but as one color expressed through a family of applications.

The reason a single value fails is that perceived intensity scales with area. A saturated color concentrated in a small shape reads as a crisp, energetic accent, the same color spread across a quarter of the screen becomes a wall of vibration that pushes everything else away and makes text on or near it harder to bear. Turn the dial the other way and the trap reverses: a color soft and pleasant as a large fill is too weak as a tiny accent to register as the action. So whichever single strength you lock in is wrong for one of the two uses by definition. The fix is to choose a base that wins at small sizes, where punch matters most, and derive gentler relatives for the big surfaces where restraint matters more.

In practice this looks like a small set of related values rather than one hex code. Suppose the brand color is a strong blue. You keep that strong blue as the button and accent color, where its saturation is exactly what you want, and you define a noticeably lighter, slightly desaturated tint of the same blue for large fills like section backgrounds, plus perhaps a deep, low-saturation shade for big dark panels. The button still pops, the hero recedes into a comfortable backdrop, and because all three are clearly the same hue, the interface reads as one coherent color story rather than three different blues. The user perceives a single primary; you simply applied the right member of the family to each scale.

The real limit is that a family is not a license to sprawl. The variants should be a deliberate, minimal set tied to scale and role, not an open collection of “blue-ish” options, or you lose the very coherence you were after. Some primaries are also more forgiving than others: a mid-saturation color may genuinely work at full strength across more sizes, while a highly saturated or very dark hue forces the family approach early. And the relationship is one of intent, the small accent should usually be the most saturated member, the large fill the calmest, so the same color always carries the same meaning at every size.

When you choose a primary, evaluate it first as a small accent and confirm it has the punch a button needs, then define a lighter or desaturated variant explicitly for large fills before you ever paint a big surface with it. Lock those variants into your system as named values, and reach for the right one by scale, so the primary works everywhere precisely because you stopped asking one value to do two jobs.