Data visualisation: colour palettes

We have defined a series of colour palettes to provide consistency in the way services present data using the Design System. This helps to build familiarity and trust with users.

Our data visualisation palettes are based on the principles established by the Government Analysis Function, using colours derived from the Design System’s colour palettes.

If you’re using R to produce charts the Scottish Government R package – sgplot is available, which includes the data visualisation palette colours.

Categorical data palette

Colour	SCSS variable	Hex code
Data vis dark blue	$ds_datavis__dark-blue	#002d54
Data vis teal	$ds_datavis__teal	#2b9c93
Data vis purple	$ds_datavis__purple	#6a2063
Data vis orange	$ds_datavis__orange	#e5682a
Data vis dark green	$ds_datavis__dark-green	#0b4c0b
Data vis green	$ds_datavis__green	#5d9f3c
Data vis brown	$ds_datavis__brown	#592c20
Data vis pink	$ds_datavis__pink	#ca72a2

The categorical data colour palette is based on colours from the Design System’s primary and secondary palettes. We've adjusted the lightness and saturation where necessary to meet minimum WCAG AA contrast requirements for graphical objects. Each colour meets this requirement for both white (#ffffff) and off-white (#f8f8f8) backgrounds.

The colours in the palette are designed to be used in the specified order. This maintains a high level of contrast between each colour and creates a consistent look across many types of data visualisations.

Using colour for categorial data

Categorical data is information which can be divided into specific groups. For example the group ‘eye colour’ could contain the values amber, blue, brown, green, grey.

Only use additional colours from the palette when required. For ungrouped data in vertical and horizontal bar charts, the dark blue should be used.

Figure 1: Office coffee consumption 2020-2023, litres per day

As more categories are added you should use additional colours following the specified order in the palette.

Figure 2: Office caffeinated drink consumption 2020-2023, litres per day

The legend is presented in the same order as the bars in each cluster.

We recommend a maximum of four colours in a chart. If you feel you need more than four, think about how you could redesign your chart to avoid this. If you must use more than four colours, the main-extended palette can be used in the specified order.

Sequential data palette

Colour	SCSS variable	Hex code
Data vis dark blue	$ds_datavis__dark-blue	#002d54
Data vis blue	$ds_datavis__blue	#0065bd
Data vis light blue	$ds_datavis__light-blue	#55a8f2

You should use the sequential palette when the order of the data has meaning, such as different age groups.

As this palette is made up of tints of the same colour, there are some issues with contrast as neither the dark or light blue meets 3:1 contrast with the mid blue. The light blue does not meet 3:1 contrast against white or off-white. To address this there should be a gap between each bar and each should use the dark blue as an outline. 

Figure 3: Average number of caffeinated drinks per day 2020 to 2022, by age group

The legend is presented in the same order as the bars in each cluster.

The legend of grouped bar charts should also match the order of the bars and it should say this above the chart.

Focus charts palette

Colour	SCSS variable	Hex code
Data vis dark blue	$ds_datavis__dark-blue	#002d54
Data vis medium grey	$ds_datavis__medium-grey	#949494

You can use the focus charts palette to emphasise a specific element of a plot.

This palette contains the dark blue and a medium grey. The grey in this palette has good contrast against the dark blue and meets the necessary requirements against white (#ffffff) but not off-white (#f8f8f8). Therefore data visualisations using this palette should only use a white background.

The focus line should also be slightly thicker than the non-focussed lines in the chart, in this example the focus line is one pixel thicker. We only recommend using this approach when it's essential to communicate your message.

Figure 4: Scottish workplace average caffeine consumption 2016-2022 (mg)

Data visualisation and accessibility

It is important that the data visualisations produced by the Scottish Government can be understood by as many as people as possible, including those who perceive colours differently.

Poor colour use can cause problems such as:

• people who are colour blind may not be able to understand a chart that uses different colours for different parts of the chart

• people who have low vision may not be able to read text that's a light colour on a white background

• people using a mobile phone when it's sunny may not be able to see low contrast text or tell the difference between colours.

Development

The data visualisation palettes are based on the principles defined by the Government Analysis Function. Their website contains in depth guidance and training materials on many aspects of data visualisation.

We used the Viz Palette tool to test palette combinations against different types of colour blindness. We also sought advice and input from accessibility and data experts within our organisation.