Colour palette

Use Co-op’s colour palette:

  • to draw users’ focus to particular content areas
  • to give emphasis, depth and highlight to our work where needed
  • in the right context — for example don’t use large amounts of colour in a form, it can distract the user
  • with restraint — users can read content better when we use limited colour
  • to help convey meaning to interaction patterns, for example, for mandatory form fields. Never use colour alone to do this.
  • to communicate the Co-op brand — see the brand guidelines

This page is a more detailed description of how to use the colours in the pattern library.

Accessibility

Think about how your colour choices can affect legibility and accessibility — read WCAG 2.0 specifications on using colour. To be legible, text and background colours must have a minimum contrast between them. You can check colour contrasts online using:

As well as using these tools, test colour contrast with people of all abilities.

If you have a question about colour, contact design@coopdigital.co.uk.

Colours that have a defined use

Brand blue

The Co-op brand blue is only used on the Co‑op logo. Never use brand blue as text or as a background colour — it’s difficult for those with low vision to read on screen.

Example

Co-op

White space

White space can help group elements on a page and structure information. Used well, white space makes content easier to read.

Text colour

#282828 (dark grey) is our main text colour. Use a colour contrast checker when using this colour on backgrounds other than white.

Text

  • $text
  • rgb(40,40,40)
  • #282828

Button colours

Example

Example

Find out how we design buttons.

Greys

Try to use borders only where absolutely necessary. Where possible use typography and the white space around content to help structure a page.

Other colours you can use

You can use other colours to:

  • draw users’ focus to particular content areas
  • emphasise content so that it's read in an order that makes sense to users
  • give the impression of depth and layering — this can help structure content in a helpful way for users

These colours have been contrast tested as background colours with white or grey (#282828) text. Use a colour contrast checker when using any other colour of text.

These colours can be seen on our twitter cards and our membership dashboard (you must be a Co-op member and logged in).