Choosing brand colours that work everywhere

Colour meaning gets all the attention, but most brand colour problems are practical: unreadable buttons, logos that print muddy, and palettes with no plan for how much of each to use.

Brand colours that work everywhere pass three practical tests: they stand apart from your local competitors, they include a shade dark enough to pass contrast checks for text and buttons, and each one is defined in HEX, RGB, CMYK and Pantone so it prints true. Colour meaning matters far less than that.

Colour psychology charts will tell you blue means trust and orange means energy. That’s not wrong, exactly, but a huge share of banks, health funds and tradies are already blue, so the meaning is diluted to nearly nothing. The problems we actually fix are practical ones. A brand green that looks fresh on a phone and prints like pea soup. A pale yellow that nobody can read text on. Six brand colours and no rules, so the website looks like a fruit salad. Get the practical side right and the “meaning” mostly takes care of itself.

Meaning: useful, but only up to a point

Colour does carry associations, and some are worth respecting. Health practices generally want calm rather than alarming. A demolition company probably doesn’t want pastel pink (although that would get noticed). Food brands lean warm.

But the more useful question is what colour is everyone else in your category using? Pull up the websites and vans of your five nearest competitors. If they’re all navy and white, a navy and white brand is safe and invisible. Picking a confident colour nobody else in your town uses in your trade is often worth more than picking the “right” colour by the psychology chart.

Then check that your choice suits the people you serve. A deep green with warm neutrals reads differently from a neon green with black, even though both are “green”. The shade, and what sits next to it, does more work than the hue.

Contrast: the test most palettes fail

If people can’t read the text, the colour has failed, however nice it looks.

The web accessibility standard (WCAG) sets minimum contrast ratios between text and its background. At level AA, normal text needs at least 4.5:1, and large text at least 3:1. Large text means roughly 24 pixels and up, or about 18.5 pixels if bold. These are thresholds, not targets. A ratio of 4.49:1 fails.

In practice this rules out a lot of popular brand colours for text and buttons:

  • Mid oranges, yellows, light greens and aqua usually fail with white text on top. They make lovely backgrounds and accents, not button colours with white labels.
  • Light grey text on white looks elegant in a design mockup and is a struggle to read on a phone in the sun.
  • Mid-tone pairs (teal on navy, red on green) often fail, and are a problem for colour blind visitors as well.

The fix isn’t to abandon the colour. It’s to add a darker shade of it for text and buttons, and keep the bright version for large areas, icons and highlights. Most good palettes have a “brand colour” and a “working colour” version of the same hue.

Any free contrast checker will give you the ratio once you enter two HEX codes. Check every text and background pairing you plan to use, and write the passing combinations into your guide. Our colour contrast and readability article goes further on this.

Print and screen: why your colour changes

Screens make colour with light (RGB). Printers make it with ink (CMYK). The range of colours screens can show is wider, especially for bright greens, oranges, electric blues and purples. When a vivid screen colour is converted to CMYK, it often comes out flatter and duller. That’s not the printer’s fault.

This is why choosing colours on screen alone is risky. A few practical rules:

  • Choose with print in mind if print matters to you (signage, packaging, uniforms, brochures). Look at the colour printed, not just on your monitor.
  • Define every colour four ways: HEX, RGB, CMYK and, if you print signage, uniforms or packaging, a Pantone reference. Each value should be chosen deliberately, not just auto-converted.
  • Expect some variation across materials. Vinyl, embroidery thread, powder coat and coated paper will never match exactly. Give suppliers the Pantone reference and ask for a sample or proof for anything large or expensive.
  • Check the dark version. Your logo will often appear on black, on photos or in one colour. Make sure the palette still holds up there.

We explain the technical side in why your logo looks wrong on the flyer.

Building a palette you can use

Small business palettes usually go wrong in one of two directions: one colour and nothing else (so everything looks flat), or six equal colours (so nothing looks deliberate). A structure that works for most businesses looks like this:

Role What it’s for Rough share of use
Primary Logo, headers, the colour people remember 20 to 30%
Dark Body text, footers, dark backgrounds. Often a very deep version of the primary, or a near black 10 to 20%
Light neutral Backgrounds, cards, space. Off-white, sand, pale grey 50 to 60%
Accent Buttons, links, highlights, calls to action. Used sparingly so it stands out 5 to 10%
Support (optional) Charts, illustrations, secondary categories Small amounts

The percentages aren’t a law. The point is that most of what people see should be calm neutral space, with the primary colour carrying recognition and the accent reserved for things you want people to click or notice. If the accent is everywhere, it stops working.

One test we find useful: grab a screenshot of your homepage and blur it until you can’t read anything. You should still be able to see where the buttons are.

A short checklist before you lock it in

  1. Does it stand apart from your direct local competitors?
  2. Does the primary colour work with white text, black text, or neither? Write down which.
  3. Is there a dark shade that passes 4.5:1 for body text and buttons?
  4. Have you seen it printed on the materials you’ll use?
  5. Are HEX, RGB, CMYK and Pantone values all set by a designer, not auto-converted?
  6. Does the logo work in one colour, reversed out of a dark background, and on a photo?
  7. Is it clear which colour does which job?

Once those answers are written down, put them in your brand style guide so the next sign writer and the next web developer use the same values.

To see a health practice’s colours carried through a full website, have a look at the site we built for Northern Rivers Audiology. If your current colours are fighting you, we sort this out as part of our branding and logo design work, often without touching the logo itself. The print values then carry through to signage, brochures and uniforms in our graphic design work.

Who wrote this

The Design Space is a team of five in Ballina, NSW, with more than 10 years of web design, branding, photography, SEO and social media work for more than 100 clients across the Northern Rivers and further afield. We write these guides from the work we do every week, and we have 40 five-star Google reviews.

Web design SEO Social media Branding Photography Our work

Get in touch

Want us to do this for you?

If you’d rather hand this over, tell us about your business and what you need. We’ll reply with ideas and a price.