Colour palette

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

Brand

Co-op blue

  • #00B1E7
  • var(--color-brand)
  • Does not pass colour contrast at any level

Do not use brand blue with text. Read about how to use brand blue.

Deal red

Links

Read about how to use links.

Primary green button

Primary green button

  • #0F8482
  • var(--color-button-green-primary)

Primary green button hover

  • #1C6B6A
  • var(--color-button-green-primary-hover)

Primary green button active

  • #124948
  • var(--color-button-green-primary-active)

Blue button

Blue button

  • #005878
  • var(--color-button-blue)

Blue button hover

  • #003E55
  • var(--color-button-blue-hover)

Blue button active

  • #001F2B
  • var(--color-button-blue-active)

White button

White button

  • #FFFFFF
  • var(--color-white)

White button hover

  • #EFEFEF
  • var(--color-button-white-hover)

White button active

  • #D8D8D8
  • var(--color-button-white-active)

Grey button

Grey button

  • #EFEFEF
  • var(--color-button-grey)

Read about how to use buttons.

Grey button hover

  • #D8D8D8
  • var(--color-button-grey-hover)

Grey button active

  • #C4C4C4;
  • var(--color-button-grey-active)

White and black

White

  • #FFFFFF
  • var(--color-white)

Black

  • #000000
  • var(--color-black)

Text greys

Text

  • #282828
  • var(--color-text)

Alternative Text

  • #595959
  • var(--color-text-alt)

Grey backgrounds

Mid light

  • #D8D8D8
  • var(--color-grey-mid-light)

Mid

  • #C4C4C4
  • var(--color-grey-mid)

Dark

  • #6E6E6E
  • var(--color-grey-dark)

Neutral backgrounds

Light

  • #F3F3F3
  • var(--color-grey-neutral-light)

Warm

  • #F5F5F0
  • var(--color-grey-neutral-warm)

Cool

  • #DDE9ED
  • var(--color-grey-neutral-cool)

Cool light

  • #F2F4F7
  • var(--color-grey-neutral-cool-light)

Reds

Dark 4

Mid 5

Light 7

Light 8

Light 9

Light 10

Oranges

Dark 4

Mid 5

Mid 6

Mid 7

Light 8

Light 9

Light 10

Yellows

Dark 4

Mid 5

Mid 6

Mid 7

Light 8

Light 9

Light 10

Greens

Dark 2

Mid 3

Mid 4

Mid 5

Light 6

Light 8

Light 10

Teals

Dark 2

Mid 3

Mid 4

Mid 6

Light 7

Light 9

Light 10

Blues

Dark 3

Mid 4

Mid 6

Light 8

Light 9

Light 10

Indigos

Dark 4

Mid 5

Mid 7

Light 8

Light 9

Light 10

Purples

Dark 3

Mid 4

Mid 6

Light 8

Light 9

Light 10

Magentas

Dark 3

Mid 4

Mid 7

Light 8

Light 9

Light 10

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

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:

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

For more information see our general guide on accessibility.