Data visualisation: colour palettes

About the data visualisation colour palettes 

We’ve created 3 colour palettes for charts: 

• categorical – for distinct categories of data 
• sequential – when the order of the data has meaning 
• focus – to emphasise a specific element of a plot 

The palettes are designed to meet the principles established by the Government Analysis Function. They have sufficient colour contrast whenever possible. 

The example charts have been created using artificial data.  

How to use the data visualisation colour palettes 

Use the colour palette that reflects the type of data you have.  

We've included the palettes in the Scottish Government R package, sgplot. R is a programming language for data visualisation. Find out more on the sgplot Github.  

You can recreate the colour palettes on other data visualisation tools using the Hex codes provided.  

Categorical data palette

Colour	SCSS variable	Hex code
Categorical data colour 1 (dark blue)	$ds_datavis__categorical-1	#002d54
Categorical data colour 2 (teal)	$ds_datavis__categorical-2	#2b9c93
Categorical data colour 3 (purple)	$ds_datavis__categorical-3	#6a2063
Categorical data colour 4 (orange)	$ds_datavis__categorical-4	#e5682a
Categorical data colour 5 (dark green)	$ds_datavis__categorical-5	#0b4c0b
Categorical data colour 6 (green)	$ds_datavis__categorical-6	#5d9f3c
Categorical data colour 7 (brown)	$ds_datavis__categorical-7	#592c20
Categorical data colour 8 (pink)	$ds_datavis__categorical-8	#ca72a2

Categorical data is information which can be divided into specific groups.  

Use one colour for each category of data.  

If you have one group or category of data to display, use #002d54, the dark blue.  

Use additional colours from the palette for additional categories, in the order specified in the palette.  This maintains a high level of contrast between each colour. It also creates a consistent look across many types of data visualisations. 

Use a white (#ffffff) or off-white (#f8f8f8) background to meet the Web Content Accessibility Guidelines (WCAG) colour contrast ratio of 3:1.  

We recommend a maximum of 4 colours in a chart to avoid complex charts that are hard to understand. 

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

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

Sequential data palette

Colour	SCSS variable	Hex code
Sequential data colour 1 (dark blue)	$ds_datavis__sequential-1	#002d54
Sequential data colour 2 (blue)	$ds_datavis__sequential-2	#0065bd
Sequential data colour 3 (light blue)	$ds_datavis__sequential-3	#55a8f2

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

It’s standard practice to use tints of one colour for sequential data, however it’s very difficult to meet a 3:1 colour contrast ratio.  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, leave a gap between each bar and outline each bar in dark blue (#002d54).  

Match the order of the bars in the legend to the order in the chart. 

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

 

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
Focussed data colour (dark blue)	$ds_datavis__focus	#002d54
Non-focussed data colour (grey)	$ds_datavis__focus--dimmed	#949494

Use the focus charts palette to draw attention to a specific bit of data or element of a plot.  

Use the dark blue (#002d54) for the focus line and dark grey (#949494) for the non-focussed lines. Increase the pixel size of the focus line so it’s slightly thicker than the unfocussed lines.

Use a white background (#ffffff) for focus charts so that there’s sufficient colour contrast.  

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

Data visualisation and accessibility

Charts produced by the Scottish Government should be able to 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.

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.