Data visualization colour palette

A categorical colour palette is used for non-numerical data that has distinct categories with no specific order (nomial data). Use this palette for data that does not need to be associated with a specific colour.

Summit's colour palette for categorical data consists of colours for up to 8 categories

Colour palettes for different types of data

Nominal data

  • Non-numerical data has distinct categories, no specific order
  • ❌ Do not use a sequential or diverging colour palette
  • ✅ Use the categorical colour palette on this page for this type of data.

Ordinal data

  • Non-numerical data has distinct categories, has a specific order
  • ❌ Do not use a categorical colour palette
  • ✅ Use the sequential or diverging colour palette for this type of data.

Interval data

  • Numerical data has distinct categories, has a specific order, has equal spacing between values.
  • ❌ Do not use a categorical colour palette
  • ✅ Use the sequential or diverging colour palette for this type of data.

Ratio data

  • Numerical data with distinct categories, has a specific order, has equal spacing between values, has a true zero.
  • ❌ Do not use a categorical colour palette
  • ✅ Use the diverging or sequential colour palette for this type of data.

Guidance for content authors

  • Chart components on AEM are already set up to use this colour palette when you insert it on a page.
  • For inforgraphics that are created on third-party tools such as infogram or PowerBI, use colours in the sequence defined from 1 up to 8 categories.
  • Hex values for light and dark backgrounds are available for your context.
  • Considerations for inforgraphics made on inforgram are found here. (link coming soon)
  • Colour alone doesn't make visualizations accessibly for the public.
  • Combine this palette with other elements like a background-coloured border and distinct shapes or patterns to make an accessible visualization.

Guidance for designers and developers

  • Colours are available in code and on Figma.
  • Use design tokens in the sequence defined from 1 up to 8 categories.
  • You can switch between light and dark values using relevant controls in your platform. 
  • Prioritize using design tokens over hex values when they are available. 
  • Colour alone doesn't make visualizations accessible to the public.
  • Combine this palette with other elements like a background-coloured border and distinct shapes or patterns to make an accessible visualization. 

Usage

Do

Use this colour palette for data that has up to 8 categories. Please contact the UX team for guidance on data with more than 8 categories.

Don't

Use this palette for other data types. General guidance on using colour for other types of data can be found above.

Do

Group data and their categories as much as possible. This makes it simpler for your message to be communicated to users.

Don't

Use colour to separate axis labels (if present) into categories.

Do

Use these colours with other accessibilty guidelines for data visualizations. Combine this palette with other elements like a background-coloured border and distinct shapes or aptterns to make an accessible visualization.

Don't

Make data visualizations with colour as the only element that used can distinguish data points with. 

Categorical data visualizations

Use categorical chart colours when you need to differentiate two or more unrelated data categories from each other.

Description

Light value

Dark value


Category 1

Design token: colour-chart-category-1

Use in the strict sequence only.

HEX: #0095CC

HEX: #0095CC

Design token: colour-chart-category-1-hover

Hover state. Use in the strict sequence only.

HEX: #0075A1

HEX: #69C9ED

Design token: colour-chart-category-1-pressed

Pressed state. Use in the strict sequence only.

HEX: #006C94

HEX: #8ED6F1


Category 2

Design token: colour-chart-category-2

Use in the strict sequence only.

HEX: #815487

HEX: #A280A5

Design token: colour-chart-category-2-hover

Hover state. Use in the strict sequence only.

HEX: #6E3B75

HEX: #CBB7CD

Design token: colour-chart-category-2-pressed

Pressed state. Use in the strict sequence only.

HEX: #49254F

HEX: #D7C7D8


Category 3

Design token: colour-chart-category-3

Use in the strict sequence only.

HEX: #DA6D03

HEX: #DA6D03

Design token: colour-chart-category-3-hover

Hover state. Use in the strict sequence only.

HEX: #AB570D

HEX: #FBAB73

Design token: colour-chart-category-3-pressed

Pressed state. Use in the strict sequence only.

HEX: #9C500E

HEX: #FFBE93


Category 4

Design token: colour-chart-category-4

Use in the strict sequence only.

HEX: #B43165

HEX: #CD6D8B

Design token: colour-chart-category-4-hover

Hover state. Use in the strict sequence only.

HEX: #96174F

HEX: #E7AEBD

Design token: colour-chart-category-4-pressed

Pressed state. Use in the strict sequence only.

HEX: #5E1833

HEX: #EDC1CC


Category 5

Design token: colour-chart-category-5

Use in the strict sequence only.

HEX: #04A047

HEX: #04A047

Design token: colour-chart-category-5-hover

Hover state. Use in the strict sequence only.

HEX: #037F38

HEX: #68D195

Design token: colour-chart-category-5-pressed

Pressed state. Use in the strict sequence only.

HEX: #037433

HEX: #8DDDAF


Category 6

Design token: colour-chart-category-6

Use in the strict sequence only.

HEX: #136C8C

HEX: #4394B7

Design token: colour-chart-category-6-hover

Hover state. Use in the strict sequence only.

HEX: #19556C

HEX: #9EC2D7

Design token: colour-chart-category-6-pressed

Pressed state. Use in the strict sequence only.

HEX: #183645

HEX: #B4D0E0


Category 7

Design token: colour-chart-category-7

Use in the strict sequence only.

HEX: #B9801D

HEX: #B9801D

Design token: colour-chart-category-7-hover

Hover state. Use in the strict sequence only.

HEX: #93641C

HEX: #F9AF18

Design token: colour-chart-category-7-pressed

Pressed state. Use in the strict sequence only.

HEX: #885B1C

HEX: #FFBE12


Category 8

Design token: colour-chart-category-8

Use in the strict sequence only.

HEX: #C8102E

HEX: #E06460

Design token: colour-chart-category-8-hover

Hover state. Use in the strict sequence only.

HEX: #9A1825

HEX: #F5AAA3

Design token: colour-chart-category-8-pressed

Pressed state. Use in the strict sequence only.

HEX: #61181A

HEX: #F9BEB8