There are three levels to the NHS web-safe colour palette.
Corporate colours
NHS Blue | HTML 0066CC |
Black | HTML 000000 |
White | HTML FFFFFF |
The corporate colours should form the basis for all NHS website design schemes. As a general rule, backgrounds should be white and text should be black. Navigation areas should be white or NHS blue.
Primary colours
Dark green | HTML 003300 |
Green | HTML 009933 |
Light green | HTML 66CC33 |
Aqua green | HTML 009966 |
Aqua blue | HTML 0099CC |
Light blue | HTML 0099FF |
Dark blue | HTML 000099 |
Purple | HTML 330099 |
Dark pink | HTML 990066 |
Dark red | HTML 990000 |
Red | HTML CC0000 |
Orange | HTML FF6600 |
Yellow | HTML FFFF00 |
The primary colours should be used in conjunction with the corporate colours to highlight key pieces of information. When using the primary colours, make sure they do not overpower or detract from the corporate colours.
Secondary colours
NHS blue (secondary) | HTML 6699FF |
Black (secondary) | HTML 999999 |
Dark green (secondary) | HTML 99CC99 |
Green (secondary) | HTML CCFFCC |
Light green (secondary) | HTML CCFF99 |
Aqua green (secondary) | HTML 66CC99 |
Aqua blue (secondary) | HTML 99CCFF |
Light blue (secondary) | HTML 99CCFF |
Dark blue (secondary) | HTML 9999CC |
Purple (secondary) | HTML 9999FF |
Dark pink (secondary) | HTML CC99CC |
Dark red (secondary) | HTML CC6666 |
Red (secondary) | HTML FF6666 |
Orange (secondary) | HTML FFCC99 |
Yellow (secondary) | HTML FFFFCC |
The secondary colours have been developed to support and complement the primary colours. Each secondary colour should only be used with the corresponding primary colour. A secondary colour can also be used to break up a page, which may ensure that the primary colours do not become more prominent than the corporate colours.
Using the colour palette
- Do not combine the colours from the three levels to create new colours - use only the specified colours above.
- Do not use tints of any of the NHS web palette colours.
- Do not use any of the colours to create textures, patterns or images.
Colour and accessibility
- Use a single, solid colour from the NHS colour palette for backgrounds for minor elements, e.g. small tables and graphs.
- Never use patterns, images or textures on your background.
- Ensure there is always excellent contrast between the colours used for the background and foreground or text to maximise legibility.
- Ensure that the chosen colour scheme can be overridden by the user's browser settings.