Skip to main content

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:

Colour contrast

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.

Main colours

If you are using NHS.UK frontend or the NHS.UK prototype kit, use the Sass variables provided rather than copying the hexadecimal (hex) colour values. For example, use $nhsuk-text-color rather than #212b32. This means that your service will always use the most recent colour palette whenever you update.

Only use the variables in the context they’re designed for. In all other cases, you should reference the colour palette directly. For example, if you wanted to use red to represent some data in a graph you should use $color_nhsuk-red rather than $nhsuk-error-color.

Text

$nhsuk-text-color #212b32
$nhsuk-secondary-text-color #4c6272

Links

$nhsuk-link-color #005eb8
$nhsuk-link-hover-color #7C2855
$nhsuk-link-visited-color #330072
$nhsuk-link-active-color #002f5c

Focus state

$nhsuk-focus-color #ffeb3b
$nhsuk-focus-text-color #212b32

Border

$nhsuk-border-color #d8dde0
$nhsuk-form-border-color #4c6272

Error state

$nhsuk-error-color #d5281b

Button

$nhsuk-button-color #007f3b
$nhsuk-secondary-button-color #4c6272

Page background colour

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

$color_nhsuk-white is used to make important information stand out and for alternating backgrounds, for example on the NHS website home page.

Colour palette

Avoid using the palette colours if there is a Sass variable that is designed for your context. For example, if you are styling the error state of a component you should use the $nhsuk-error-color Sass variable rather than $color_nhsuk-red.

$color_nhsuk-blue #005eb8
$color_nhsuk-green #007f3b
$color_nhsuk-yellow #ffeb3b
$color_nhsuk-warm-yellow #ffb81C
$color_nhsuk-red #d5281b
$color_nhsuk-dark-pink #7C2855
$color_nhsuk-purple #330072
$color_nhsuk-grey-1 #4c6272
$color_nhsuk-grey-2 #768692
$color_nhsuk-grey-3 #aeb7bd
$color_nhsuk-grey-4 #d8dde0
$color_nhsuk-grey-5 #f0f4f5
$color_nhsuk-white #ffffff
$color_nhsuk-pale-yellow #fff9c4

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.

Designing with colour

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

Testing tools

Use tools like these to check contrast:

Also test colour contrast with people of all abilities.

Updated: November 2019