Build a complete brand colour system with tint/shade scales, WCAG contrast, and font pairing.
A brand colour system is more than a few hex codes. It is a structured set of colours with assigned roles, lighter and darker versions of each, and an accessibility profile that tells you which combinations are readable and which are not. Get this right once and the rest of the design work moves faster, because every decision has an obvious answer.
The Builder covers the full set: role assignment, tint and shade scales, WCAG contrast checking between every pair of colours in the system, colour blindness simulation, and font pairing. Output as CSS variables, Tailwind config, or a downloadable PNG reference card.
| Role | Where it appears | Typical share of the design |
|---|---|---|
| Primary | Logo, headlines, primary buttons | About 30% |
| Secondary | Supporting elements, secondary buttons | About 20% |
| Accent | Highlights, calls to action, hover states | About 10% |
| Neutral | Backgrounds, body text, dividers | About 40% |
Around 8% of men and 0.5% of women have some form of colour vision deficiency. Deuteranopia (red-green) is the most common, followed by protanopia and tritanopia. A palette that relies on red and green to differentiate states, for example a red error and a green success indicator, becomes unreadable for many users without additional cues like icons or text labels.
The simulation in the Builder applies the standard Machado et al. (2009) colour transformation matrices used in browser accessibility tools. The previews show what your palette looks like to people with each form of colour blindness, so you can spot pairs that lose distinction and adjust before the brand goes out.
The Brands tab is a reference database of iconic companies drawn from the Fortune Most Admired list, Interbrand's Global 500, and the most studied identities in design history. Every entry includes the verified hex codes, the reasoning behind the colour choices, the typography system, and the design principle that makes the identity work. Brands are categorised into three tiers that tell you what kind of lesson to draw from each one.
Design Forward brands teach through craft — Nike's swoosh, FedEx's hidden arrow, Airbnb's four-meaning Bélo symbol. Institutional brands teach through restraint — Goldman Sachs's plain wordmark says the name is sufficient. Evolution Story brands reveal business strategy — Sanofi's 2023 purple system communicates a complete category exit from traditional pharmaceuticals. Use the tier filter to focus on the type of lesson your brief requires.
A brand colour system is the full set of colours a brand uses across every surface, with each colour assigned a role. The primary carries the brand's identity and dominates the visual hierarchy. The secondary supports it. The accent draws attention to specific elements like buttons or highlights. The neutral covers backgrounds, body text, and dividers. Together they cover every situation a designer will face without needing to reach for an unsanctioned colour.
Free, with no account and no usage limits. Everything runs in your browser. Nothing is uploaded to a server.
A scale is a series of colours derived from a base, ranging from very light (tints) to very dark (shades). The Builder generates a 9-step scale similar to Tailwind's 50 to 900 stops. It matters because real interfaces need lighter and darker versions of every brand colour for hover states, disabled states, backgrounds, borders, and text. A single hex code is not enough. A scale is.
Freelance designers building brand systems for new clients. Agencies setting up colour and type for a campaign or brand refresh. In-house marketing teams documenting their existing brand for the team to use consistently. Developers building design tokens for a codebase from a brand spec.
Consistent visual identity across your website, social media, and any owned media builds brand recognition. AI search systems like Perplexity and ChatGPT track entities across sources and cite the ones with strongest signals. A brand that uses the same colours and typography everywhere is easier to identify as a single coherent entity than one with inconsistent presentation, and that consistency feeds into the recognition AI systems track.
The brand reference is a database of 320+ iconic companies from across every major industry — Apple, Nike, Hermès, Goldman Sachs, DHL, Lufthansa, and hundreds more. Each entry includes the brand's exact hex colours, the reasoning behind those colour choices, typography recommendations, the design principle that makes the identity work, and notable details most designers never know. Brands are categorised into three design tiers: Design Forward (where visual identity is a primary competitive asset), Institutional (deliberately restrained, teaching through what was left out), and Evolution Story (a transformation moment that reveals business strategy). Use it for inspiration, for competitive research, or click 'Start from this brand' to load any palette directly into the builder.
Yes. Open the Brands tab, find the brand you want to reference, open its detail view, and click 'Start from this brand'. This loads the brand's primary, secondary, and accent colours into the palette builder and switches to the Palette tab, where you can modify, replace, or extend the palette however you need. The brand reference is a starting point for inspiration, not a template — modify freely.