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.
Primary palette
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 base colours
Promotional palette
Sainsbury’s promotional palette of colours are red and blue. Use red for when you’re promoting a sale, and use blue when you’re promoting something new.
Promotional base colours
Promotional extended colours
Sale extended colours
New extended colours
Monochrome palette
The monochome palette is a group of colours that can provide text contrast and neutrality to designs.
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.
Semantic extended colours
Error extended colours
Success extended colours
Information extended colours
Warning extended colours
Colour accessibility
Our standard button labels use Mary Ann ExtraBold at 18px. Please note that this fails to meet WCAG 2.1 AA standards by a small margin, but we don’t recommend increasing the text size. You can read more below.
Orange (#F06C00) links within body text on White (#FFFFFF) should always be bold.
Don’t use Orange (#F06C00) on White (#FFFFFF) for small text, such as captions, and icons.
Sainsbury's orange accessibility
Luna 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, Orange Base (#F06C00) and Orange 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. An example is in our button labels, as shown above.
You can see a summary of the issue below.
| Element | WCAG 2.1 AA contrast ratio recommendation | Orange Base (#F06C00) on Monochrome White (#FFFFFF) contrast ratio | Orange Dark (#E55000) on Monochrome White (#FFFFFF) contrast ratio |
|---|---|---|---|
| Body text | 4:5:1 | 3:06:1 (fail) | 3:83:1 (fail) |
| Large text (18pt or 14pt bold) | 3:1 | 3:06:1 (pass) | 3:83:1 (pass) |
| Icons, shapes and keylines | 3:1 | 3:06:1 (pass) | 3:83:1 (pass) |