Colour

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 aim for level AAA contrast 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

#005eb8

$color_nhsuk-blue

NHS white

#ffffff

$color_nhsuk-white

Green

#007f3b

$color_nhsuk-green

Purple

#330072

$color_nhsuk-purple

Red

#da291c

$color_nhsuk-red

Yellow

#ffeb3b

$color_nhsuk-yellow

Warm yellow

#ffb81c

$color_nhsuk-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.

Greys

Black

#212b32

$color_nhsuk-black

Grey 1

#425563

$color_nhsuk-grey-1

Grey 2

#768692

$color_nhsuk-grey-2

Grey 3

#aeb7bd

$color_nhsuk-grey-3

Grey 4

#d8dde0

$color_nhsuk-grey-4

Grey 5

#f0f4f5

$color_nhsuk-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

Text

Text

#212b32

$nhsuk-text-color

Secondary text

#425563

$nhsuk-secondary-text-color

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.

Links

Link

#005eb8

$nhsuk-link-color

Link hover

#212b32

$nhsuk-link-hover-color

Link hover background

#ffcd60

$nhsuk-link-hover-background-color

Link focus

#212b32

$nhsuk-link-focus-color

Link focus background

#ffb81c

$nhsuk-link-focus-background-color

Link active

#374047

$nhsuk-link-active-color

Link active background

#ffbf33

$nhsuk-link-active-background-color

Link visited

#330072

$nhsuk-link-visited-color

Border

Border

#d8dde0

$nhsuk-border-color

Buttons

Button background

#007f3b

$nhsuk-button-background-color

Button hover

#005326

$nhsuk-button-hover-color

Focus

Focus

#ffb81c

$nhsuk-focus-color

Extended colours

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

Accessibility

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: November 2018