Using colours in charts
Overview
Using the right colours will make sure your data visualisation is accessible, clear and intuitive. For certain charts, colour is a way to differentiate between categories of data. Examples of this are line charts and stacked bar charts.
Some visualisations use colour to represent quantitative (numerical) values. Examples are choropleth maps and heatmaps. Colour can also be used to highlight data within a chart.
There are several important things to consider when choosing the colours in your data visualisation, such as:
- using sufficient contrast with the background colour
- ensuring that the colours are suitably different from one another; this is especially important for users with colour vision deficiency
- using colour in a way that is intuitive and helps to convey the meaning of the data
- limiting the number of colours used; users may find it difficult to tell the difference between colours if too many are used
When to use a single colour
Certain chart types do not need colour to differentiate between categories. An example of this is a bar chart, where a single colour is used to represent the data.
At the Office for National Statistics (ONS), we use Ocean blue when only one colour is needed.
Ocean blue
- CSS variable
- --ons-color-ocean-blue
Where categories in a chart are grouped under subheadings, use the same colour for all groups.
An exception to this is where different colours are used for different categories or groups in multiple charts in a publication. Use the same colours for each group in each data visualisation to ensure consistency across the release.
Read more in Use consistent colours (opens in a new tab)
Highlighting
For charts with a single main colour, use a different colour to highlight a category or interesting data point.
In the following example, a highlight colour helps the user to quickly see the UK data in the two charts:
When using colour to highlight a category, it is sometimes useful to provide an annotation explaining this.
Read more about how to use annotations in our annotations guidance
In Chartbuilder, the default highlight colour is orange. Use this to highlight the important data.
In charts created in other tools, use grey to show less important categories and use Ocean blue or other colours from our standard category colour palette to highlight important data
Multiple colours
Certain charts need multiple colours to differentiate between categories of data. Examples of this are line charts with more than one series and stacked bar charts.
In the following line chart example, different colours are used to differentiate between the lines:
In the following stacked bar chart example, different colours are used to show the segments within each bar:
Avoid using too many categories and colours. The more colours there are, the harder it is for users to perceive differences between them, especially for users with a colour vision deficiency.
Always use five colours or fewer in your data visualisations to help users perceive the differences between colours
More colours can be used when using a colour scale to show ordered data. Read more in Categories with an order (opens in a new tab)
To reduce the number of colours needed you may need to:
- show fewer series
- group categories into larger groups, for example, several small categories could be grouped into an “other” group
- consider which categories are shown on the axis
- consider an alternative chart type
More guidance on how to keep charts simple is available on the principles page
In the Chartbuilder tool, some alternative chart types will not be possible. Never use more than nine colours. Make sure colours are not repeated for more than one category within the same chart.
Standard category colour palette
When using multiple colours to differentiate between categories, use the standard category colour palette.
Ocean blue
- CSS variable
- --ons-color-ocean-blue
Sky blue
- CSS variable
- --ons-color-sky-blue
Night blue
- CSS variable
- --ons-color-night-blue
Emerald green
- CSS variable
- --ons-color-emerald-green
Spring green
- CSS variable
- --ons-color-spring-green
Beetroot purple
- CSS variable
- --ons-color-beetroot-purple
Coral pink
- CSS variable
- --ons-color-coral-pink
Lavender purple
- CSS variable
- --ons-color-lavender-purple
Mint green
- CSS variable
- --ons-color-mint-green
Alternative category colour palette
The alternative category colour palette is a five-colour palette for Chartbuilder. It can be used when more variation between colours is needed. For example, in a line chart with crossing lines.
Ocean blue
- CSS variable
- --ons-color-ocean-blue
Sky blue
- CSS variable
- --ons-color-sky-blue
Beetroot purple
- CSS variable
- --ons-color-beetroot-purple
Spring green
- CSS variable
- --ons-color-spring-green
Coral pink
- CSS variable
- --ons-color-coral-pink
The Chartbuilder tool uses these colours in a standard order or an alternative order. The alternative order should only be used to provide more variation between colours
Use consistent colours
If you have a series of charts, use the same colours for the same categories across all your charts. This makes it easier for users to follow the story and they will be less likely to mistake one data series for another.
In the following two example charts, the same colours are used for the same categories in both the pie chart and the line chart.
When using consistent colours, make sure the order of the categories follows our Ordering in charts guidance
The ONS Chartbuilder tool uses colours in a fixed order, which depends on the order of the data in the chart. To change the order of colours you will need to change the order of the data in the file used to create your chart
Categories with an order
Charts will sometimes include categories that have a natural or usual order. For example:
- bad or very bad health, fair health, good health, and very good health
- low income, medium income, and high income
When using colours to show these categories, use colours on a scale.
Colours on a scale are not currently available for charts made in the Chartbuilder tool
Diverging categories
A diverging scale is where categories are in a natural order that extends from a neutral midpoint to two extremes. For example:
- very good, good, neither good or bad, bad, and very bad
- strongly agree, somewhat agree, neither agree or disagree, somewhat disagree, and strongly disagree
A common example of this is certain survey data or data above or below a threshold.
These categories should be visualised with a diverging colour palette. Diverging colour palettes will extend to two colour scales, one for each of the extremes, and may have a neutral middle colour.
The following chart uses a diverging colour palette to show data on health outcomes, where the categories range from “very bad” to “very good”:
Read more about when to use the natural order of categories in our ordering in charts guidance
Help improve this page
Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab)