How to choose brand colours that work on screen and in print
Brand colours have to look right, stay readable and reproduce consistently. Here is a practical process for building a palette that works.
- Published
- Reading time
- 2 min read
Key takeaways
- Build a palette with roles: a primary, supporting colours, neutrals and functional colours.
- Check text contrast early; a colour that fails on buttons will cause problems everywhere.
- Define values for screen and print separately, and test real samples.
Colour is often the first thing people remember about a brand. It also has practical jobs: making text readable, guiding attention and staying consistent across a website, a business card and a shop sign.
Start with roles, not favourites
A working palette has distinct roles:
- Primary colour: the one people associate with you, used for key elements.
- Supporting colours: one or two that pair with the primary for variety.
- Neutrals: greys, off-whites or near-blacks for text and backgrounds. Most of any layout is neutral.
- Functional colours: green for success, red for errors and amber for warnings, tuned to sit well with your palette.
Thinking in roles prevents the common problem of a beautiful palette that has no colour suitable for body text or buttons.
Consider meaning, but don't overthink it
Colours carry associations that vary by culture and industry. Look at what competitors use and decide whether you want to fit in or stand out. In crowded categories, a distinctive colour can be one of the easiest ways to be remembered.
Test readability early
Text needs enough contrast against its background. The Web Content Accessibility Guidelines recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Check your primary colour with white and dark text before you commit; if neither combination passes, you may need a darker or lighter variant for text and buttons.
Define colours for every medium
Record each colour as:
- HEX/RGB for screens
- CMYK for standard print
- Pantone (optional) for exact matching on packaging or signage
Very bright screen colours, especially vivid greens, blues and purples, often cannot be reproduced exactly in CMYK. Ask your printer for a proof and adjust the print value until it looks right.
Build tints and shades
Create lighter and darker versions of your main colours for backgrounds, hover states and charts. A consistent scale, for example ten steps from very light to very dark, makes interface and document design much easier.
Document and apply
Put the palette, its values and approved combinations in your brand guidelines, and set it up in your website's design system so it is used consistently. Our UI/UX design work includes defining these colour tokens for screens.
Frequently asked questions
How many colours should a brand have?
Most brands work well with one or two primary colours, one or two accents and a set of neutrals. More colours make consistency harder.
Why does my brand colour look different in print?
Screens mix light (RGB) and printers mix ink (CMYK), and some bright screen colours cannot be printed exactly. Defining a print value or Pantone reference keeps it as close as possible.
