Skip to main content


Using colour

Our brand colours help people recognise and trust that our services come from the NHS.

We also use colour to help users prioritise and differentiate information - for example we use yellow for warning callouts and red for urgent care cards.

Our text and background colours are designed to meet accessibility needs. We meet at least level AA for contrast and aim for level AAA as far as possible. Read more about accessibility and colour on this page.

Use the Sass variables for each colour (for example $nhsuk-focus-color) if you're using the NHS.UK frontend library. That way you’ll automatically get any updates to the colour palette when you refresh.

Main palette

NHS blue



NHS white















Warm yellow



NHS blue is the dominant colour in the NHS colour palette. We use it for the header, links, care cards and inset text.

White is used to make important information stand out and for alternating backgrounds, for example on the NHS.UK home page.

We use:

  • red for urgency, and negative or destructive actions, for example in urgent and emergency care cards
  • yellow for warnings, for example in warning callouts
  • green in action buttons and links, like the action link
  • purple for visited links
  • warm yellow to give a visible focus to interactive elements

See colours in context on this page for more uses of these colours and specific Sass codes.





Grey 1



Grey 2



Grey 3



Grey 4



Grey 5



We use black for headings and the main body copy and grey 1 for secondary text.

We use grey 2, 3 and 4 for borders.

We use grey 5 as a background tint. This is because:

  • it reduces overall page glare
  • the British Dyslexia Association recommends dark text on a light, but not white, background
  • components with important information, like callouts, stand out

See colours in context on this page for more uses of these colours and specific Sass codes.

Colours in context





Secondary text



We use Text colours for headings and main body copy.

These two colours contrast well with backgrounds, but not so much that reading becomes tiring.





Link hover



Link hover background



Link focus



Link focus background



Link active



Link active background



Link visited








Button background



Button hover







Extended colours

The NHS Identity Guidelines have an extended colour palette. We haven't tested these colours yet for digital use.


Our text and background colours have contrast ratios that meet level AA of the Web Content Accessibility Guidelines (WCAG 2.0). We aim for AAA as far as possible.

This helps people with colour vision deficiency (colour blindness) who find it difficult to distinguish between certain colours, often shades of red, yellow and green. About 1 in 12 men and 1 in 200 women have this condition.

When you're designing with colour, make sure:

  • contrasts between text and background meet level AA of WCAG 2.0 - or better still AAA
  • elements like buttons are recognisable against backgrounds
  • what the colour is "saying" is available in other ways

Use tools like these to check contrast:

Also test colour contrast with people of all abilities.

Updated: July 2019