By Mehdi HassanWhat is brand color palette structure?
Brand color palette structure is the system of roles that tells everyone what each color in your palette is for. Instead of a row of five swatches, a structured palette says: this is the primary, used for recognition; this is the accent, used only for actions; these are the neutrals, used for text and surfaces. Roles are what make a palette usable by people who weren't in the room when it was chosen.
Structure is the step between picking colors and shipping them, covered in our framework for how to choose brand colors. Without it, the same color ends up on a button, a badge, a heading and an error, and none of them mean anything anymore.
What are primary and secondary colors in a brand palette?
The primary color is the one people should associate with your brand: it appears in the logo, key brand moments and some surfaces. Secondary colors support it, adding variety for illustrations, section backgrounds, charts and campaigns without competing for attention.
Role | Main job | UI examples | Avoid using it for |
|---|---|---|---|
Primary | Recognition | Logo, hero background, header bar, brand illustrations | Every heading and every button |
Secondary | Variety and grouping | Section backgrounds, chart series, feature icons, campaign art | Primary actions |
Accent | Action and focus | Primary buttons, links, active tabs, key highlights | Decoration and large areas |
Neutrals | Structure and reading | Body text, backgrounds, cards, borders, dividers | Nothing; they're used everywhere |
Semantic states | Meaning | Success, warning, error and info messages | Brand moments or decoration |
One primary is the norm. Two secondary colors are usually enough. Add more only when you have a clear job for them, such as distinguishing product lines or chart series, and remember that each extra color needs its own tonal scale and its own accessibility testing.
What is an accent color, and when should it differ from the primary?
An accent color is the color reserved for actions and points of focus: primary buttons, links, active states and the one thing on a page you most want clicked. It should differ from the primary whenever the primary can't do that job well, for example because it's too light to carry white text or because it's already used across large surfaces.
The accent works through scarcity. If it appears on buttons and also on headings, icons, borders and backgrounds, the eye has nothing to find. This is one reason we recommend a single primary call to action per section, an idea explored in our guide to how many CTAs to put on a landing page.
- Same as primary works when the primary is a strong, mid-to-dark color that passes contrast with white labels, and the brand uses it sparingly elsewhere.
- A darker tone of the primary works when the primary is light or bright. You keep the hue and gain contrast.
- A different hue works when the primary dominates large surfaces, or when you want actions to pop against it. Check that it doesn't clash with your error color.
Why do neutral palettes matter so much?
Neutral palettes matter because they cover most of what people actually see: body text, backgrounds, cards, borders, table rows and form fields. A brand can have a beautiful primary and still feel cheap if its neutrals are default grays that clash with it. Good neutrals make the whole interface feel considered.
A practical neutral set has a near-white for page backgrounds, one or two light tints for cards and alternate rows, mid grays for borders and placeholder text, a darker gray for secondary text and a near-black for body copy. Tint them slightly toward your primary hue, warm or cool, so they feel related to the brand. Then test text pairs, because mid grays are where contrast failures hide. Our guide to accessible brand colors covers that testing step by step.
Pure black and pure white, or tinted near-black and near-white?
Tinted near-black and near-white usually look better. Pure black text on a pure white background can feel harsh on screens, and pure black surfaces in dark mode can make bright colors glow. A near-black with a slight tint of your primary hue, and an off-white page background, keep contrast high while softening the overall look.
The exception is when the brand is built on stark contrast, such as a deliberately raw, editorial or high-fashion look. Then pure black and white can be the point. Either way, make it a decision rather than a default.
What ratios should you use for a brand color palette structure?
In digital products, a useful starting point for brand color palette structure is that neutrals cover most of the screen, primary and secondary colors take a smaller supporting share, and the accent appears in only a few small, deliberate places. These are working ratios we start from, not rules, and marketing pages can push brand color further than product screens.
Surface | Neutrals | Primary and secondary | Accent |
|---|---|---|---|
Product screens | Almost everything | Logo, nav, small highlights | Primary action, links, active state |
Marketing homepage | Most of the page | Hero, one or two feature sections, illustrations | Main CTA and links |
Pitch and sales decks | Backgrounds and body text | Title slides, section dividers, charts | One highlighted number or claim per slide |
Social and ads | Less dominant | Can lead the composition | The single call to action |
The often-quoted 60-30-10 rule is a reasonable shorthand for posters and decks. For interfaces, the neutral share is usually much larger, which is why brands that look vivid in their guidelines often look calm in their product. That's fine. It keeps actions visible and reading comfortable.
How do semantic and state colors fit the palette?
Semantic colors fit the palette as a separate group with a single job: showing meaning, such as success, warning, error and information. They sit outside the brand colors on purpose, so a success message never looks like a brand highlight and an error never looks like a button.
Choose them after the accent, and harmonize them with it. If your brand is cool and blue, slightly cool-leaning greens, ambers and reds look more related than default traffic-light colors. Each semantic color needs a light tone for backgrounds, a mid tone for icons and borders and a dark tone for text. Always pair them with an icon or message, so people who can't distinguish the colors still get the meaning.
State colors for interaction, such as hover, pressed, focus and disabled, are usually built from the accent and neutral scales rather than added as new colors.
How do you document a brand color palette?
You document a brand color palette by listing each color with its role, its tonal scale, its tested text pairs and real examples of correct and incorrect use. A swatch page with hex codes isn't enough; the roles and examples are what prevent drift.
- Role and rule. One sentence per color: what it's for and what it's never for.
- Values. HEX, RGB and a perceptual value such as OKLCH, plus print values if you print.
- Tested pairs. Which text colors pass on which backgrounds, so nobody has to check again.
- UI examples. A button, a card, an alert and a chart in the correct colors.
- Logo pairings. Which logo variations go on which backgrounds.
Put this in your brand guidelines and mirror it in design tokens for the product. For product-led companies, such as a developer brand, the tokens matter more than the PDF. After launch, a CRO audit is a useful check that the accent still draws attention to the actions that matter.
