Last reviewed: 20 April 2021

Foundations

Colours

We’ve designed our colour palette so that the colours in it work together in different combinations.

Accessibility

All colours and colour combinations must pass a colour contrast ratio of 4.5:1.

All colours in our palette have been tested for accessibility. Each colour on this page has a link to the contrast test for that colour.

Brand colours

Co-op blue

Only use Co-op blue with the brand logo. Co-op blue does not meet colour contrast standards for text, graphical objects or user interactions. For example, you should not use it as an underline to highlight the page a user is currently on.

Co-op blue can be used as a background colour for the Co-op logo when the logo you’re using is white, for example, on our app icons.

Co-op blue

#00B1E7 var(--color-brand) Fails WCAG AA

Examples

The Co-op logo in the top corner of the coop.co.uk website
The Co-op logo in Co-op blue at the top left corner of a page on the main Co-op website.
The Co-op app icon. A white Co-op logo on the Co-op blue background
The Co-op logo in white on a Co-op blue background.

Deal red

Deal red is like the red we use in Co-op stores and in advertising materials to highlight a price reduction or offer.

Use it sparingly to draw the eye to particular offers or discounts.

Do not use it as a block of colour.

Deal red

#D12430 var(--color-deal-red) Passes WCAG AA

Examples

Deal red highlights a discounted price for a cake product.
Deal red highlights a discounted price for a cake product.
Deal red with white text reading ‘half price’ highlights that products shown in the banner are half price
Deal red with white text reading ‘half price’ highlights that products shown in the banner are half price.

User interface colours

Link colours

For most links, use the colours shown here.

If you’re using a link on a background colour, then the link text and underline must be black or white. This is to maintain the correct colour contrast.

Links inside an area of navigation, like the main header on a website, may also appear in a different colour (normally the same colour as the text). This is because these links are in context to something that a user can recognise as navigation.

Always apply the focus ring. The focus ring is used by keyboard users who do not have a cursor to tell them where they are on a page.

You should usually use the purple link focus colour. Change this to white or black if the link is on a background colour where the purple would not meet colour contrast standards.

Go to the design guidelines on links.

Link

#00729A var(--color-link) Passes WCAG AA

Link hover

#00394E var(--color-link-hover) Passes WCAG AAA

Link active and visited

#002C3D var(--color-link-active) var(--color-link-visited) Passes WCAG AAA

Link focus

#8D44D8 var(--color-link-focus) Passes WCAG AA

Examples

Text links with the standard link colour applied
Text links with the standard link colour applied.
Links within a header showing unactivated, focus and hover states and how they are different from the standard link colours
Links within a header showing unactivated, focus and hover states and how they are different from the standard link colours.
Link using white text on a dark blue background colour. Here the link focus colour has been changed to white in order to maintain colour contrast
Link using white text on a dark blue background colour. Here the link focus colour has been changed to white in order to maintain colour contrast.

Button and form colours

There are 4 button colour combinations available:

  • primary green
  • primary white
  • secondary blue
  • secondary grey

Go to the design guidelines on buttons.

If the button is on a background colour, use white as the button colour.

Do not put a form on a brightly coloured or very dark background.

Primary green button colours

Primary green button
#0F8482 var(--color-button-green-primary) Passes WCAG AA
Primary green button hover
#1C6B6A var(--color-button-green-primary-hover) Passes WCAG AA
Primary green button active
#124948 var(--color-button-green-primary-active) Passes WCAG AAA
Button focus
#8D44D8 var(--color-link-focus) Passes WCAG AA

Primary white button colours

Primary white button
#FFFFFF var(--color-white) Passes WCAG AAA
White button hover
#EFEFEF var(--color-white-hover) Passes WCAG AAA
White button active
#D8D8D8 var(--color-button-white-active) Passes WCAG AAA
Button focus
#8D44D8 var(--color-link-focus) Passes WCAG AA

Secondary blue button colours

Blue button
#005878 var(--color-button-blue) Passes WCAG AAA
Blue button hover
#003E55 var(--color-button-blue-hover) Passes WCAG AAA
Blue button active
#001F2B var(--color-button-blue-active) Passes WCAG AAA
Button focus
#8D44D8 var(--color-link-focus) Passes WCAG AA

