Skip to main content

Charts

Chart palette

In some charts, colours help differentiate between categories of data, such as in line charts or stacked bar charts. Some types of visualisations use colour to represent numerical values, such as heatmaps.

The chart palette has:

Categorical palette

Primary blue
RGB 29 112 184
#1D70B8
Blue shade 50%
RGB 15 56 92
#0F385C
Primary magenta
RGB 202 53 124
#CA357C
Purple tint 25%
RGB 127 101 183
#7F65B7
Teal tint 25%
RGB 80 161 165
#50A1A5
Orange tint 25%
RGB 247 153 106
#F7996A

Axes & lines

Black tint 80%
RGB 206 206 206
#CECECE

Labels

Black
RGB 11 12 12
#0B0C0C

Sequential and divergent scale palette

Avoid using colour alone to visualise insights. Use a maximum of two scales in a single chart.

Blues

Primary blue
RGB 29 112 184
#1D70B8
Blue tint 25%
RGB 86 148 202
#5694CA
Blue tint 50%
RGB 142 184 220
#8EB8DC
Blue tint 80%
RGB 210 226 241
#D2E2F1
Blue shade 10%
RGB 26 101 166
#1A65A6
Blue shade 25%
RGB 22 84 138
#16548A
Blue shade 50%
RGB 15 56 92
#0F385C

Magentas

Primary magenta
RGB 202 53 124
#CA357C
Magenta tint 25%
RGB 215 104 157
#D7689D
Magenta tint 50%
RGB 229 154 190
#E59ABE
Magenta tint 80%
RGB 244 215 229
#F4D7E5
Magenta shade 25%
RGB 152 40 93
#98285D
Magenta shade 50%
RGB 101 27 62
#651B3E

Reds

Primary red
RGB 202 53 53
#CA3535
Red tint 25%
RGB 215 104 104
#D76868
Red tint 50%
RGB 229 154 154
#E59A9A
Red tint 80%
RGB 244 215 215
#F4D7D7
Red shade 25%
RGB 152 40 40
#982828
Red shade 50%
RGB 101 27 27
#651B1B

Greens

Primary green
RGB 15 122 82
#0F7A52
Green tint 25%
RGB 75 155 125
#4B9B7D
Green tint 50%
RGB 135 188 168
#87BCA8
Green tint 80%
RGB 207 228 220
#CFE4DC
Green shade 25%
RGB 11 92 62
#0B5C3E
Green shade 50%
RGB 8 61 41
#083D29

Purples

Primary purple
RGB 84 49 159
#54319F
Purple tint 25%
RGB 127 101 183
#7F65B7
Purple tint 50%
RGB 170 152 207
#AA98CF
Purple tint 80%
RGB 221 214 236
#DDD6EC
Purple shade 25%
RGB 63 37 119
#3F2577
Purple shade 50%
RGB 42 25 80
#2A1950

Teals

Primary teal
RGB 21 129 135
#158187
Teal tint 25%
RGB 80 161 165
#50A1A5
Teal tint 50%
RGB 138 192 195
#8AC0C3
Teal tint 80%
RGB 208 230 231
#D0E6E7
Teal shade 25%
RGB 16 97 101
#106165
Teal shade 50%
RGB 11 65 68
#0B4144

Oranges

Primary orange
RGB 244 119 56
#F47738
Orange tint 25%
RGB 247 153 106
#F7996A
Orange tint 50%
RGB 250 187 156
#FABB9C
Orange tint 80%
RGB 253 228 215
#FDE4D7
Orange shade 25%
RGB 183 89 42
#B7592A
Orange shade 50%
RGB 122 60 28
#7A3C1C

Neutrals

Black
RGB 11 12 12
#0B0C0C
Black tint 25%
RGB 72 73 73
#484949
Black tint 50%
RGB 133 134 134
#858686
Black tint 80%
RGB 206 206 206
#CECECE
Black tint 95%
RGB 243 243 243
#F3F3F3
White
RGB 255 255 255
#FFFFFF

Additional palette for illustrative infographics

Must only be used in conjunction with backgrounds using 25% and 50% shades.

Blue tint 95%
RGB 244 248 251
#F4F8FB
Magenta tint 95%
RGB 252 245 248
#FCF5F8
Red tint 95%
RGB 252 245 245
#FCF5F5
Green tint 95%
RGB 243 248 246
#F3F8F6
Purple tint 95%
RGB 246 245 250
#F6F5FA
Teal tint 95%
RGB 243 249 249
#F3F9F9
Orange tint 95%
RGB 254 248 245
#FEF8F5
Accent blue
RGB 17 224 241
#11E0F1
Accent magenta
RGB 255 82 238
#FF52EE
Accent red
RGB 255 94 94
#FF5E5E
Accent green
RGB 102 243 158
#66F39E
Accent purple
RGB 186 74 255
#BA4AFF
Accent teal
RGB 0 255 224
#00FFE0
Accent orange
RGB 255 175 74
#FFAF4A

Using colour in charts

When choosing colours for your data visualisation:

  • ensure sufficient contrast with the background and overlapping text
  • avoid using colour as the only visual means of conveying information
  • focus on applying colour that enhances the clarity of the data
  • limit colours to avoid confusion

Single category

Example of a bar chart with blue bars over grey lines.

Primary blue
RGB 29 112 184
#1D70B8
Black tint 80%
RGB 206 206 206
#CECECE
Black
RGB 11 12 12
#0B0C0C

Multiple categories

Example of a line chart with differently coloured lines over a grid and a legend on top.

Blue shade 50%
RGB 15 56 92
#0F385C
Teal tint 25%
RGB 80 161 165
#50A1A5
Primary magenta
RGB 202 53 124
#CA357C
Orange tint 25%
RGB 247 153 106
#F7996A
Black tint 80%
RGB 206 206 206
#CECECE
Black
RGB 11 12 12
#0B0C0C

Divergent categories

Example of a stacked bar chart with four differently coloured stacks and a legend on top.

Primary red
RGB 202 53 53
#CA3535
Red tint 50%
RGB 229 154 154
#E59A9A
Black tint 80%
RGB 206 206 206
#CECECE
Blue tint 50%
RGB 142 184 220
#8EB8DC
Primary blue
RGB 29 112 184
#1D70B8
Black
RGB 11 12 12
#0B0C0C

Using charts within social media

On social, charts can leverage the full colour palette. For example, accent colours can be used to highlight key data points and positive messages. We also use larger and bolder graphical elements to help engage and inform audiences.

Series of mockups of a sponsored post from GOV.UK on Instagram showing differently-sized circles representing the most visited pages on GOV.UK.

Indicative examples for illustrative purposes only.