How to apply colour and hues to charts and graphs

Date d’adoption : 
18 janvier 2023
Dernière mise à jour : 
18 janvier 2023

If you are creating a chart or graph that will use colour, it’s important to use the governments branding colours. Applying the government’s brand colours appropriately will highlight the story you want to tell.

There are 3 main different ways you can use the branded colours.

  1. Qualitative
  2. Sequential
  3. Diverging

The one you choose will depend on the kind of data you are using.

1. Your chart has categories with distinct labels and no inherent ordering

When you display qualitative data, you will assign one of the government’s branded colours to each possible value of the variable. 

Apply the brand colours

Use Midnight Sun as the primary colour first and then you can apply any of the secondary brand colours in any order you like.

Example of a chart using a qualitative palette

In this example you can see in most cases it is more appropriate to group lesser values into one group called "Other."

A chart showing how to cluster lesser values in one group called other.

Best practices

  • Use no more than the 6 branded colours. We do not include black because we do not use it for charts and graphs. If you have more categories than branded colours:
    • You can use different tints or shadows to create variations between colours. Be careful not to make the differences so great that it suggests some colours are more important than others. You can reach out to the government’s design team for advice at [email protected] for advice.
    • You can also group together the smallest categories into one “other” category.

2. Your chart has variables that are numeric or have inherently ordered values

When you display sequential data you will assign brand colours to data values in a continuum based on lightness, hue or both.

Apply the brand colours

Apply the brand colours in the following order to indicate greater to lesser values.

  1. Midnight Sun
  2. Lichen
  3. Bryum Moss
  4. River Blue
  5. Zinc
  6. Twilight

Examples

A chart showing how to apply different hues of a colour to indicate greater or lesser values

Best practices

  • Lower values should be associated with lighter brand colours and higher values with darker brand colours.
  • If you use hue as a secondary dimension, the warmer brand colours (Lichen, Midnight Sun, Bryum Moss) will represent the lower values and the cooler brand colours (River Blue, Zinc and Twilight) will go to the higher values.

3. Your chart has a numeric variable and a meaningful central value like 0

In these instances you will want to use a diverging palette. In this instance, you have a meaningful central value like 0 and 2 sequential palettes. The endpoints of the 2 sequential palettes meet at the central value.

Apply the brand colours

When you apply the brand colours you will select 3 colours to indicate the central value and the values to either side of the central value.

  • The colour you choose for the central value should be grey. To achieve this within the brand colours, you can use Black at 30% of intensity.
  • For the other 2 colours you can select whatever colours you like from the palette. These colours will start lighter near the centre value and then get darker the further out they get.

Examples

An example of a visualization using black at 30% so it appears grey.

Best practices for applying colour to your chart or graph

Keep these best practices in mind as you apply colour to your charts and graphs.

  • Only apply colour if it is needed. You will not need to add multiple colours to every chart. In some cases adding more colour makes it harder for the end user to pull out the important information you want to highlight. If you have only 2 variables to plot – they will likely be encoded by vertical and horizontal positions and lengths. You would only apply colour when a 3rd variable needs to be encoded into the chart or if it is a component of a specialist chart like a pie chart.
    A Chart using two brand colours rather than all six to highlight data.
  • Make sure your colours are presented in an accessible manner

    • Not everyone sees colour the same way. With some forms of colour blindness people cannot differentiate between certain shades of red and green and with other forms of colour blindness blue and yellow are hard to distinguish.

      • Test your chart with a colour blindness simulator so you can see what it looks like to people with different forms of colour blindness. You can find free colour blindness simulators online. This will allow you to identify any ambiguities and make adjustments before you publish the chart.

    • Follow the brand guidance and avoid using overly saturated colours. By keeping the brightness even, it will help reduce eye strain and make it easier for people to use.

    • Make sure the contrast meets WCAG 2.0 AA. You can use a free accessibility checker to do this.

  • Be consistent. If you’re creating a dashboard or a series of charts that are related, match the colours between charts when they refer to the same group. This will help users interpret your message at a glance. If you present multiple colours to indicate the same values, it can be confusing for people to interpret your message.

  • Use grey for unimportant data. You can achieve this by using Black at 30% of intensity. This will visually move it to the background and make it easier to highlight the data you want to stand out.