Chart colours
In some charts, colours help differentiate between categories of data, such as in line charts or stacked bar charts. Some visualisations use colour to represent numerical values, such as heatmaps.
The chart palette draws from the web palette. This page only covers the parts specific to charts: the categorical picks, the rule on sequential and divergent scales, and the accent colours.
Categorical palette
Use these colours to differentiate between categories of data.
| Colour | Name | Hex |
|---|---|---|
| Primary blue | #1D70B8 | |
| Blue shade 50% | #0F385C | |
| Primary magenta | #CA357C | |
| Purple tint 25% | #7F65B7 | |
| Teal tint 25% | #50A1A5 | |
| Orange tint 25% | #F7996A |
Axes and lines
| Colour | Name | Hex |
|---|---|---|
| Black tint 80% | #CECECE |
Labels
| Colour | Name | Hex |
|---|---|---|
| Black | #0B0C0C |
Sequential and divergent scale palette
Avoid using colour alone to visualise insights. Use a maximum of two scales in a single chart.
The scales use the tints and shades from the web palette.
Accent colours
Use only in conjunction with backgrounds using 25% and 50% shades.
| Colour | Name | Hex |
|---|---|---|
| Accent blue | #11E0F1 | |
| Accent magenta | #FF52EE | |
| Accent red | #FF5E5E | |
| Accent green | #66F39E | |
| Accent purple | #BA4AFF | |
| Accent teal | #00FFE0 | |
| Accent orange | #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