Colour palette live

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

White and greys

  • White
  • var(--color-white)
  • Light grey
  • #F3F3F3
  • var(--color-grey-light)
  • Mid grey
  • #C4C4C4
  • var(--color-grey-mid)
  • Dark grey
  • #6E6E6E
  • var(--color-grey-dark)



Green blues


Pinks and Purples

Reds and Oranges

Design and content

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.

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


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:

If you have a question about colour, contact

For more information see our general guide on accessibility.

Suggest a pattern or change

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change