How to Choose a Brand Color Palette (That Works on Screen and Paper)
A practical method for picking primary, accent and neutral colours, checking contrast, and exporting a palette your website and documents can share.
Editorial disclosure: Pyalm publishes and maintains the products and free tools discussed on this site. Regulatory statements are linked to primary sources where applicable. No independent professional review is claimed unless a reviewer is explicitly named.
Colour is often the first thing people associate with a brand. A good palette makes your website, social posts, invoices and signage feel like one business. A poor one makes text hard to read and everything look slightly off.
The structure of a working palette
| Role | Count | Used for |
|---|---|---|
| Primary | 1 | Logo, key buttons, headings — your signature colour |
| Secondary | 1 | Supporting elements, illustrations |
| Accent | 1 | Calls to action, highlights — used sparingly |
| Neutrals | 2–4 | Text, backgrounds, borders (tinted greys or off-whites) |
Five swatches is a good starting point; most of what people see will be neutrals.
Step by step
- Start from what you have. Already have a logo? Upload it to the free Color Palette Generator and extract its colours.
- Pick a harmony. Analogous (neighbouring hues) feels calm; complementary (opposite hues) feels energetic; triadic is balanced and playful; monochrome is minimal.
- Lock what you like and press space to regenerate the rest.
- Check readability. Each swatch shows whether white or black text passes contrast on it.
- Export as CSS variables, Tailwind theme, SCSS or JSON.
Colour psychology — lightly
Green suggests growth, finance and health; blue trust and technology; orange energy and affordability; black and gold premium. Context matters more than theory — look at competitors and decide whether to blend in or stand out.
Accessibility is non-negotiable
Body text needs a contrast ratio of at least 4.5:1 against its background (WCAG AA). Many beautiful mid-tone brand colours fail this for text — use them for buttons with white text only if the pair passes. Check pairs with the Color Converter & Contrast Checker.
Screen vs print
Screens use RGB; printers use CMYK. Bright greens and blues can look dull in print. Get a printed proof for business cards and signage, and record official HEX, RGB and CMYK values in a simple brand guide.
Build tints and shades
From each main colour, create a scale (50–900) for hover states, backgrounds and borders. The converter's tints-and-shades strip does this instantly.
Rather have it built?
Pyalm designs and builds fast, conversion-focused websites in Next.js — the same stack these tools run on — with a consistent design system, accessible colours and technical SEO built in.
Related free tools
Color Palette Generator | Color Converter | Box Shadow Generator | Flexbox Playground | All free tools