How to Choose Brand Colors That Hold Up Everywhere

A lot of brand palettes are chosen in a slide deck and fail in a browser. The blue looked confident on a big screen and turns out to be unreadable as button text. The soft green that felt caring makes body copy fade on a phone in sunlight. If you are working out how to choose brand colors, the question to start with is "which colors will still work in every place we use them?"

This is the method we use. It starts with strategy, moves to the color choices, and ends with the tests and the documentation that keep a palette working for years.

Step 1: Decide what the color has to do

Color does three jobs for a brand: it makes you recognizable, it sets a tone, and it organizes information on a page. Before picking anything, write down:

• Two or three words for the tone. Calm and established for a CPA firm. Warm and dependable for a home care agency. Energetic for a restaurant.
• Where the color will live. Website, app, signage, vehicles, uniforms, packaging, printed forms. A palette for a printing company's trucks has different constraints from one that only lives on a website.
• What it must not be confused with. Your direct competitors.

Be careful with color meaning. Nielsen Norman Group notes that "color interpretation will vary from culture to culture," and meanings that work in one market "will likely not work worldwide." Treat tone words as a guide and test the colors with real customers.

Step 2: Audit the competition

Collect the logos and websites of the ten businesses your customers compare you with. Lay them out on one page.

Look for the pattern. If most of the home care agencies in your area use soft blues and greens, or most accounting firms you compete with use navy, another brand in the same color will blend in. You do not need to pick a strange color to stand out; a different lead color, or a familiar color used with a distinctive accent, is usually enough.

Step 3: Build the palette in roles

A palette is a set of colors with jobs. Assign the roles before picking exact values:

1. One lead color. The color people should remember. Used for the logo, key headings and main buttons.
2. One or two supporting colors. For sections, illustrations and secondary elements.
3. Neutrals. A near-black for text, a white or off-white for backgrounds, and two or three grays for borders and muted text. Neutrals carry most of the page.
4. One accent. Used sparingly, for the thing you want clicked or noticed.
5. Status colors if you have a site or app with forms: error, warning, success.

Nielsen Norman Group recommends you "limit your palette to three colors" for most designs, because "a small number of colors reinforces visual hierarchy." The same article describes the 60-30-10 rule: the dominant color across 60% of the design area, a secondary color across 30% and an accent in 10%. It adds that the dominant and secondary colors should usually be fairly neutral, which is why the neutrals in your palette matter as much as the lead color. Use the rule as a starting point when you mock up pages.

Step 4: Check contrast before you fall in love

This is the step that sends palettes back for rework. The Web Content Accessibility Guidelines (WCAG 2.2) set measurable contrast ratios:

• Body text: at least 4.5:1 against its background.
• Large text: at least 3:1. WCAG defines large text as at least 18 point, or 14 point bold.
• Buttons, form fields, icons and focus outlines: at least 3:1 against adjacent colors, under the non-text contrast criterion.

Logos get an exemption: "Text that is part of a logo or brand name has no contrast requirement." That exemption covers the logo itself, though, not the rest of the site. If your lead color is a light yellow, you can use it in the logo, but you cannot use it for white button text and stay accessible.

A practical test for each color you plan to use with text:

• Run it through a contrast checker against white and against your near-black.
• Note which combinations pass at 4.5:1 and which only at 3:1.
• If the lead color fails for text, define a darker shade of it for text and buttons.

Here is a worked example with a made-up palette for a hypothetical home care agency. The ratios are calculated with the WCAG formula:

• Deep teal #0F766E on white: 5.47:1. Passes for body text and buttons.
• Bright teal #14B8A6 on white: 2.49:1. Fails for text and for button outlines. On the near-black it reaches 7.13:1, so it can be used on dark sections.
• Amber accent #F59E0B on white: 2.15:1. Fails with white text. With near-black text on an amber button it reaches 8.26:1.
• Near-black #111827 on white: 17.74:1. Fine for all text.

The decision that falls out: deep teal is the lead color for text and buttons, bright teal is decoration only on light backgrounds, and amber buttons always carry dark text.

Step 5: Do not rely on color alone

WCAG's use-of-color criterion says color should not be "the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element." In practice:

• Links in body text need an underline or another visual cue as well as a color change.
• Form errors need a message or an icon as well as a red border.
• Charts need labels or patterns as well as colors.

A quick check: turn your mockup to grayscale. If you can still tell what is a button, which line on a chart is which, and where the error is, you are in good shape.

Step 6: Specify every value for every medium

A palette is only finished when anyone can reproduce it. For each color, record:

• HEX and RGB for screens.
• CMYK for standard print, set with your printer and checked on the paper you will actually print on.
• A spot color reference if you print signage or packaging where an exact match matters.
• The approved text pairings, with their contrast ratios.

Then test in the real world: print a business card, a letter and a sign mockup, and view the website on a cheap phone outdoors. Adjust before you sign off.

Mistakes to avoid when you choose brand colors

• Choosing from a single swatch. Colors look different at scale and next to each other. Always judge them in a layout.
• Too many colors. Every extra color is another decision for every designer who touches the brand.
• Light lead colors with white text. It looks fine in a deck and fails contrast on the site.
• No darker or lighter tints. Without them, designers invent their own and the palette drifts.
• Skipping documentation. The palette belongs in your guidelines; our post on what brand guidelines are shows what goes in them.

How we choose colors at Pinn.Media

For a Dallas-Fort Worth real estate brokerage we kept the palette to black, white and one amber accent, so the property photography carries the color. Every palette we build ships with screen and print values, approved text pairings and contrast ratios, as part of a full brand identity. If your colors look right in the logo file and wrong everywhere else, book a discovery call and we will review your palette with you.