Data visualization guidelines

We use $color-data-visualization-primary as the main color for data visualization, which is used for showing total value or whenever only 1 color is needed in a visualization.

Semantic colors are used to indicate positive or negative performance in data. For positive color, we use a slightly darker Matchacado color for text/icon associated with data to make sure text has enough contrast.

When more than 1 color is needed, colors should be applied in the exact order in the palette to maximize contrast between adjacent colors, in order to help with visual differentiation.

Although we recommend using colors following the order in the palette, we understand there might be edge cases when we need to pair colors in a different way. The color pairings below are hard to tell apart either in lines or small points under normal vision, or in large areas under red-green or yellow-blue color blindness. Always avoid using these pairings as neighboring colors.