Table of contents

  1. Introduction to colour
  2. Using colour in bar charts
  3. Using colour in line charts
  4. Using colour in pie charts
  5. Using colour to connect information
  6. Choosing the right colours
  7. Tools
  8. Colour association
  9. Branding with colour
  10. Accessibility and colours
  11. Colour combinations
  12. Using red and green
  13. Further information about colour theory

Print this page

Download as PDF

Introduction to colour

Colour is an important consideration in design. Use colour carefully, it should reinforce the main messages in your data.

Do not rely on colour alone to communicate the stories in your data. The important messages communicated by the data must be clear if the graphic is viewed in black and white or if the user is colour-blind.

When considering your colour choices look at the relationships present in the data. It should be used to group related items and command attention. Contrasting colours can be used to focus attention on differences, or interesting areas, within the data.

A safe starting point is to use subdued, pastel colours or greyscale to communicate the majority of your information.

Using colour in bar charts

Categorical data that cannot be grouped

For categorical data that cannot be organised into broad groups use the same colour and shade.

Example of how to use colour for categorical data

A rotated bar chart showing different types of land, where all the bars are the same colour and shade.

Example of how not to use colour for categorical data

A rotated bar chart showing different types of land, where all the bars are different colours and shades.

Categorical data that can be grouped

If the categorical data can be grouped, use colour to help highlight this relationship.

Example 1 of how to use colour to group categorical data

Colour by broad category

Use colour when sub-categories are not shared across broad categories to show hierarchy in the data
A rotated bar chart showing categories of race and ethnicity, split out into broad category and sub-categories grouped together through different shades.

Example 2 of how to use colour to group categorical data

Colour by year

Use colour when sub-categories are common across broad categories to show secondary relationships in the data.
A rotated bar chart grouping broad categories of race and ethnicity together, using different shades for bars to show the difference between male and female data.

Example of how not to use colour to group categorical data

A rotated bar chart showing categories of race and ethnicity, all mixed together with various shades and no order to the data.

Using colour in line charts

Use colour to distinguish between lines on a line chart.

Implied order

If the data has an implied order, for example, age ranges, use different shades of one colour, or colours with different luminance values, but the same hue and saturation.

Example of chart using different shades of one colour to show an implied order

Line chart with each line in a different shade of blue to distinguish the different age ranges.

No implied order

If the data has no implied order, for example, male and female, different colours (hues) can be used.

Example of chart using different colours

Line chart with a blue line for males and a yellow line for females.

Using colour and texture

Lines have a smaller area than bars, which means fewer colours can be distinguished. Try to avoid using more than four shades of one colour on a line chart without using another mechanism to differentiate between them. Using colour and texture can be particularly powerful.

Example of chart where data categories can be ordered

Line chart with each line in a different shade of blue to distinguish between ages, with some dashed lines to distinguish from the solid lines.

Example of chart where data categories have no order

Line chart using a range of different colours and both solid and dashed lines to distinguish between different countries.

Using colour in pie charts

Different shades of one colour, or colours with different luminance values, or different colours (hues) can be used in pie charts.

Do

Example of pie chart using different shades of one colour

A pie chart showing employment data using a different shade of blue for each segment.

Example of pie chart using different colours

A pie chart showing employment data using a different colour for each segment.

Using colour to connect information

Consistent colours

You can also use colour to connect information and charts on a page or within an article. For example, use the same colours for categories throughout your charts to help tell the story of the data.

Example of charts using the same colours to connect information

A pie chart using a different colour for each category, with a further breakdown of the data below in bar and line charts using the individual category colour.

Choosing the right colours

Always ensure that people who cannot perceive colour or see it in a different way can still understand the information.

If you need to use colour to convey information make sure that colour-blind safe colours are used. Use a colour-blind simulator, such as Vischeck, to test your colours to see whether they are colour-blind safe.

Colour palettes should be chosen to maximise the difference in perception between the colours and also appear distinct to people with varying types of colour blindness.

A good starting point is to choose colours that are distinct from the background and each other.

When choosing a colour palette tools like Colorbrewer can provide a good starting point. Palettes for use in the ONS will be added here in the future.

Tools

Use these tools to help ensure your colours are accessible:

  • Colorbrewer is a useful basic tool that allows you to choose 3 to 12 colours according to specified requirements, for example, colour-blind safe or diverging colours
  • Colorhexa allows greater control over choosing optimally distinct colours, a colour-blind simulator shows how colours appear to people with different types of colour blindness
  • Adobe Illustrator allows you to simulate different kinds of colour blindness

Colour association

What colours are associated with

Certain colours have different meaning associated with them, which will vary dependent on context.

For example:

  • red: caution, anger, love, negative (in finance), hot
  • orange: warm, autumn
  • yellow: happy, fun, young
  • green: nature, calm, good luck
  • blue: stability, professional, cold, trust, intelligence
  • purple: wealth, mystical, decadent
  • brown: rustic, practical, warm, vintage
  • white: sterile, innocence, peace, truth, cleanliness
  • black: sophistication, death, night, contemporary
  • multicolour: international, all inclusive, multicultural

Where appropriate use colours that are naturally associated with the categories they are representing.

Example of pie chart using colours associated with the categories they represent

