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

 

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.

 

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	Lime PANTONE 382C	Steel PANTONE 431C
80%	C68 M67 Y0 K5 R104 G92 B161 #685CA1	C22 MO Y80 K0 R216 G221 B76 #D8DD4C	C36 M20 Y13 K47 R113 G124 B135 #717C87
65%	C55 M55 Y0 K4 R131 G119 B178 #8377B2	C18 M0 Y65 K0 R230 G234 B127 #E0E376	C29 M16 Y11 K38 R137 G145 B155 #89919B
50%	C42 M39 Y7 K0 R163 G157 B197 #A39DC5	C16 M0 Y61 K0 R230 G234 B127 #E6EA7F	C37 M24 Y24 K4 R169 G176 B181 #A9B0B5
33%	C27 M25 Y5 K0 R195 G190 B217 #C3BED9	C10 M0 Y42 K0 R239 G241 B171 #EFF1AB	C26 M17 Y16 K1 R199 G203 B207 #C7CBCF
25%	C21 M19 Y5 K0 R209 G206 B226 #D1CEE2	C8 M0 Y34 K0 R242 G241 B171  #F2F4BF	C20 M13 Y13 K0 R212 G215 B218 #D4D7DA
12%	C10 M9 Y2 K0 R233 G231 B241 #E9E7F1	C4 M0 Y17 K0 R249 G250 B224 #F9FAE0	C10 M6 Y7 K0 R234 G236 B218 #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 tints	Cherry PANTONE 227C	Teal PANTONE 7717C	Dove PANTONE 5425C	Brick PANTONE 180C	Turquoise PANTONE 7711C
80%	C5 M80 Y8 K17 R198 G72 B127 #C6487F	C77 M0 Y38 K15 R0 G157 B155 #009D9B	C36 M13 Y1 K20 R160 G174 B193 #96AEC1	C2 M73 Y69 K10 R215 G92 B70 #D75C46	C78 M0 Y22 K3 R0 G172 B195 #00ACC3
65%	C5 M65 Y6 K14 R207 G110 B151 #CF6E97	C62 M0 Y31 K12 R85 G174 B173 #55AEAD	C29 M11 Y6 K16 R169 G187 B203 #A9BBCB	C2 M59 Y56 K8 R223 G124 B100 #DF7C64	C64 M0 Y18 K3 R79 G187 B207 #4FBBCF
50%	C12 M62 Y1 K0 M220 G127 B177 #DC7FB1	C54 M4 Y28 K0 R127 G196 B193 #7FC4C1	C30 M14 Y13 K0 R190 G205 B216 #BECDD8	C7 M51 Y35 K1 R230 G150 B146 #E69692	C52 M0 Y17 K0 R127 G204 B217 #7FCCD9
33%	C7 M43 Y2 K0 R232 G171 B204 #E8ABCC	C38 M1 Y19 K0 R171 G216 B214 #ABD8D6	C20 M9 Y9 K0 R212 G222 B229 #D4DEE5	C5 M34 Y23 K0 R239 G186 B183 #EFBAB7	C37 M0 Y12 K0 R171 G221 B230 #ABDDE6
25%	C6 M22 Y2 K0 R237 G191 B216 #EDBFD8	C30 M1 Y15 K0 R191 G225 B224 #BFE1E0	C16 M7 Y7 K0 R222 G230 B235 #DEE6EB	C4 M26 Y17 K0 R242 G203 B200 #F2CBC8	C29 M0 Y9 K0 R191 G229 B236 #BFE5EC
12%	C3 M16 Y2 K0 R246 G224 B236 #F6E0EC	C15 M0 Y8 K0 R224 G241 B240 #E0F1F0	C8 M3 Y3 K0 R239 G243 B246 #EFF3F6	C2 M13 Y9 K0 R249 G230 B228 #F9E6E4	C15 M0 Y5 K0 R244 G243 B246 #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.

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.

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.

 

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.

Back to top

Is this page useful?