Skip to content

Sainsbury’s colours

Learn about the selection of colours available to use in Sainsbury’s experiences.

On this page

Colour palettes

Sainsbury’s core colours are orange, plum, white and black. Orange is the colour most associated with Sainsbury’s by users, so it's important to use this distinctive asset first and foremost.

For digital experiences, we lean heavily on the use of orange, alongside white and black from the monochrome palette. Plum is used sparingly if needed.

Primary brand palette

Base#F06C00 rgb(240, 108, 0)
Dark#E55000 rgb(229, 80, 0)
Light#FEF5F0 rgb(254, 245, 240)

Secondary brand palette

The secondary palette contains a variety of plum colours to accent and identify the brand. You can use the secondary palette once the user has been fully introduced to the personality of the brand.

We only use the secondary brand palette sparingly when a contrast is needed to the primary brand palette.

Base#7F0442 rgb(127, 4, 66)
Dark#57002B rgb(87, 0, 43)
Light#A50052 rgb(165, 0, 82)

Interaction palettes

The following colour palettes represent how the brand colours are used in interaction states.

Primary interaction palette

Default#F06C00 rgb(240, 108, 0)
Hover#E55000 rgb(229, 80, 0)
Pressed#C15100 rgb(193, 81, 0)
Disabled#D8D8D8 rgb(216, 216, 216)

Secondary interaction palette

Default#FFFFFF rgb(255, 255, 255)
Hover#EC6A01 10%rgba(236, 106, 1, 0.1)
Pressed#C15100 20%rgba(193, 81, 0, 0.2)
Disabled#D8D8D8 rgb(216, 216, 216)

Monochrome palette

The monochrome palette is a group of colours that can provide text contrast and neutrality to designs.

Black#000000 rgb(0, 0, 0)
Darker#262626 rgb(38, 38, 38)
Dark#404040 rgb(64, 64, 64)
Base#737373 rgb(115, 115, 115)
Light#D8D8D8 rgb(216, 216, 216)
Lighter#F2F2F2 rgb(242, 242, 242)
White#FFFFFF rgb(255, 255, 255)

Semantic palette

The semantic palette is a group of colours to communicate key messages throughout an experience. Use red for error messages, green for success messages, blue for important information, and yellow for warnings.

Error

Lighter#FBE6E6 rgb(251, 230, 230)
Light#DD2E2E rgb(221, 46, 46)
Base#D50000 rgb(213, 0, 0)
Dark#BD0000 rgb(189, 0, 0)
Darker#A50000 rgb(165, 0, 0)

Info

Lighter#E8F1FB rgb(232, 241, 251)
Light#428FDA rgb(66, 143, 218)
Base#1976D2 rgb(25, 118, 210)
Dark#1669BA rgb(22, 105, 186)
Darker#135CA3 rgb(19, 92, 163)

Success

Lighter#E6F4ED rgb(230, 244, 237)
Light#40A673 rgb(64, 166, 115)
Base#2E7D32 rgb(46, 125, 50)
Dark#296F2C rgb(41, 111, 44)
Darker#246127 rgb(36, 97, 39)

Warning

Lighter#FFFBE6 rgb(255, 251, 230)
Light#FFDD2E rgb(255, 221, 46)
Base#FFD600 rgb(255, 214, 0)
Dark#E2BE00 rgb(226, 190, 0)
Darker#C6A600 rgb(198, 166, 0)

Sainsbury's orange accessibility

This design system aims to meet the Web Content Accessibility Guidelines 2.1 AA standard for colour contrast. But there’s one single exception to this around using the Sainsbury's orange in certain contexts.

The two Sainsbury’s oranges, Base (#F06C00) and Dark (#E55000), are not WCAG 2.1AA compliant when used with either Monochrome White (#FFFFFF) or Monochrome Lighter (#F2F2F2) at body text size. However, as orange is Sainsbury's main brand colour, we sometimes need to use it at body text size anyway.

You can see a summary of the issue below.

ElementWCAG 2.2 AA contrast ratio recommendationOrange Base (#F06C00) on Monochrome White (#FFFFFF) contrast ratioOrange Dark (#E55000) on Monochrome White (#FFFFFF) contrast ratio
Body text4:5:13:06:1 (fail)3:83:1 (fail)
Large text (18pt or 14pt bold)3:13:06:1 (pass)3:83:1 (pass)
Icons, shapes and keylines3:13:06:1 (pass)3:83:1 (pass)

Further reading

Was this page helpful?

Get in touch

We’re on hand to answer any questions you have or help you with your next project.
Email
Microsoft Teams
Slack