Secondary grey button colours

Grey button
#EFEFEF var(--color-button-grey) Passes WCAG AAA
Grey button hover
#D8D8D8 var(--color-button-grey-hover) Passes WCAG AAA
Grey button active
#C4C4C4 var(--color-button-grey-active) Passes WCAG AAA
Button focus
#8D44D8 var(--color-link-focus) Passes WCAG AA

Examples

A heading and some text with a button using the primary green colour.
A call to action button using the primary green colour.
A hero banner using the secondary blue button.
A Membership banner using the secondary blue button.
A hero banner using the primary white button.
A hero banner using the primary white button.

Text colours

The main text colours are 'text' and 'alternative text'.

Use text as the colour for content on a page except for secondary information. For example, use alternative text for hint text on forms.

Use black or white text on coloured backgrounds where it is needed to meet minimum colour contrast standards.

Text

#282828 var(--color-text) Passes WCAG AAA

Alternative text

#595959 var(--color-text-alt) Passes WCAG AAA

Black

#000000 var(--color-black) Passes WCAG AAA

White

#FFFFFF var(--color-white) Passes WCAG AAA

Colour palette

The colour palette helps us give personality to our products, but also serves a functional purpose in the way we design.

Large background areas should be white or use one of the neutral colours from the palette.

Use warm or cool colours to make a product seem more friendly or muted colours to give a more functional feel.

Use the colour palette 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 way that’s helpful to users

Grey scale

Black

#000000 var(--color-black) Passes WCAG AAA

Dark

#6E6E6E var(--color-grey-dark) Passes WCAG AA

Mid

#C4C4C4 var(--color-grey-mid) Passes WCAG AAA

Mid light

#D8D8D8 var(--color-grey-mid-light) Passes WCAG AAA

White

#FFFFFF var(--color-white) Passes WCAG AAA

Neutral colours

Light

#F3F3F3 var(--color-grey-neutral-light) Passes WCAG AAA

Warm

#F5F5F0 var(--color-grey-neutral-warm) Passes WCAG AAA

Cool

#DDE9ED var(--color-grey-neutral-cool) Passes WCAG AAA

Cool light

#F2F4F7 var(--color-grey-neutral-cool-light) Passes WCAG AAA

Reds

Dark 4

#BA2327 var(--color-red-dark-4) Passes WCAG AAA

Mid 5

#E20F14 var(--color-red-mid-5) Passes WCAG AA

Light 7

#FF6A6D var(--color-red-light-7) Passes WCAG AA

Light 8

#FFC1C3 var(--color-red-light-8) Passes WCAG AAA

Light 9

#FFDBDB var(--color-red-light-9) Passes WCAG AAA

Light 10

#FCF1F1 var(--color-red-light-10) Passes WCAG AAA

Oranges

Dark 4

#BE4015 var(--color-orange-dark-4) Passes WCAG AA

Mid 5

#FC5724 var(--color-orange-mid-5) Passes WCAG AA

Mid 6

#FD7838 var(--color-orange-mid-6) Passes WCAG AA

Mid 7

#FD9C59 var(--color-orange-mid-7) Passes WCAG AAA

Light 8

#FDB979 var(--color-orange-light-8) Passes WCAG AAA

Light 9

#FEE7C1 var(--color-orange-light-9) Passes WCAG AAA

Light 10

#FFF8E7 var(--color-orange-light-10) Passes WCAG AAA

Yellows

Dark 4

#CFB214 var(--color-yellow-dark-4) Passes WCAG AAA

Mid 5

#FFD309 var(--color-yellow-mid-5) Passes WCAG AAA

Mid 6

#FFE53B var(--color-yellow-mid-6) Passes WCAG AAA

Mid 7

#FFF372 var(--color-yellow-mid-7) Passes WCAG AAA

Light 8

#FFFCA9 var(--color-yellow-light-8) Passes WCAG AAA

Light 9

#FFFBCD var(--color-yellow-light-9) Passes WCAG AAA

Light 10

#FCF9EE var(--color-yellow-light-10) Passes WCAG AAA

Greens

Dark 2

#3A6002 var(--color-green-dark-2) Passes WCAG AAA

Mid 3

#4F820D var(--color-green-mid-3) Passes WCAG AA

Mid 4

#72AA24 var(--color-green-mid-4) Passes WCAG AA

Mid 5

#96CB48 var(--color-green-mid-5) Passes WCAG AAA

Light 6

#B9E277 var(--color-green-light-6) Passes WCAG AAA

Light 8

#E7F7CB var(--color-green-light-8) Passes WCAG AAA

Light 10

#F6FCE9 var(--color-green-light-10) Passes WCAG AAA

Teals

Dark 2

#046062 var(--color-teal-dark-2) Passes WCAG AAA

Mid 3

#0F8482 var(--color-teal-mid-3) Passes WCAG AA

Mid 4

#27AAAB var(--color-teal-mid-4) Passes WCAG AA

Mid 6

#4BC7CC var(--color-teal-mid-6) Passes WCAG AAA

Light 7

#79DCE3 var(--color-teal-light-7) Passes WCAG AAA

Light 9

#CCF2F7 var(--color-teal-light-9) Passes WCAG AAA

Light 10

#E9FAFC var(--color-teal-light-10) Passes WCAG AAA

Blues

Dark 3

#114D94 var(--color-blue-dark-3) Passes WCAG AAA

Mid 4

#0761C2 var(--color-blue-mid-4) Passes WCAG AA

Mid 6

#519AF5 var(--color-blue-mid-6) Passes WCAG AA

Light 8

#80B7FF var(--color-blue-light-8) Passes WCAG AAA

Light 9

#CFE3FF var(--color-blue-light-9) Passes WCAG AAA

Light 10

#EEF3FC var(--color-blue-light-10) Passes WCAG AAA

Indigos

Dark 4

#3B427F var(--color-indigo-dark-4) Passes WCAG AAA

Mid 5

#4F52A8 var(--color-indigo-mid-5) Passes WCAG AA

Mid 7

#8D9AE4 var(--color-indigo-mid-7) Passes WCAG AA

Light 8

#AFBDF5 var(--color-indigo-light-8) Passes WCAG AAA

Light 9

#CFDBFE var(--color-indigo-light-9) Passes WCAG AAA

Light 10

#EFF3FA var(--color-indigo-light-10) Passes WCAG AAA

Purples

Dark 3

#51178C var(--color-purple-dark-3) Passes WCAG AAA

Mid 4

#6727B9 var(--color-purple-mid-4) Passes WCAG AA

Mid 6

#8D44D8 var(--color-purple-mid-6) Passes WCAG AA

Light 8

#D395FE var(--color-purple-light-8) Passes WCAG AAA

Light 9

#EDC3FF var(--color-purple-light-9) Passes WCAG AAA

Light 10

#F9EDFC var(--color-purple-light-10) Passes WCAG AAA

Magentas

Dark 3

#812373 var(--color-magenta-dark-3) Passes WCAG AAA

Mid 4

#AB278D var(--color-magenta-mid-4) Passes WCAG AA

Mid 7

#F690F1 var(--color-magenta-mid-7) Passes WCAG AA

Light 8

#FEB8FF var(--color-magenta-light-8) Passes WCAG AAA

Light 9

#FAD1FE var(--color-magenta-light-9) Passes WCAG AAA

Light 10

#FAEAFC var(--color-magenta-light-10) Passes WCAG AAA

Colour combinations

The palette can be effective when used to:

  • highlight content (but make sure colour is not the only technique used to do this)
  • evoke different moods and feelings, like calm or excitement
  • create a greater sense of identity for a product or service

Example

Image of the Co-operate website using colour combinations.
The Co-operate website uses shape and colour to highlight key words and hand drawn, textured elements to create ideas and feelings of community.

Changelog for this page

Date Notes
14 April 2021 First version of page published

Get support

Co-op Digital colleagues can get support in our dedicated Slack channel:

#experience-library-support

Sign up for email updates

Get updates about changes and developments.

Sign up

Copyright © Co-operative Group Limited. All rights reserved.