The Visual Logic of Brand Color Ratios

Proportions Are Part of the System

A brand can have a beautifully chosen color palette and still look inconsistent if nobody has defined the proportions in which those colors are used. The colors themselves are the ingredients. The ratios are the recipe.

I see this failure constantly in brand audits. The palette is solid — three or four well-chosen colors with good contrast and a clear character. But in practice, the colors appear in different proportions on different applications: the marketing coordinator uses the accent color as a primary, the designer uses the primary as a background, someone else uses equal amounts of everything. The result looks like a different brand on every touchpoint.

The 60-30-10 Rule as a Starting Point

The 60-30-10 color ratio is a useful starting point for brand color application. The dominant color — the one most associated with the brand — covers roughly 60% of the visual field. The secondary color covers about 30%. The accent color covers 10% or less.

This isn't a rigid prescription, but it establishes the hierarchy: one color dominates, one supports, one accents. This hierarchy is what creates visual coherence across applications.

I modify the starting ratios based on the brand's specific applications and personality. A brand with a very assertive accent color might use it at 5% rather than 10%, allowing each appearance to register as significant rather than commonplace. A brand with a richer secondary color might use it at 40% and reduce the primary to 50%.

The Neutral as Percentage Anchor

Most brand systems have neutrals — whites, near-whites, light grays — that aren't counted in the branded color ratios but occupy significant visual space. A white background isn't really a color in the brand palette, but it's present in 70% of most digital and print applications.

I count the neutral space explicitly in the ratio planning. If white backgrounds are assumed, the remaining visual space is what the ratios apply to. A 60-30-10 ratio applied to the 30% of the composition that isn't neutral produces a very different result from the same ratio applied to the full composition.

Documenting Ratios in Guidelines

Brand color guidelines typically show the palette — here are our five colors — without specifying how much of each to use. This leaves practitioners guessing at proportions and producing inconsistent results.

I add a usage proportion section to every color guidelines document. For each color, I specify: primary use contexts (headlines, background fields, primary graphic elements), secondary use contexts (supporting elements, borders, secondary typography), and accent-only contexts (call-to-action highlights, small decorative elements, emphasis marks only).

I also include visual proportion examples — small rectangles showing the relative areas of each color in a typical application. These visual examples communicate the intended hierarchy more immediately than text descriptions.

When Proportion Rules Need Multiple Sets

Some brands operate across multiple contexts with different appropriate color hierarchies. A brand might use its primary color as a dominant background in digital advertising while using it as an accent only in formal print materials, with neutral tones dominating instead.

In these cases, I define multiple ratio sets: one for digital and marketing contexts, one for formal print contexts, one for presentation contexts. Each has its own internal consistency; the brand looks consistent within each context type even though the ratios differ between contexts.

The Accent Color's Special Status

The accent color in a brand system is most powerful when it's genuinely rare. If the accent color appears on twenty percent of every application, it's no longer an accent — it's a secondary color. Every appearance of a true accent should feel like a decision, not a default.

I am protective of accent color proportion in brand work. When clients or team members start reaching for the accent color as a go-to element, I redirect: what's the specific reason this element needs the accent color? If the answer isn't "because it's the single most important element in this composition," the accent color isn't the right choice.

Scarcity is what gives accent colors their power.