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.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback