How to apply data visualization colors on a dashboard with many chart types?

Question

I'm working on a dashboard for a SaaS application. I'm having a hard time selecting the right colors for each of the graphs despite all of the data visualization color resources I've gone through. Here are the steps I've done:

1.) I took the brand color (blue #3454E2) and corresponding accent colors from our company style guide.

2.) I used Eva Design System to generate shades 100-900 for each of these colors.

3.) I then took shades 500-900 from each of these colors and used the chevron-skipping pattern (as described in this Medium article)

which generated the below color palette

However, I'm having a hard time determining which colors to use on each chart. As you can see in my dashboard mockup, I have two combo bar/line charts at the top, followed by two stacked bar charts, a line graph, and another stacked bar chart. I tried applying the colors to the graphs in order, but I'm concerned there's too many colors on the dashboard.

In my next iteration, I tried applying a monochromatic color palette to the top combo bar/line charts instead since the metrics can be distinguished by shape (the bar vs the line) and reserved the categorical color palette for the stacked bar graphs instead. For the line graph, I'm using the primary brand color since it is the only metric.

Any suggestions to make this better?

Answer 1

Beyond studies, formulas and selection patterns, to work with color it is extremely important to know the design bases; great help in choosing a functional color palette.

The three color variables are:

• Hue: the color itself
• Brightness: from color to white or black
• Saturation: from the color to its gray value

Taking the chosen palette as an example and organizing each color with respect to the HUE variable, we obtain four divisions (blue is perceptually the same ink), causing possible combinations depending on the color with the highest number, blue. This will always give a "mismatched" result: 4 inks in subgroups of 4, 1, 1, 2.

If we start from the tonal or gray value that corresponds to each color, there are also four groups and equally irregular in terms of number: 4 inks in subgroups of 2, 3, 2, 1.

I would try to reduce the number of combinations of variables to use and consequently unify criteria. For example, 4 inks in two tonal values ​​that generate 4 x 2 subgroups:

From there, choose possible combinations that offer better contrast, either by hue or by brightness/saturation:

This would result in a more harmonious and homogeneous combination on a global level: