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

#a2d077

chart-surface-4

For data visualization only.

#68a73a

#c3e39e

chart-surface-5

For data visualization only.

#4d9221

#e6f5d0

chart-surface-6

For data visualization only.

#4d9221

chart-border

For data visualization only.

View colourblind helper in blue

scheme-g / sequential

#e0f3f8

#4575b4

chart-surface-1

For data visualization only.

#bddaea

#638ec2

chart-surface-2

For data visualization only.

#9dc0dd

#80a7cf

chart-surface-3

For data visualization only.

#80a7cf

#9dc0dd

chart-surface-4

For data visualization only.

#638ec2

#bddaea

chart-surface-5

For data visualization only.

#4575b4

#e0f3f8

chart-surface-6

For data visualization only.

#638ec2

chart-border

For data visualization only.

Diverging

You may see the use of numbered suffixes such as "start-1" and "end-4" which identifes the specific shades in a particular colour scheme.

View colourblind helper in brown & teal

See the colours in action

scheme-a / diverging

#8c510a

#f6e8c3

chart-surface-start-1

For data visualization only.

#ba8b47

#d0a969

chart-surface-start-2

For data visualization only.

#f6e8c3

#8c510a

chart-surface-start-3

For data visualization only.

#c7eae5

#01665e

chart-surface-end-4

For data visualization only.

#72b6ae

#4d9b93

chart-surface-end-5

For data visualization only.

#01665e

#c7eae5

chart-surface-end-6

For data visualization only.

#a36e29

chart-border-start

For data visualization only.

#2b8078

#4d9b93

chart-border-end

For data visualization only.

View colourblind helper in pink & green

See the colours in action

scheme-b / diverging

#c51b7d

#fde0ef

chart-surface-start-1

For data visualization only.

#de78ab

#e99cc2

chart-surface-start-2

For data visualization only.

#fde0ef

#c51b7d

chart-surface-start-3

For data visualization only.

#e6f5d0

#4d9221

chart-surface-end-4

For data visualization only.

#a2d077

#84bb56

chart-surface-end-5

For data visualization only.

#4d9221

#e6f5d0

chart-surface-end-6

For data visualization only.

#d25294

chart-border-start

For data visualization only.

#4d9221

chart-border-end

For data visualization only.

scheme-c / diverging

#d73027

#fee090

chart-surface-start-1

For data visualization only.

#f17c4d

#f99e63

chart-surface-start-2

For data visualization only.

#fee090

#d73027

chart-surface-start-3

For data visualization only.

#e0f3f8

#4575b4

chart-surface-end-4

For data visualization only.

#9dc0dd

#80a7cf

chart-surface-end-5

For data visualization only.

#4575b4

#e0f3f8

chart-surface-end-6

For data visualization only.

#d73027

#e5593a

chart-border-start

For data visualization only.

#638ec2

chart-border-end

For data visualization only.

View colourblind helper in orange & blue

See the colours in action

View colourblind helper in purple & green

See the colours in action

scheme-d / diverging

#762a83

#e7d4e8

chart-surface-start-1

For data visualization only.

#a06fae

#b791c2

chart-surface-start-2

For data visualization only.

#e7d4e8

#762a83

chart-surface-start-3

For data visualization only.

#e6f5d0

#4d9221

chart-surface-end-4

For data visualization only.

#a2d077

#84bb56

chart-surface-end-5

For data visualization only.

#4d9221

#e6f5d0

chart-surface-end-6

For data visualization only.

#a06fae

chart-border-start

For data visualization only.

#4d9221

chart-border-end

For data visualization only.

Categorical

scheme-a / categorical

#8c510a

#f6e8c3

chart

For data visualization only. Follow the numbered sequence.

scheme-b / categorical

#d73027

#fee090

chart

For data visualization only. Follow the numbered sequence.

scheme-c / categorical

#a06fae

#b791c2

chart

For data visualization only. Follow the numbered sequence.

scheme-d / categorical

#2b8078

#9ad0ca

chart

For data visualization only. Follow the numbered sequence.

VUD Product Design System

VUD Product Design System is a collection of design assets, tokens, guidelines, code snippets and components that guarantees consistency and efficiency in the design and development process across enterprise software solutions.

Data visualisations

Chart UI

Sequential

Diverging

Categorical

VUD Product Design System

Resources

Support