Colours
Colors play an essential role in how users perceive charts.
Try to approach colors as an extension of the message you want to convey. Aim to not only enhance the interface with color but also to help users interpret chart data.
Best practices
Use a limited color palette
More colors make for charts that are difficult to read and understand. Consider sticking to a set of five to seven colors and choosing contrasting colors that are easy to distinguish.
Make colors meaningful
Choose colors that have a specific meaning or convey a particular message. For instance, use red hues to represent negative values and greens to represent positive values. Also, avoid using culturally significant colors or colors that can evoke unintentional meaning.
Encode data in colors
Use different colors to represent different data points and categories. For instance, use one color to describe sales figures in one year and a different color to represent sales figures in another year.
Keep colors consistent
Use colors consistently to help users quickly grasp their meaning and apply less effort when comparing data points.
Use color for emphasis
Highlight specific data items with color, especially when distinguishing them from the less critical data points. For instance, use grey or less saturated colors for the unimportant data to make the valuable information pop.
Types of Color palettes
Different charts can benefit from different types of color palettes. Choose a palette appropriate for the data you're depicting and the chart type you use to describe it.
Additionally, consider how colors map across the different WPP DS themes. Each brand and OS workspace has its own set of color palette, and when your app's charts are shown in different workspaces, they'll adapt to the color scheme of that workspace based on token names.
The palettes in this section reference the deafault WPP Open theme. Use them for reference only.
Following are the three types of colour palettes to consider in your charts:
Sequential palette
The sequential color palette represents data with clear order and quantity, such as a time series or percentages. Typically, sequential palettes use different shades of one color, with the lighter shades representing the lower values and the darker shades representing the higher values.
The WPP Open DS offers the following sequential palettes:
- Brand colors – the primary colors that the Open OS uses to build charts.
- System colors – negative, warning, and positive.
- Greyscale colors – for deemphasising data.
Brand
System
Negative, warning, and positive.
Greyscale
Diverging palette
The diverging color palette enables you to represent data that compares positive and negative values. Typically, such palettes use two contrasting colors for the opposing values and a third color in the middle to show the neutral data threshold. Usually, we recommend using white as the threshold color.
The WPP DS themes use sequential palette colors to implement diverging palettes. For instance, you can combine brand colors with positive or negative sequential palettes to represent opposing data values.
You can combine colors however you see fit, but we recommend using progressively darker values at the opposing ends of data spectrums.
Sample combinations
Categorical palette
The categorical palette enables you to represent data that doesn't have a clear order or quantity, for instance categories or groups. Typically, categorical palettes use a range of distinct colors to represent different data points or categories.
The WPP DS themes offer a categorical palette containing ten colors and their light and dark counterparts for displaying up to 30 data points or categories.
Palette 1 – 10
Use neutral colours when you have fewer than ten items on a chart.
Palette 1 – 20
When you have more than ten but fewer than 20 items on a chart, combine the neutral and light colors.
Palette 1 – 30
When you have more than 20 items on a chart, combine the dark, neutral, and light colors.