Colours

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

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.

Brand blue

  • $brand
  • rgb(0,177,231)
  • #00B1E7

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

Primary

  • $button-primary
  • rgb(17,129,86)
  • #118156

Primary hover

  • $button-primary-hover
  • rgb(32,151,103)
  • #209767

Example

Primary dark

  • $button-primary-dark
  • rgb(55,76,99)
  • #374C63

Primary dark hover

  • $button-primary-dark-hover
  • rgb(73,101,132)
  • #496584

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.

Page colours

Page

  • $page
  • rgb(255,255,255)
  • #FFFFFF

Light grey

  • $grey-light
  • rgb(243,243,243)
  • #F3F3F3

Border colours

Mid grey

  • $grey-mid
  • rgb(196,196,196)
  • #C4C4C4

Dark grey

  • $grey-dark
  • rgb(110,110,110)
  • #6E6E6E

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).

Yellows

Greens

Green blues

Blues

Pinks and Purples

Reds and Oranges

Feedback

Did you find what you were looking for?