Applying chart colours and textures

Using colours and textures effectively is key to communicating the chart content.

Colour palette

Our charts offer 50 distinct colours and two colors for maximum contrast (30) and background (51), 10 of which are highly accessible.

  • The colour contrast allows visually-impaired users to easily differentiate between them.
  • Greys are reserved for:
    • neutral values
    • identifying the target range in line charts

Credits: Name that Color JavaScript library by Chirag Mehta.

Use of gradients

Some applications require gradient colors. Using same color with changing opacity is preferred to using hex color.


  • Dashed lines are reserved for projections in line charts.
  • Diagonal pattern in bar and column charts are reserved for projections.
  • Optionally, projection area can be highlighted by guide band.
Change theme
Change theme