How to Build a Brand Color Palette — a Step‑by‑Step Method

Everyone "knows color psychology": blue means trust, red means energy. But between "knowing about blue" and "assembling a working palette of five concrete HEX codes" lies a chasm most DIY brands fall into: the colors are pretty separately and collapse together, text is unreadable on badges, and every layout carries a slightly different shade. Here's the step‑by‑step method: from choosing the primary color to a fixed file of codes.

Step 0The competitor map before taste

The most common mistake is starting with "I like blue". A brand color is market territory, not decoration (how banks divide it, messengers, marketplaces). So the first step is a map: list 5-10 competitors and their primary colors (exact codes are easy to check in our catalog — every page has a "Brand colors" block — or with eyedropper tools). The map reveals which spectrum zones are locked and which are free. The free zone is your shortlist. That's exactly how T-Bank took yellow and Spotify took green.

Step 1The primary: three filters

Run the free‑zone candidates through three filters:

1. Semantic. What should the color say about the brand? Guidance in color psychology in logo design — without fanaticism: context beats "psychology" (Sber's green isn't about ecology but about 180 years of history).
2. Environmental. Where will the color live? An app with a dark theme needs a shade that burns on black — that's exactly why Spotify changed its green; printed packaging needs CMYK reproducibility, and we cover preparing a logo for print separately.
3. Practical. Is there enough contrast for text? White type on your color must pass readability checks (see step 4).

Choose not "a color" but a specific shade: "blue" is a thousand variants from cobalt to teal, and they work differently.

Step 2Accents: the color wheel over intuition

Accents (buttons, highlights, illustration details) are picked not by eye but by the classic wheel schemes:

• Complementary — the color opposite your primary: maximum contrast and energy. Careful: in equal doses the pair "vibrates"; the accent must stay rare.
• Analogous — the wheel neighbors: a calm, "expensive" range, but weak contrast for buttons.
• Triadic — three colors at equal intervals: lively and balanced, demands proportion discipline.

The practical proportion rule is 60/30/10: 60% of a layout is neutral background, 30% the primary, 10% the accent. Palettes where every color is "the main one" don't work.

Step 3Neutrals: the forgotten colors

In real layouts 80% of the area is not brand colors but background and text — fix them too: white or slightly tinted background, dark gray for text (not pure black — it "rings" on white), light gray for borders and dividers. Without defined neutrals every layout drifts — and the visual identity crumbles on the details.

Step 4Checks before fixing

• Contrast. Test text‑background pairs against WCAG (any online contrast checker): at least 4.5:1 for body text. It's not just accessibility — unreadable badges kill button conversion.
• Color blindness. Run the palette through a simulator (built into Figma plugins): 8% of men see red and green differently.
• The combat test. Build three real layouts on the palette: a post, a button, a business card. Palettes gorgeous as swatch circles often collapse in actual composition.
• Dark theme. If the brand lives in apps, check everything on dark — why it's critical is easy to see in streaming service logos.

Step 5Fix it and hold on

The finale is one file (a Figma page, a PDF, even a note) with every color: role name ("primary", "accent", "text"), HEX for screens, CMYK for print. This file is the embryo of a brand book; without it, a month from now your layouts will hold five "almost brand" blues. In Figma also save the colors as Color Styles — then editing a shade updates every layout at once.

Common mistakes

1. Too many colors. Five "primaries" means zero primaries. Strong palettes are frugal: Netflix effectively runs on two colors.
2. A generator palette without the competitor map. A beautiful palette matching the niche leader works for the leader.
3. Unfixed codes. "Roughly this blue" is different in every layout. Cured by the step-5 file.
4. Ignoring the environment. A palette assembled on white paper for a product living in a dark app.
5. Changing the palette on a whim. Color compounds recognition over years — WhatsApp hasn't changed its green since 2009. Patience is part of the method.

Next down the pipeline: choosing a logo font, the full visual identity and commissioning a logo if you work with a designer. And the catalog is the place to study successful palettes — every brand page shows its exact colors.