Designer Tips for Choosing Dashboard Colors
Did you know the human eye can see millions of colors? That’s right, millions. But that doesn’t mean you should use them all on your dashboard!
This post is not about color theory; you can Google color theory to find exhaustive articles about that. This article is about choosing colors specifically for a dashboard. You can use color to give your dashboard a professional look and feel, tell a story, highlight key KPIs, or even trigger an emotional response from users that results in action.
Let’s do a little experiment. Look at the dashboard below and notice where your eyes go first.
I’m going to guess you looked at the bright colored boxes at the top of the screen or maybe the funnel graph first. Was I right? That’s the power of color!
Here are my tips for using colors on your dashboard:
Adhere to Brand Guidelines
– Brand Guidelines Available: If your company has brand guidelines (also known as style guides) in place try to stick to these guidelines as best you can. Brand guidelines are often available via the marketing team and will give you the exact RGB or HEX colors you can use on your dashboard.
– No Brand Guidelines Available: If there are no formal guidelines for you to follow, take your cues from their website or other marketing material. What colors are they using for titles, screen backgrounds, or action buttons? Try to keep the elements on your dashboard similar to what they’re using on the company’s website.
The Psychology of Colors
Colors send signals. When applied carelessly, colors can send the wrong messages to your users. Using an appropriate mix of saturated and unsaturated colors is key to organizing your screen and drawing the users eye to important areas.
– Using Saturated and Accent Colors: Saturated colors should be used in moderation, otherwise the colors compete with each other and can quickly overwhelm the user. Choose 1-2 saturated colors, and 1-2 accent colors, but no more colors than that. A pleasing color scheme might be to use a royal blue and orange (saturated colors), along with a lighter blue or gray (accent colors). Use saturated colors for items like titles or action buttons so users can quickly identify these important elements on the screen.
– Background Colors: Light backgrounds are flexible and give you many options for color palettes. It’s easier for users to read dark text on a light background. And putting a little white or light space between your visualizations helps them stand out to the user. Dark backgrounds are dramatic and pack a lot of punch. They can be elegant if used with very few other colors. But studies show it’s harder for people to read light text on a dark background, so proceed with a dark background with caution.
– Use Contrast: Makes sure there is a lot of contrast between your text and your dashboard’s background color so it’s easy for users to read.
– Avoid Black and White: I often avoid using pure black or pure white on my dashboards entirely. Black can be harsh even for text. White can be stark and feel unfinished. I find a dark gray (such as #191919) is an elegant substitute for black, and very pale gray (such as #F1F1F1) is a nice option over white. This way your screen looks “designed”.
A list of how common colors are often perceived in the United States.
This is the exact same dashboard shown with dark and light backgrounds. You can see how the dark background is more striking and feels urgent, while the light background feels relaxed and maybe a bit bland.
Graph Colors
It’s easy for graphs to spin out of control and become an overwhelming sea of rainbow colors. Here are some ways to keep your graphs colorful and informative without being garish.
– Expanding Your Palette: Using varying shades of a few primary colors gives you a wider palette and keeps the dashboard looking elegant.
– Data is King: When choosing colors for your visualizations, select colors from your palette that work well with your data. In graphs where two colors are touching each other (for example pie charts or stacked bars) make sure there is enough contrast between the colors so the user can see them clearly.
– Avoiding Red and Green: It’s best not to use red and green on your dashboard unless you wish to show positive or negative values. Additionally, red and green can be difficult for color blind users to see. As an alternative to red and green you may choose to use orange and teal.
Good luck, and happy designing!
By using different shades of three main colors, you can increase your color palette while maintaining a cohesive look and feel.