Chart colors

Ds-kit contains a set of seven colors that can be used in visualisations, including line charts, maps, scatter plots, area charts, bar charts among others.

To determine how you should use color when creating visualisation, it's useful to consider two main categories:

1. Distinctive colors to represent categorical data.
2. Color gradients to represent continuous data

Distinctive colors

Distinctive colors should be used when color represents different categories in the dataset, such as male and female. As a general rule, try to use a maximum of 7 colors in a chart.

From the Datastory color palette, the colors most suited for visualisations are those in the 300 and 600 ranges.

300 color range

["yellow.300", "green.300", "cyan.300", "orange.300", "purple.300"]

["#ffc830", "#57d298", "#2bbaff", "#ff713f", "#972bf1"]

600 color range

["cyan.600", "orange.600", "green.600", "purple.600", "yellow.600"]

["#0073aa", "#bb3000", "#238657", "#57009f", "#af8000"]

Preference should be given to the 5 colors in the 300 range listed above. Colors from the 300 and 600 ranges can be mixed in cases when more than 5 colors are needed or if suited better to a specific chart.

Examples

["yellow.300", "green.300", "cyan.300", "orange.300", "cyan.600"]

["#ffc830", "#57d298", "#2bbaff", "#ff713f", "#0073aa"]

Color gradients

Color gradients should be used when showing data that progresses from low to hight or vice versa such as GDP per capita on a map. In this case, the color intensity, or shade is used to indicate a higher or lower value.

One color gradient

The colors in ds-kit are built in a way that allows to easily create gradients in any of the seven colors.

This map is using the Cyan color palette and goes from cyan.25 for the lightest shade to cyan.900 for the darkest shade. The same can be done for any of the other color palettes.

If you are using a tool like chroma.js to generate a full gradient, you need to pass three colors (color.25, color.500, color.900).

import { colors } from "@ds-kit/theme"

chroma.scale([
  colors["cyan.25"],   // light limit
  colors["cyan.500"],  // mid color
  colors["cyan.900"],  // dark limit
])

If you skip the middle value (color.500) you will get a dull gradient, as the lightest and darkest shades are quite desaturated.

Two-hue gradients

In some cases it might be more effective to go from a light color hue to another color's dark hue. This kind of gradient makes use of two variables: lightness and hue rather than just lightness. This can make it easier to decipher gradient maps.

This map uses light greens and dark blues to create a two-color gradient. The same approach can be used with two other colors such as light yellow to dark orange.

import { colors } from "@ds-kit/theme"

chroma.scale([
  colors["green.25"],  // lightest green
  colors["green.400"], // mid green
  colors["cyan.700"],  // dark cyan
  colors["cyan.900"],  // very dark cyan
])