Guide · 8 min read
How to Choose Brand Colors & Fonts
You don’t need an agency budget to look established. You need a small set of deliberate choices, applied consistently. Here’s how to make them.
1. Think in roles, not favorites
The most common mistake is choosing five colors you like and using them equally. Strong brands assign each color a job:
- Primary is your signature: logo, headlines, the main button. It’s the color people should remember.
- Secondary supports without competing: backgrounds, illustrations, section dividers.
- Accent is the spark. Use it sparingly for sale badges, highlights or one key number.
- Neutral does the heavy lifting: text, borders and most backgrounds.
A useful starting proportion is roughly 60% neutral, 25–30% primary and 10% secondary, with the accent as a tiny 5%. If everything is colorful, nothing stands out.
2. Start from a feeling
Before picking hues, pick three words customers should feel. “Calm, natural, honest” points to muted greens and warm neutrals. “Bold, fast, playful” points to saturated, high-energy color. Color associations vary by culture and industry, so treat them as tendencies rather than rules:
- Deep blues and teals tend to read as dependable and professional, which is why finance and healthcare favor them.
- Greens and earth tones suggest growth, nature and sustainability.
- Reds and oranges carry energy and appetite, popular with food and fitness.
- Near-black with a single vivid accent feels modern, confident and premium.
Also look at your three closest competitors. If they’re all blue, a distinctive color can be your cheapest marketing advantage.
3. Use a harmony rule
Harmony rules describe how colors relate on the color wheel. They’re not magic, but they reliably avoid clashes:
- Complementary: opposite hues. High contrast and energetic; keep one dominant.
- Analogous: neighbors on the wheel. Calm and cohesive.
- Triadic: three evenly spaced hues. Lively and balanced; great for playful brands.
- Monochrome: one hue in different shades. Minimal and elegant.
One technical note: classic tools rotate hues in HSL, where yellow at “50% lightness” looks far brighter than blue at the same value. Our generator works in OKLCH, a perceptual color space, so a hue change keeps the lightness your eye actually sees. That’s why the tonal scales look evenly stepped.
4. Make it readable for everyone
Around 1 in 12 men and 1 in 200 women have some form of color-vision deficiency, and everyone struggles with low contrast on a phone in sunlight. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios:
- 4.5:1 for normal body text (level AA).
- 3:1 for large text (about 24px, or 19px bold) and for icons and form borders.
- 7:1 for the stricter AAA level.
Many beautiful brand colors, especially yellows, oranges and light greens, fail as text on white. That doesn’t mean you can’t use them; it means you use them as fills and choose a darker shade from the same family for text. The generator calls these text-safe shades and shows them for every color.
Never use color alone to carry meaning. Pair a red error state with an icon and a message.
5. Pair two fonts, not five
Two typefaces cover almost every need: one with personality for headings and one built for long reading. Good pairs contrast in one clear way, such as serif with sans-serif or wide with narrow, while sharing similar proportions.
- Keep body text at 16px or larger on screens, with a line height around 1.5–1.6.
- Use a type scale: multiply sizes by a consistent ratio (1.25 is a safe default) so headings feel related.
- Choose fonts with a commercial-use license. Every pairing here uses Google Fonts under the SIL Open Font License.
6. Write it down
A brand guide doesn’t need to be 80 pages. It needs to answer the questions your designer, developer, printer and future self will ask: exact color codes (HEX for screens, CMYK for print), fonts and sizes, what combinations are allowed, and a few do’s and don’ts. Download the guide from the generator, keep it in a shared folder, and send it to anyone who creates something for your brand.
One caveat on print: screen-to-CMYK conversions are approximate. Before a large run of packaging or signage, ask your printer for a proof or a Pantone match.