Main, secondary and accent color: roles in the brand system
What each color actually colors
Most articles in the top only state the formula 'main color — primary, secondary — complementary, accent — attracts attention.' The statement is correct, but useless without linking to specific interface elements or print media. Let's examine this in detail.
| The role of color | What colors | Frequency of use |
|---|---|---|
| Main | Logo, primary buttons, links, site header, key headings | Often — 60% of the visual field |
| Secondary | Block backgrounds, secondary buttons, icons, dividers, navigation | Moderately — 30% |
| Accent | Badge, error/success status, hover states, important notifications, single CTA on the page | Rarely — 10%, targeted |
The key mistake of beginners is to use the accent color for decoration rather than for signaling. Autodesk in its design system explicitly states: the tertiary color should be purely functional — status, hint, warning — and not a decorative element. If the accent color appears on the page ten times, it stops being an accent and becomes noise.
The 60-30-10 rule: transfer from interior to interface
The rule comes not from graphic design. It originated in interior design: walls — 60%, furniture — 30%, decorative accents — 10%. The principle worked in the room and worked in the interface for one reason — the eye needs a large calm area for rest, a medium area for orientation within the structure, and a small bright area for focus of attention.
The problem is that «60-30-10» on paper and «60-30-10» in the real product are different things. On a website, this does not mean «to fill the background with the main color». Usually, it happens like this:
- 60% — neutral surfaces (white, light gray background), not the brand color in its pure form
- 30% — secondary color in navigation, cards, and secondary blocks
- 10% — the main brand color is concentrated in CTA and interactive elements, while the accent color is used in statuses and notifications
A telling example is GitHub: the entire interface is based on neutral grays, while the brand green appears selectively — in buttons and illustrations. This is not a violation of the 60-30-10 rule, but its proper application: the main color does not fill the screen, it marks an action.
The proportion changes on different media
On a printed business card or packaging 60-30-10 works literally — a large background area, a medium area for text and logo, and a small one for accent. In a digital interface, the proportion shifts toward neutrals (white, gray), and within the «colored» part of the brand, the ratio of main/secondary/accent colors is maintained. Trying to mechanically fill 60% of the interface with the brand color is a common mistake that makes the product visually heavy and reduces text readability.
Why equal proportions don’t work
If you distribute all three colors 33% each, the eye cannot understand where to look. Hierarchy disappears: the user cannot distinguish a button from a decorative block, and an error status from regular text. The study by the University of Maryland Loyola shows that using a brand color increases brand recognition by 80%—but this works only with consistent, not chaotic application. Mixing proportions destroys this effect.
The second problem is accessibility. WCAG AA requires a contrast ratio of 4.5:1 for regular text, 3:1 for large text (from 18pt), and 3:1 for non-text UI elements. The AAA level raises the bar to 7:1 and 4.5:1 respectively. Most saturated brand colors of medium tone—green #1FA85A, blue #5B5BFF, orange #FF8800—provide a contrast ratio of 3:1–5:1 against a white background. This is sufficient for large elements, but not enough for main text.
The solution is simple and systemic: a brand color at the middle (500-th) level of saturation is used as a UI accent — buttons, badges, hover states. For text, the same color palette is taken, but at the 700–800 level — a darker tone of the same hue. The brand remains recognizable, but the text is readable and passes contrast checks.
Functional roles and transition to semantic tokens
This is where most articles about color psychology don’t write, but what actually determines how the palette lives in the product. Modern design systems don’t directly use the concepts of 'primary' and 'secondary' color in code — they introduce a layer of semantic tokens that reference the physical brand colors.
| Brand role | Semantic token | Example of application |
|---|---|---|
| Main | --color-interactive | Buttons, links, checkboxes, sliders |
| Secondary | --color-surface, --color-border | Card backgrounds, dividers, secondary navigation |
| Accent | --color-accent, --color-status-* | Badge, errors, success, warnings |
Such an architecture provides a critical advantage: when switching themes (light/dark) or rebranding, it's not hundreds of places in the code that change, but the value of the token. A button component always references --color-interactive — what physically stands behind this token (blue #2D5BFF in light theme or its light version #6E8FFF in dark theme) is decided by the system, not the developer manually. This is the difference between a 'palette of three colors' and a scalable color system.
In white-label products, this model works especially clearly. Each client brand provides only the base color (the main interactive) and optionally a secondary accent and surface colors. All semantic colors — error, success, warning, neutral text tints — are taken from the global layer of the design system and are not redefined by the brand. This saves dozens of hours on each new client and guarantees that the interface will remain accessible regardless of how 'bold' the color chosen by the next brand is.
How to build a multi-step palette from one base color
Three flat colors — this is the minimally viable set, but not a system. A full palette is built through a scale of tints (lighter), tones (with gray added), and shades (darker) for each of the three roles.
- Take the base brand color and fix it as step 500 — this is the 'reference' tone used in the logo and as the primary UI accent.
- Build light steps (50, 100, 200, 300, 400) for backgrounds, low-contrast hover states, and disabled states.
- Build dark steps (600, 700, 800, 900) — they will be used for text, borders with enhanced contrast, and pressed states.
- Repeat the procedure for the secondary and accent color on separate scales — do not mix them with the main scale, otherwise the distinction of roles is lost.
- Check each 'text on background' pair using a contrast calculator and maintain the reference 4.5:1 for text, 3:1 for large elements and UI components.
As a result, instead of three isolated colors, a system of 27–45 controlled values emerges, from which tokens are assembled for light and dark themes, interactive states, and surface levels. This is the moment when the color palette stops being a matter of designer's taste and becomes an engineering asset of the brand — reproducible, testable, and resilient to product scaling.
What each color actually colors
Most articles in the top only state the formula 'main color — primary, secondary — complementary, accent — attracts attention.' The statement is correct, but useless without linking to specific interface elements or print media. Let's examine this in detail.
| The role of color | What colors | Frequency of use |
|---|---|---|
| Main | Logo, primary buttons, links, site header, key headings | Often — 60% of the visual field |
| Secondary | Block backgrounds, secondary buttons, icons, dividers, navigation | Moderately — 30% |
| Accent | Badge, error/success status, hover states, important notifications, single CTA on the page | Rarely — 10%, targeted |
The key mistake of beginners is to use the accent color for decoration rather than for signaling. Autodesk in its design system explicitly states: the tertiary color should be purely functional — status, hint, warning — and not a decorative element. If the accent color appears on the page ten times, it stops being an accent and becomes noise.
The 60-30-10 rule: transfer from interior to interface
The rule comes not from graphic design. It originated in interior design: walls — 60%, furniture — 30%, decorative accents — 10%. The principle worked in the room and worked in the interface for one reason — the eye needs a large calm area for rest, a medium area for orientation within the structure, and a small bright area for focus of attention.
The problem is that «60-30-10» on paper and «60-30-10» in the real product are different things. On a website, this does not mean «to fill the background with the main color». Usually, it happens like this:
- 60% — neutral surfaces (white, light gray background), not the brand color in its pure form
- 30% — secondary color in navigation, cards, and secondary blocks
- 10% — the main brand color is concentrated in CTA and interactive elements, while the accent color is used in statuses and notifications
A telling example is GitHub: the entire interface is based on neutral grays, while the brand green appears selectively — in buttons and illustrations. This is not a violation of the 60-30-10 rule, but its proper application: the main color does not fill the screen, it marks an action.
The proportion changes on different media
On a printed business card or packaging 60-30-10 works literally — a large background area, a medium area for text and logo, and a small one for accent. In a digital interface, the proportion shifts toward neutrals (white, gray), and within the «colored» part of the brand, the ratio of main/secondary/accent colors is maintained. Trying to mechanically fill 60% of the interface with the brand color is a common mistake that makes the product visually heavy and reduces text readability.
Why equal proportions don’t work
If you distribute all three colors 33% each, the eye cannot understand where to look. Hierarchy disappears: the user cannot distinguish a button from a decorative block, and an error status from regular text. The study by the University of Maryland Loyola shows that using a brand color increases brand recognition by 80%—but this works only with consistent, not chaotic application. Mixing proportions destroys this effect.
The second problem is accessibility. WCAG AA requires a contrast ratio of 4.5:1 for regular text, 3:1 for large text (from 18pt), and 3:1 for non-text UI elements. The AAA level raises the bar to 7:1 and 4.5:1 respectively. Most saturated brand colors of medium tone—green #1FA85A, blue #5B5BFF, orange #FF8800—provide a contrast ratio of 3:1–5:1 against a white background. This is sufficient for large elements, but not enough for main text.
The solution is simple and systemic: a brand color at the middle (500-th) level of saturation is used as a UI accent — buttons, badges, hover states. For text, the same color palette is taken, but at the 700–800 level — a darker tone of the same hue. The brand remains recognizable, but the text is readable and passes contrast checks.
Functional roles and transition to semantic tokens
This is where most articles about color psychology don’t write, but what actually determines how the palette lives in the product. Modern design systems don’t directly use the concepts of 'primary' and 'secondary' color in code — they introduce a layer of semantic tokens that reference the physical brand colors.
| Brand role | Semantic token | Example of application |
|---|---|---|
| Main | --color-interactive | Buttons, links, checkboxes, sliders |
| Secondary | --color-surface, --color-border | Card backgrounds, dividers, secondary navigation |
| Accent | --color-accent, --color-status-* | Badge, errors, success, warnings |
Such an architecture provides a critical advantage: when switching themes (light/dark) or rebranding, it's not hundreds of places in the code that change, but the value of the token. A button component always references --color-interactive — what physically stands behind this token (blue #2D5BFF in light theme or its light version #6E8FFF in dark theme) is decided by the system, not the developer manually. This is the difference between a 'palette of three colors' and a scalable color system.
In white-label products, this model works especially clearly. Each client brand provides only the base color (the main interactive) and optionally a secondary accent and surface colors. All semantic colors — error, success, warning, neutral text tints — are taken from the global layer of the design system and are not redefined by the brand. This saves dozens of hours on each new client and guarantees that the interface will remain accessible regardless of how 'bold' the color chosen by the next brand is.
How to build a multi-step palette from one base color
Three flat colors — this is the minimally viable set, but not a system. A full palette is built through a scale of tints (lighter), tones (with gray added), and shades (darker) for each of the three roles.
- Take the base brand color and fix it as step 500 — this is the 'reference' tone used in the logo and as the primary UI accent.
- Build light steps (50, 100, 200, 300, 400) for backgrounds, low-contrast hover states, and disabled states.
- Build dark steps (600, 700, 800, 900) — they will be used for text, borders with enhanced contrast, and pressed states.
- Repeat the procedure for the secondary and accent color on separate scales — do not mix them with the main scale, otherwise the distinction of roles is lost.
- Check each 'text on background' pair using a contrast calculator and maintain the reference 4.5:1 for text, 3:1 for large elements and UI components.
As a result, instead of three isolated colors, a system of 27–45 controlled values emerges, from which tokens are assembled for light and dark themes, interactive states, and surface levels. This is the moment when the color palette stops being a matter of designer's taste and becomes an engineering asset of the brand — reproducible, testable, and resilient to product scaling.
Recent articles
MegaFon, BMW, VTB and more 240+ companies. See how it looks in the showcase reel:
Our branding agency is approached to order:
Branding agency services
