Data visualisations

VUD data visualisations are thoughtfully designed to help your users easily identify patterns and variations in data, enabling them to make informed decisions.

Chart UI

#252626

#c3d0d9

chart-text-default

Default text for labels. Use on chart colors if needed.

#494a4a

#c3d0d9

chart-text-secondary

Secondary text for legends.

#ffffff

#000000

chart-text-inverse

Inverse text on chart colors. Use only if needed.

#8a8a8a

#9aa5ae

chart-border

Gridlines

#116fae

chart-brand

Primary color on charts. Use when only one color is required.

#dadada

#6f7a82

chart-neutral

Secondary color on charts. Use for the less important data points.

#ffffff

#2b3033

chart

Surface and border on chart UI.

Sequential

View colourblind helper in brown

scheme-a / sequential

#f6e8c3

#8c510a

chart-surface-1

For data visualization only.

#e5c891

#a36e29

chart-surface-2

For data visualization only.

#d0a969

#ba8b47

chart-surface-3

For data visualization only.

#ba8b47

#d0a969

chart-surface-4

For data visualization only.

#a36e29

#e5c891

chart-surface-5

For data visualization only.

#8c510a

#f6e8c3

chart-surface-6

For data visualization only.

#a36e29

chart-border

For data visualization only.

View colourblind helper in orange

scheme-b / sequential

#fee090

#d73027

chart-surface-1

For data visualization only.

#febf79

#e5593a

chart-surface-2

For data visualization only.

#f99e63

#f17c4d

chart-surface-3

For data visualization only.

#f17c4d

#f99e63

chart-surface-4

For data visualization only.

#e5593a

#febf79

chart-surface-5

For data visualization only.

#d73027

#fee090

chart-surface-6

For data visualization only.

#d73027

#e5593a

chart-border

For data visualization only.

View colourblind helper in pink

scheme-c / sequential

#fde0ef

#c51b7d

chart-surface-1

For data visualization only.

#f3bed9

#d25294

chart-surface-2

For data visualization only.

#e99cc2

#de78ab

chart-surface-3

For data visualization only.

#de78ab

#e99cc2

chart-surface-4

For data visualization only.

#d25294

#f3bed9

chart-surface-5

For data visualization only.

#c51b7d

#fde0ef

chart-surface-6

For data visualization only.

#d25294

chart-border

For data visualization only.

View colourblind helper in purple

scheme-d / sequential

#e7d4e8

#762a83

chart-surface-1

For data visualization only.

#ceb2d6

#8b4e99

chart-surface-2

For data visualization only.

#b791c2

#a06fae

chart-surface-3

For data visualization only.

#a06fae

#b791c2

chart-surface-4

For data visualization only.

#8b4e99

#ceb2d6

chart-surface-5

For data visualization only.

#762a83

#e7d4e8

chart-surface-6

For data visualization only.

#a06fae

chart-border

For data visualization only.

View colourblind helper in teal

scheme-e / sequential

#c7eae5

#01665e

chart-surface-1

For data visualization only.

#9ad0ca

#2b8078

chart-surface-2

For data visualization only.

#72b6ae

#4d9b93

chart-surface-3

For data visualization only.

#4d9b93

#72b6ae

chart-surface-4

For data visualization only.

#2b8078

#9ad0ca

chart-surface-5

For data visualization only.

#01665e

#c7eae5

chart-surface-6

For data visualization only.

#2b8078

#4d9b93

chart-border

For data visualization only.

View colourblind helper in green

scheme-f / sequential

#e6f5d0

#4d9221

chart-surface-1

For data visualization only.

#c3e39e

#68a73a

chart-surface-2

For data visualization only.

#a2d077

#84bb56

chart-surface-3

For data visualization only.

#84bb56