Extended brand color system (extended palette)
Why an extended palette if there is a main color
The main palette is what makes a brand recognizable: one to two colors, at most three, that a person reads in a fraction of a second and associates with the company. An extended palette does not build recognition — it serves functionality. Statuses, categories, charts, interface states, contrast accessibility, dark theme — all of this cannot be covered by a single brand shade, even if one really wants to maintain visual clarity.
A good reference is the 60-30-10 rule: 60% of the composition is held by the main color, 30% are occupied by additional shades from the extended palette, and 10% is reserved for accents for critical points of attention (CTA, error, important notification). If in a layout the brand color takes up 90% of the space, this is not the strength of the brand, but visual noise: the eye has nothing to grasp, everything screams equally loudly.
When to use the main palette and when the extended one
A practical criterion is simple: if an element is supposed to mark brand affiliation—logo, headers, key CTA—then the main palette works. If an element is supposed to convey information—status, category, risk level, data on a chart—then the extended palette works. Mixing these roles is a typical mistake: for example, using a brand color for both a "Buy" button and an "Overdue" indicator. The user stops understanding what the color means.
| Task | Which palette | Why |
|---|---|---|
| Logo, website header, branded packaging | Main | Builds recognizability |
| Charts, graphs with multiple categories | Extended | Need to distinguish 5–12 groups of data |
| Statuses: success, error, warning | Extended | The meaning of the color is more important than brand association |
| Text on light/dark background | Extended (scale of shades) | Contrast is needed, not a brand tone |
| HR brand, events, special projects | Extended | Maintains recognizability without literal copying of the main palette |
How to build an extended palette so it doesn't clash with the main one
An extended palette harmonizes with the main one if it is built using the same logic of generation, not picked "by eye" from a color library. Practice — to build each color as a scale of 9–11 steps (usually 50, 100, 200 ... 900, 950 following the Tailwind model), where step 500 is a "pure" color from the brandbook, and 600–700 usually go to interactive states: hover, active, focus.
OKLCH is now used almost everywhere for generating such scales, not HSL. The reason is not fashion: the lightness channel (Lightness) in OKLCH is perceptually uniform — equal numerical steps give equal perceived steps of brightness. In HSL, a step at 10% lightness on blue and on yellow is perceived completely differently, which causes scales to become curved and require manual adjustment for each color.
- Determine the role of the new color — status, category, neutral background.
- Set the base tone (step 500) so that it does not conflict in saturation with the main brand color.
- Generate a scale of 50–950 in OKLCH, preserving equal perceptual steps of lightness.
- Check text contrast on each background step according to WCAG.
- Group colors into semantic tokens, not leave "raw" values in the code.
How many colors are needed and how to organize them
There is no universal number, but there is a pattern: the more complex the product, the more shade families an extended palette needs, and this does not mean that a designer is obliged to use them all at once. For example, the Royal London Design System contains 141 shades in the system, but in real interfaces the team works with a curated subset — a large library is needed for flexibility, not to make every screen overly colorful.
It is easier to maintain hierarchy in three layers of tokens:
- Primitive tokens — raw values without meaning, for example
blue-500 = #3B82F6. - Brand tokens — the same values, but tied to a specific brand or product line.
- Semantic tokens — roles, not colors:
primary-action,surface-default,text-primary,status-error.
A component in the code refers only to a semantic token. This provides a critical advantage for dark theme: when switching themes, semantic tokens are reassigned to different primitives, but their names do not change — the interface does not need to rewrite its logic, only the mapping changes.
How this looks in real brandbooks
HPE Design System does not use the brand's marketing palette directly in digital products — it extends base colors with a separate set adapted for interface scenarios: dense tables, long forms, data states. The logic is that the marketing palette is optimized for impact, not readability on screen during an hour of work.
Selectel took a different approach to dividing responsibility: the main palette — blue and red — maintains brand recognition across all channels, while the extended palette adds shades and individual colors for the HR brand and events. This allows the marketing team to create vibrant materials for conferences without risking to 'blur' the core brand code in the eyes of customers.
How to document the extended palette so that the team uses it correctly
The most common reason why an extended palette turns into chaos is the lack of clear documentation explaining what each color is for. Simply listing HEX codes in Figma is not enough: after six months, nobody will remember why a specific shade of green from six similar ones is needed.
In the brandbook, for each color of the extended palette, it is necessary to fix:
- role (semantic token) — what this color represents, not what it is called;
- permissible and prohibited uses — for example, "status-success is not used for decorative elements";
- minimum contrast for text and background at each step of the scale;
- behavior in dark theme — which primitive a token is reassigned to;
- owner of the changes — who approves adding a new color to the system.
Without this fifth point, the extended palette inevitably grows chaotically: every designer adds "their own" shade for a specific task, and within a year the token system turns into a graveyard of unused colors that nobody dares to remove.
Why an extended palette if there is a main color
The main palette is what makes a brand recognizable: one to two colors, at most three, that a person reads in a fraction of a second and associates with the company. An extended palette does not build recognition — it serves functionality. Statuses, categories, charts, interface states, contrast accessibility, dark theme — all of this cannot be covered by a single brand shade, even if one really wants to maintain visual clarity.
A good reference is the 60-30-10 rule: 60% of the composition is held by the main color, 30% are occupied by additional shades from the extended palette, and 10% is reserved for accents for critical points of attention (CTA, error, important notification). If in a layout the brand color takes up 90% of the space, this is not the strength of the brand, but visual noise: the eye has nothing to grasp, everything screams equally loudly.
When to use the main palette and when the extended one
A practical criterion is simple: if an element is supposed to mark brand affiliation—logo, headers, key CTA—then the main palette works. If an element is supposed to convey information—status, category, risk level, data on a chart—then the extended palette works. Mixing these roles is a typical mistake: for example, using a brand color for both a "Buy" button and an "Overdue" indicator. The user stops understanding what the color means.
| Task | Which palette | Why |
|---|---|---|
| Logo, website header, branded packaging | Main | Builds recognizability |
| Charts, graphs with multiple categories | Extended | Need to distinguish 5–12 groups of data |
| Statuses: success, error, warning | Extended | The meaning of the color is more important than brand association |
| Text on light/dark background | Extended (scale of shades) | Contrast is needed, not a brand tone |
| HR brand, events, special projects | Extended | Maintains recognizability without literal copying of the main palette |
How to build an extended palette so it doesn't clash with the main one
An extended palette harmonizes with the main one if it is built using the same logic of generation, not picked "by eye" from a color library. Practice — to build each color as a scale of 9–11 steps (usually 50, 100, 200 ... 900, 950 following the Tailwind model), where step 500 is a "pure" color from the brandbook, and 600–700 usually go to interactive states: hover, active, focus.
OKLCH is now used almost everywhere for generating such scales, not HSL. The reason is not fashion: the lightness channel (Lightness) in OKLCH is perceptually uniform — equal numerical steps give equal perceived steps of brightness. In HSL, a step at 10% lightness on blue and on yellow is perceived completely differently, which causes scales to become curved and require manual adjustment for each color.
- Determine the role of the new color — status, category, neutral background.
- Set the base tone (step 500) so that it does not conflict in saturation with the main brand color.
- Generate a scale of 50–950 in OKLCH, preserving equal perceptual steps of lightness.
- Check text contrast on each background step according to WCAG.
- Group colors into semantic tokens, not leave "raw" values in the code.
How many colors are needed and how to organize them
There is no universal number, but there is a pattern: the more complex the product, the more shade families an extended palette needs, and this does not mean that a designer is obliged to use them all at once. For example, the Royal London Design System contains 141 shades in the system, but in real interfaces the team works with a curated subset — a large library is needed for flexibility, not to make every screen overly colorful.
It is easier to maintain hierarchy in three layers of tokens:
- Primitive tokens — raw values without meaning, for example
blue-500 = #3B82F6. - Brand tokens — the same values, but tied to a specific brand or product line.
- Semantic tokens — roles, not colors:
primary-action,surface-default,text-primary,status-error.
A component in the code refers only to a semantic token. This provides a critical advantage for dark theme: when switching themes, semantic tokens are reassigned to different primitives, but their names do not change — the interface does not need to rewrite its logic, only the mapping changes.
How this looks in real brandbooks
HPE Design System does not use the brand's marketing palette directly in digital products — it extends base colors with a separate set adapted for interface scenarios: dense tables, long forms, data states. The logic is that the marketing palette is optimized for impact, not readability on screen during an hour of work.
Selectel took a different approach to dividing responsibility: the main palette — blue and red — maintains brand recognition across all channels, while the extended palette adds shades and individual colors for the HR brand and events. This allows the marketing team to create vibrant materials for conferences without risking to 'blur' the core brand code in the eyes of customers.
How to document the extended palette so that the team uses it correctly
The most common reason why an extended palette turns into chaos is the lack of clear documentation explaining what each color is for. Simply listing HEX codes in Figma is not enough: after six months, nobody will remember why a specific shade of green from six similar ones is needed.
In the brandbook, for each color of the extended palette, it is necessary to fix:
- role (semantic token) — what this color represents, not what it is called;
- permissible and prohibited uses — for example, "status-success is not used for decorative elements";
- minimum contrast for text and background at each step of the scale;
- behavior in dark theme — which primitive a token is reassigned to;
- owner of the changes — who approves adding a new color to the system.
Without this fifth point, the extended palette inevitably grows chaotically: every designer adds "their own" shade for a specific task, and within a year the token system turns into a graveyard of unused colors that nobody dares to remove.
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
