Start with roles, not a wall of swatches
A brand palette should help someone decide what to use. Twenty attractive swatches without instructions leave every designer and developer making that decision again. Start with four roles: primary, accent, background, and text. Then add supporting colors only when an application needs them.
For a fictional outdoor booking app, that might mean forest green for primary actions, amber for a small highlight, a warm off-white canvas, and a deep green text color. The amber is not automatically a suitable text color. Its role is to draw attention, while the text color carries the reading experience.
Give each core color a job
- -Primary: the recognizable brand color, used for key actions and identity moments.
- -Accent: a contrasting detail for a small number of highlights.
- -Background: the canvas behind text, product screens, and quieter applications.
- -Text: a reliable foreground color for headings and body copy.
Try the color palette generator to explore a starting combination. Review it in an actual screen before treating it as an approved system.
Expand the palette with supporting shades
Build a few lighter and darker versions of the primary color. A pale version can separate a panel from the page; a darker one can support a reversed logo. You may also need a border color and a muted foreground. Label these by their use, rather than asking teammates to remember which hex value means “subtle panel.”
Avoid turning every supporting shade into another brand color. The core four should remain visible in the overview. Put the detailed scale, values, and rules in a separate guide that people can open when they need it. This keeps a brand board readable without losing implementation detail.
Check the combinations people will actually read
Test body text on the canvas, text inside a primary button, and text over poster artwork. WCAG's minimum contrast criterion calls for at least 4.5:1 for most text, with 3:1 for qualifying large text. The W3C explanation of contrast requirements covers the exceptions and definitions. A color passing on one background does not establish that every use of it passes.
Gradients need special attention. A white heading may look clear over a dark corner and disappear as the background moves. Use a stable text panel or limit the gradient's brightness behind the copy.
Document proportions and exceptions
Show one example with mostly neutral space, a primary block, and a small accent. Treat proportions as an art direction starting point, rather than a formula every layout must obey. A launch poster may be mostly primary; a product dashboard may be mostly background.
Keep error, warning, and success colors in a separate semantic group. They communicate state, so reusing a decorative accent for every status can make a product harder to understand.
A useful color guide includes
- -The core palette and named roles.
- -Supporting shades with exact digital values.
- -Approved foreground and background pairs.
- -A light application and a dark application.
- -A note that print conversions need proofing in the intended print workflow.
Use the brand guidelines template to collect those decisions, then check your live implementation with the brand audit. The aim is a palette people can apply consistently, without asking you to review every button.