Our users need to have a coherent experience when they interact with our products. In order to achieve this we have principal colours that should be used in all digital products.
To define areas of content, provide structure and rhythm to your design.
- Body #ffffff
- Page background #e4e9ec
- Section background #d4dfe1
- Section background #c3d1d6
- Hero, teaser, banner #2c3841
See our typography page for further detail on applying link styles within text.
- Body copy #2c3841
- Supporting text #525e67
- Active link #00557f
- Hovered link #e85e13
- Visited link #55007f
Our products need a certain level of visual distinctiveness. This is so users can orientate themselves when moving between different sites.
Picking a theme colour
Your theme colour needs to meet our accessibility guidance, be distinctive from others already in use and fit tonally with our brand. If you would like help and support choosing a theme colour for your product please contact email@example.com
Visualising data with colour
Use these rules when choosing your colours
Get it right in black and white. Make sure your design works in greyscale (black and white) before adding in colour. Don’t assume colours will signal meaning when used on their own.
The safest hue is blue. The richest colour across all types of colour blindness is blue, therefore blue (#00557f) our primary choice.
Red and green should never be seen. Avoid using red and green together as they are difficult to distinguish from one another in the more common types of colour blindness.
(source: ONS Data visualisation > Using colours)