Expand a primary brand color into a working brand system: dark and light primary variants, a hue-shifted secondary, a contrasting accent and three brand-tinted neutrals. Built in OKLCH so every derived color keeps the character of the original, with the classic 60/30/10 usage split explained.
Settings
Generated locally in your browser — your settings and results never leave this page.
A brand system in eight roles
Brand palettes fail in two directions: the monotone brand that paints everything one blue, and the sprawl that accumulates colors until nothing means anything. Eight roles is the working sweet spot this generator encodes — primary with dark and light variants, a hue-shifted secondary, one accent, and three brand-tinted neutrals. Enough range to build an entire product; few enough that every color keeps a job description.
Derivation choices worth understanding
Everything derives in OKLCH from the primary. The dark and light primary variants move only lightness — recognizably the same color responding to context. The secondary rotates hue by your chosen angle while keeping perceived weight (same L, slightly damped C) — a genuine sibling, not a stranger. The accent takes the opposite hue at raised chroma: deliberately foreign, deliberately rare. And the neutrals carry 1–2% of the brand’s chroma — the difference between grays that belong to the brand and grays from a stationery drawer.
The 60/30/10 discipline
The exported palette is designed for unequal deployment: neutrals do 60% of the work (backgrounds, surfaces, body text), the primary family 30% (navigation, actions, emphasis), the accent 10% (the few moments that must pop). The proportions are why eight colors suffice — and inverting them (accent everywhere, neutrals nowhere) is the most reliable way to make a professional palette look chaotic.
Validation before adoption
Two audits turn this from mood board to system: the Contrast Matrix tells you which of the eight can carry text on which (primary-dark and neutral-dark should clear 4.5:1 on neutral-light — verify), and the Color Blindness Simulator checks that primary versus accent survives where those two encode different meanings. Then export tokens and let the naming — roles, not colors — keep the system honest through future rebrands.
The eight roles and their budgets
Role systems work when area budgets are explicit. The generated roles with their intended share of a typical interface:
| Role | Derivation | Area budget |
|---|---|---|
| neutral-light | brand hue at whisper chroma, high L | ~40% |
| neutral / neutral-dark | same recipe, mid and low L | ~20% |
| primary | your color, verbatim | ~15% |
| primary-light / dark | L ± in OKLCH | ~15% |
| secondary | hue-shifted sibling | ~7% |
| accent | opposite hue, raised chroma | ~3% |
The budgets sum to the 60/30/10 doctrine with the arithmetic shown. Products drift from these numbers legitimately — a marketing site runs hotter than a dashboard — but drifting knowingly beats discovering after launch that the accent occupies a third of every screen.
How to use the Brand Color Palette Generator
- Pick your primary brand color.
- Adjust the secondary hue shift to taste.
- Eight brand roles appear: primary trio, secondary, accent, and three neutrals.
- Export and apply with the 60/30/10 guidance.
Frequently asked questions
What is the 60/30/10 rule the tool mentions?
A proportion heuristic from interior design that transfers well to interfaces: about 60% of visual area in neutrals, 30% in the primary family, 10% in accents. It prevents the most common branding mistake – painting everything brand-colored until nothing stands out.
How is the secondary color derived?
By rotating your primary's hue in OKLCH while keeping lightness and most of the chroma – the slider sets the angle, 60° by default. Same perceived weight, different hue: relatives, not strangers. Classic pairs sit at 30-90°; adventurous ones at 120°+.
Why are the neutrals tinted rather than pure gray?
Dead-gray neutrals feel disconnected next to a colorful brand. These carry 1-2% of the brand chroma – imperceptible as "color" but enough to make the whole page feel intentional. It is the difference between a palette and a collection.
What belongs in primary-dark and primary-light?
Primary-dark: hover/active states, text on light surfaces, high-emphasis icons. Primary-light: selected backgrounds, subtle highlights, focus tints. Together with primary they cover the brand family's working range without extra hues.
How do I test whether the accent earns its place?
Mock a screen without it. If nothing needed the pop – some products genuinely do not – drop it and let the secondary carry variety. An accent that appears everywhere is a second primary, which defeats both.
Can I generate a full shade scale per brand role?
Yes – feed any role into the Tailwind Color Palette Generator (50-950 scale) or Shades, Tints and Tones. This tool defines the cast; those tools give each character its wardrobe.
Is the palette ready for accessibility review?
It is structured for it: check primary-dark and neutral-dark as text candidates in the Contrast Checker, and run the eight roles through the Contrast Matrix. Brand identity sets the hues; measurement assigns them jobs.
