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.


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


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 
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 tints

Violet PANTONE 7672C


Steel PANTONE 431C


C68 M67 Y0 K5
R104 G92 B161

C22 MO Y80 K0
R216 G221 B76

C36 M20 Y13 K47
R113 G124 B135


C55 M55 Y0 K4
R131 G119 B178

C18 M0 Y65 K0
R230 G234 B127

C29 M16 Y11 K38
R137 G145 B155


C42 M39 Y7 K0
R163 G157 B197

C16 M0 Y61 K0
R230 G234 B127

C37 M24 Y24 K4
R169 G176 B181


C27 M25 Y5 K0
R195 G190 B217

C10 M0 Y42 K0
R239 G241 B171

C26 M17 Y16 K1
R199 G203 B207


C21 M19 Y5 K0
R209 G206 B226

C8 M0 Y34 K0
R242 G241 B171

C20 M13 Y13 K0
R212 G215 B218


C10 M9 Y2 K0
R233 G231 B241

C4 M0 Y17 K0
R249 G250 B224

C10 M6 Y7 K0
R234 G236 B218

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 tints

Cherry PANTONE 227C

Teal PANTONE 7717C

Dove PANTONE 5425C

Brick PANTONE 180C

Turquoise PANTONE 7711C


C5 M80 Y8 K17
R198 G72 B127

C77 M0 Y38 K15
R0 G157 B155

C36 M13 Y1 K20
R160 G174 B193

C2 M73 Y69 K10
R215 G92 B70

C78 M0 Y22 K3
R0 G172 B195


C5 M65 Y6 K14
R207 G110 B151

C62 M0 Y31 K12
R85 G174 B173

C29 M11 Y6 K16
R169 G187 B203

C2 M59 Y56 K8
R223 G124 B100

C64 M0 Y18 K3
R79 G187 B207


C12 M62 Y1 K0
M220 G127 B177

C54 M4 Y28 K0
R127 G196 B193

C30 M14 Y13 K0
R190 G205 B216

C7 M51 Y35 K1
R230 G150 B146

C52 M0 Y17 K0
R127 G204 B217


C7 M43 Y2 K0
R232 G171 B204

C38 M1 Y19 K0
R171 G216 B214

C20 M9 Y9 K0
R212 G222 B229

C5 M34 Y23 K0
R239 G186 B183

C37 M0 Y12 K0
R171 G221 B230


C6 M22 Y2 K0
R237 G191 B216

C30 M1 Y15 K0
R191 G225 B224

C16 M7 Y7 K0
R222 G230 B235

C4 M26 Y17 K0
R242 G203 B200

C29 M0 Y9 K0
R191 G229 B236


C3 M16 Y2 K0
R246 G224 B236

C15 M0 Y8 K0
R224 G241 B240

C8 M3 Y3 K0
R239 G243 B246

C2 M13 Y9 K0
R249 G230 B228

C15 M0 Y5 K0
R244 G243 B246

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.