How to choose brand colors in five steps

Choosing brand colors is a job, not a mood. Your colors must work on a phone, in poor light, and for people who see color differently. Here is how to choose brand colors in five steps, with the numbers to check each one.

How to choose brand colors: start with the job

Write down where the colors will appear: screens, print, packaging, ads. Write down what must always be readable. Then look at five competitors and note their main colors. You do not want to be mistaken for them.

We skip color-meaning claims, such as "blue means trust". We found no source we trust for them. Choose for contrast and distinction instead.

Step 2: Pick one main color

Your main color does the work. It appears on buttons, key numbers and highlights. Pick one, then use it sparingly so it keeps its pull. Generate options in our color palette generator and lock the one you like.

Step 3: Add neutrals

Add one dark ink for text and one light paper for backgrounds. Neutrals carry most of the page. Here is how our own site does it.

Role	How many	noondesk example
Main color	1	Orange, #f66135
Ink	1	#1f1f24
Body text	1	#44444d
Page tint	1	#fafbfd

Source: the colors in our own site styles. The ratios below are our calculation using the WCAG formula.

Step 4: Add one accent

An accent gives you a second voice for charts, tags and states. One is enough. A third color often makes a brand look busy.

Step 5: Test before you commit

First, contrast. WCAG 2.2, contrast minimum asks for 4.5 to 1 for normal text and 3 to 1 for large text at level AA. Large means at least 18 point, or 14 point bold.

Here is a real example. Our ink (#1f1f24) on our orange scores 5.21 to 1, so it passes for body text. White on the same orange scores 3.14 to 1. That passes the large text bar but not the body text bar. So on orange, small text should be dark. These are our calculations using the WCAG formula.

Second, color vision. The National Eye Institute says about 1 in 12 men have color vision deficiency, and that red-green is the most common kind (page last updated 5 November 2025). See its color blindness page. WCAG success criterion 1.4.1 adds that color should not be the only visual means of conveying information. Pair color with a label or an icon. Our tool has a color-blind preview to check your palette.

Third, medium. Screens and print differ, so proof printed work before a big run.

Write the decision down

Put the hex codes and the tested pairs in your brand guidelines. Our post on what to include in brand guidelines has a template. Then check how consistent your team is with the brand consistency quiz.

Want a designer to turn your colors into a full system? Book a call.

A worked example with the numbers

Here is a made-up palette for a bakery, with every pair tested. The ratios are our calculation using the WCAG formula, rounded down.

Pair	Ratio	Use it for
Ink #1b1b1f on paper #fbf7f2	16.09 to 1	Body text
White on main #c2410c	5.17 to 1	Button text
Ink on accent #f2a33a	8.23 to 1	Tags and labels
Main #c2410c on paper	4.85 to 1	Headlines and links

Source: our own calculation using the WCAG relative luminance formula. All four pairs clear the 4.5 to 1 bar for body text, so the palette is safe for small type too.

Do not forget interface parts

WCAG success criterion 1.4.11, Non-text Contrast, is a level AA rule. It asks for at least 3 to 1 between the parts people need to identify, such as input borders and icons, and the colors next to them. See WCAG 2.2, non-text contrast. A pale gray border on white often fails it.

Quick answers

How many brand colors do I need? One main color, two neutrals and one accent, as above. That is our guideline, not a rule.

What about dark mode? If your product or site has one, test every pair again on dark backgrounds. A pair that passes on white can fail on black.

Can I change colors later? Yes, but plan for the cost. Every template, ad and file that uses the old color needs updating, so keep the list of where colors live in your brand kit.

What we could not verify

We did not cite studies on color meaning. The color vision figure is for men only, as the source gives no matching number for women on that page. Contrast ratios were calculated by us and are rounded down.