Color has symbolic meanings in various cultures. It has the power to communicate information. A couple of colors in the VTS design system palette hold commonly agreed-on semantic values in the western world: red and green. Hence, they need to be used in a way that associate with the semantic meanings.
Red
In western culture, red is commonly associated with warning, alert, and failure; In finance, it is commonly associated with a decrease in value.
$color-dataviz-critical-1
red-600
$color-dataviz-critical-2
red-400
$color-dataviz-critical-3
red-300
$color-dataviz-critical-4
red-200
Green
In westerm culture, green is commonly associated with success; In finance, it is commonly associated with an increase in value.
When the information in a chart are equally important, colors are used as identification. Please refer to the below colors based on the color variaty needed.
Avoid too many colors as it’ll make it difficult and distracting to read.
$color-dataviz-categorical-1
indigo-600
$color-dataviz-categorical-2
aqua-400
$color-dataviz-categorical-3
pink-400
$color-dataviz-categorical-4
blue-400
$color-dataviz-categorical-5
yellow-500
$color-dataviz-categorical-6
gray-400
Only use below colors for edge cases
$color-dataviz-categorical-7
indigo-800
$color-dataviz-categorical-8
aqua-600
$color-dataviz-categorical-9
pink-700
$color-dataviz-categorical-10
blue-600
$color-dataviz-categorical-11
yellow-600
$color-dataviz-categorical-12
gray-800
$color-dataviz-categorical-13
indigo-300
$color-dataviz-categorical-14
aqua-300
$color-dataviz-categorical-15
pink-300
$color-dataviz-categorical-16
blue-300
$color-dataviz-categorical-17
yellow-400
$color-dataviz-categorical-18
gray-300
Don't
Don’t use different colors unless for differentiating data sets close together.
Do
Only add color varity to data charts close together with different data sets.
Don't
Don’t use different colors unless for differentiating data sets close together.
Do
Use the least amount of color.
Do
Only add a color varity to data charts close together with different data sets.
When the information has a hierachy to it, like a process funnel, timeline, progressing. Use light color for lighter values, deeper color for higher values.
$color-dataviz-sequential-1
indigo-950
$color-dataviz-sequential-2
indigo-900
$color-dataviz-sequential-3
indigo-800
$color-dataviz-sequential-4
indigo-700
$color-dataviz-sequential-5
indigo-600
$color-dataviz-sequential-6
indigo-500
$color-dataviz-sequential-7
indigo-400
$color-dataviz-sequential-8
indigo-300
$color-dataviz-sequential-9
indigo-200
Don't
Don’t use sequencial colors to cross identify different data sets with no connections.
Do
Use sequencial colors for data with a sequence order.