Colour

+NHS LA Design Patterns - (Return to list of patterns)

Colour

Overview

Always use the recommended NHS LA colour palette.

When to use this pattern

Colour contrast:
  • The colour contrast ratio for text and interactive elements should be at least 4.5:1 as recommended by the W3C. Test your service to meet this standard.

Colour palette:
  • NHS Black # 231F20
  • NHS Dark Grey # 425563
  • NHS Mid Grey # 768692
  • NHS Pale Grey # E8EDEE 
  • NHS Blue # 005EB8
  • NHS Dark Blue # 003087
  • NHS Bright Blue # 0072CE
  • NHS Light Blue # 41B6E6
  • NHS Aqua Blue # 00A9CE
  • NHS Dark Green # 006747
  • NHS Green # 009639
  • NHS Light Green # 78BE20
  • NHS Aqua Green # 00A499
  • NHS Purple (Academy) # 330072
  • NHS Dark Pink # 7C2855
  • NHS Pink # AE2573
  • NHS Dark Red # 8A1538
  • NHS Emergency Services # DA291C
  • NHS Orange # ED8B00
  • NHS Warm Yellow # FFB81C
  • NHS Yellow # FAE100
  • NHS Ambulance Yellow # EDFF21
  • White # FFFFFF

When NOT to use this pattern (optional)

Use this section to:
  • If necessary, highlight any exceptions or known scenarios where the pattern does not work. 
  • If you include this section, explain what to use instead (with a relevant link if we’re suggesting an alternative pattern).

How it works

Use this section to:
  • Explain how the pattern works (if the pattern is too complex to have been fully described in the overview please elaborate here).
  • How to implement the pattern.
  • Steps to follow.

You can also include:
  • Snippets of code