Skip to main content

Your browser is out of date, and unable to use many of the features of this website

Please upgrade your browser.

Ignore

This website requires cookies. Your browser currently has cookies disabled.

Colours

Colour is a powerful way for us to communicate with our audiences.

We use colour carefully to create visual harmony across all our communications.

Primary colour palette

The core colours should be the most prominent. Add the secondary colours sparingly (less than 30% of the design area) to provide extra life and impact.

For example, they can be used to emphasise a section of text. This is a useful option when no appropriate image or graphic is available.

Primary colour palette

Primary colours  HEX 
Violet #483B8B
Lime #CDD500 
White #FFFFFF
Steel #54616C

Secondary colour palette

Our secondary colour palette is used to inject energy and vibrancy into our applications and asset suite.

Only use each one individually when applied as a background colour. Do not overlay one onto another.

Secondary colour palette

Secondary colours  HTML 
Cherry  #B90064
Teal #008984
Dove #7E9EB3
Brick  #CD2E25
Turquoise #0099B3 
Black #000000

Be accurate

Colours must be produced accurately across all communications.

Always match the breakdown references for the primary and secondary colours above.

RGB values are for presentations, websites, video and other screen-based applications.

Always set up final artwork destined for print using CMYK, never RGB. Give the Pantone® references to the printers for matching purposes.

Colour contrast

Creating contrast between type and background colour is crucial. Always use a dark type colour on light backgrounds, and white type on dark backgrounds.

Colour contrast examples one good and one bad 

Avoid using teal and turquoise together as people with colour blindness can find it hard to tell the difference. Similar or jarring colours should also be avoided: so, no cherry on brick, turquoise on brick or vice versa.

Colour combinations

There are seven pre-defined colour combinations to choose from when applying a solid background colour.

Seven examples of colour combinsations  

Each one of these has been specifically created to ensure vibrancy, standout and differentiation.

Lime and white together can be applied on top of all remaining primary and secondary colours.

Colour tints

In print, only use colour tints in charts, graphs, tabbing systems, signposting or pull out boxes. They should never be used at less than 12%.

Primary colour tints

Primary colours and their tints

Primary tints  Violet  Lime  Steel 
80% #685CA1  #D8DD4C #717C87 
65%  #8377B2 #E0E376  #89919B
50% #A39DC5  #E6EA7F #A9B0B5 
33% #C3BED9  #EFF1AB  #C7CBCF 
25% #D1CEE2 #F2F4BF #D4D7DA 
12% #E9E7F1 #F9FAE0  #EAECED

Avoid excessive use of tints.

There is slightly more leeway online where tints are often used to aid navigation. However, try to keep colours as strong as you can.

Secondary colour tints

Secondary colours and their tints

Secondary tints  Cherry  Teal  Dove  Brick  Turquoise 
80%  #C6487F  #009D9B  #96AEC1  #D75C46  #00ACC3 
65%  #CF6E97  #55AEAD  #A9BBCB  #DF7C64  #4FBBCF 
50% #DC7FB1  #7FC4C1  #BECDD8  #E69692 #7FCCD9 
33%  #E8ABCC  #ABD8D6 #D4DEES  #EFBAB7  #ABDDE6 
25% #EDBFD8  #BFE1E0 #DEE6EB #F2CBC8  #BFE5EC 
12%  #F6E0EC #E0F1F0  #EFF3F6  #F9E6E4  #E0F3F6

Using colour on graphs

To achieve a consistent look and feel in our charts and graphs, use a range of colours, always starting with our primary colours. Only use the secondary colours if more are required.

An example of charts using primary colours and their tints

You can use specified tints of any of the primary and secondary colour palettes to expand the range or if there are budget restraints.

Be careful to maintain the same high level of contrast when using a two-colour process.

An example of bar and line charts using tints

For guidance on adding charts into your communications see figures, charts and diagrams.

Using colour on tables

The examples shown below demonstrate the table variations that are possible while still adhering to the following rules:

  • Divide rows using tinted steel panels or steel lines.
  • Top and bottom rows can be highlighted with coloured type or coloured panels (in violet and steel).
  • Use steel for text on white and tinted steel panels.
  • Use white text on steel and violet panels.
  • You can use white if you need to use vertical lines to separate columns.
  • You can use violet to highlight key text.
Examples of table formatting using our colour palette 

To highlight text in a table, use our violet colour.  

If your table appears in a section that predominantly uses a colour from our secondary palette, you can use this colour as a highlight instead.

Do not use lime as a text colour or as tinted panels.

For guidance on using tables in your communications see tables.

We will be adding more detailed guidance on charts and diagrams to this guide in due course. In the meantime the ONS has some useful guidance on how to use data visualisation.