A pie chart showing types of fruit, where the colours are naturally associated with the fruit, for example, yellow is shown for banana.

Example of pie chart using colours not associated with the categories they represent

A pie chart showing types of fruit, where the colours are not associated with the fruit, for example, blue is used for banana here.

However, you need to be aware of colour association with potentially sensitive topics, for example, political parties. The use of a particular colour can change the context of what you are presenting.

Branding with colour

Colour can be used to show the data are part of a particular brand or collection.

Census 2011

For example, the 2011 Census used a purple colour scheme and this was used in the design of their charts.

Example of Census 2011 purple branding in a chart

A bar chart used in the Census with light purple and dark purple shades used for the bars to tie in with their branding.

But….

Do not be constrained to only using your corporate or brand colours. Use the colours that are most appropriate to highlight patterns in the data and can be perceived the most clearly by all users.

Accessibility and colours

Approximately 1 in 12 men (8%) and 1 in 200 women suffer from colour blindness. There are many different forms of colour blindness:

Normal Vision

A spectrum of the colours users with normal vision can see, ranging from red and orange to blue and pink.

Deuteranomaly

A spectrum of the colours users with Deuteranomaly can see, who can have difficulty telling the difference between shades of green and red.

Protanomaly

A spectrum of the colours users with Protanomaly can see, who also can have difficulty tellign the difference between shades of green and red.

Protanopia

A spectrum of the colours users with Protanopia can see, who see red and green as shades of black and yellow and also have difficulty with different shades of blue.

Deuteranopia

A spectrum of the colours users with Deuteranopia can see, who see red and green as shades of beige and brownish-yellow.

Tritanopia

A spectrum of the colours users with Tritanopia can see, who have normal red and green vision but cannot tell shades of blue and yellow apart.

Tritanomaly

A spectrum of the colours users with Tritanomaly can see, where shades of blue and green will look alike, and shades of red and yellow will look alike.

Achromatopsia

A spectrum of the colours users with Achromatopsia can see, where all colours and shades appear as black and white.

 

Use these three helpful rules when choosing your colours

“Get it right in black and white”

Make sure your design works in greyscale (black and white) before adding in colour. Do not assume colours will signal meaning when used on their own.

“The safest hue is blue”

The richest colour across all types of colour blindness is blue, so blue is often a good colour choice.

“Red and green should never be seen”

Avoid using red and green together as they are difficult to distinguish from one another in the more common types of colour blindness.

Colour combinations

Choosing the correct colours

Avoid colour combinations that are especially hard for colour-blind people to see.

Example of colour combinations that should not be used

Examples of how different colour combinations can look to users with normal vision compared with those with Protanopia and Deuteranopia.

Using shades of a single colour

Use various shades of a single colour, instead of multiple colours, to help avoid colour blindness issues. This can be done by varying the luminance or saturation and holding the hue constant.

Example of how to use shades of one colour with varying luminance or saturation

An example of the increasing shades of blue available, from black to bright blue.

Colour-blind people can still perceive contrast, as well as differences in hue, saturation and brightness. Use bright colours which are easier to distinguish rather than dim ones, which tend to blur into one another.

Use larger areas and thicker lines

Some mildly colour-blind people are able to see a colour, but only if there is a sufficient “mass” of it. Use larger areas and thicker lines if possible.

Using red and green

Use symbols as well as colour

If you are using red to signal “warning,” or “caution,” and green to signal “approval” or “correctness” consider adding a symbol to make sure colour-blind users can still understand the message.

Example of how to use colour and symbols to improve accessibility

An example of filling in an online form, with red and a cross used to show a field has been filled incorrectly, and green and a tick to show something has been filled correctly.

Traffic lights use red and green, but the position of the lights communicates “stop” or “go”, even if the colours cannot be seen.

Example of how traffic lights convey meaning through colour and position

Normal vision

Traffic lights seen by people with normal vision, with red, amber and green lights.

Appearance for someone with red-green colour-blindness

Traffic lights seen by people with red-green colourblindness, where all the lights appear in shades of yellow.

Colour should never be the only method of communication

When the use of red and green is unavoidable, for example, RAG (red, amber, green) ratings, make sure that colour is not the only method of communication.

Consider representing RAG ratings in the same way as the previous examples, with a secondary method of communication.

Example of RAG ratings using colour and symbols or position to communicate meaning

An example of a red, amber, green rating, using numbers to display colours.

Further information about colour theory

Colour theory is complex and is based on colour models and colour spaces.

Defining colours

Colours are defined in many ways, three of the more common ways are:

  • RGB (red, green, blue) – which describes the type of light emitted to produce a colour
  • HSL (hue, saturation, luminance) – commonly used by artists
  • CMYK (cyan, magenta, yellow, black) – used in printing to describe the inks required to produce a given colour

Example of how a colour can be defined

An example of a shade of turquoise.

This colour can be defined in the following ways:

RGB(35, 165, 142), HTML traditionally uses hexadecimal conversions of the RGB value to define colour. For example #23A58E

HSL(169.38°, 78.79%, 64.71%)

CMYK(77.75%, 11.45%, 54.28%, 0.34%)

You can use at least one of these methods to define colour in most software packages.

We are constantly improving based on research and best practice. Any significant changes to our guidance are available on the Updates page.