Using colors in a dashboard can be very simple and fun once you know the composition of colors and how they work together. This article will provide you with a simple yet effective guideline to communicate better with colors.
HSL Color Model
While there are different ways to describe color digitally, HSL color model works best for our purpose. This model was designed in the 1920s to align color display on computer more closely with human visual perception. In this model, a color is broken down into 3 elements:
Hue
This is the primary element perceived by us and called by a name such as red, green, blue or purple. Hue is responsible for our emotional response to the colors, for example: red can represent energy and passion, yellow can trigger uplifting and cheerful feeling, blue gives us a peaceful and calming sense. Hue selection, therefore, can be influenced by personal preference.
Saturation
This property will affect the brightness, intensity or vibrancy of the hue. In color science, this term can be understood as the concentration or power per unit area of light. By influencing our visual sensation, high saturation value can draw our attention.
Lightness
Unlike saturation, which is an absolute value, lightness is measured relatively to some white point. We can understand lightness as how much white light is shown on the object. Lightness can be used in combination with Saturation to create contrast.
To explore more about this color model, go to www.hslpicker.com. In addition to Hue, Saturation and Brightness, the website has a slider for Transparency. Let’s keep it at 100% and focus on other properties.
Summary:
Hue is the main shade of color. (This is red)
Saturation describes how intense that color is. High saturation makes a shade bolder and stimulates our visual perception more intensively. (This is VERY red!)
Lightness tell us how much white light is shown upon this color or how well we can see the color. At maximum lightness, we see only white, at minimum lightness we see only darkness – black. (This is red in the dark)
Communicating with Colors
In business communication, we use colors to guide user’s attention and help them access information or perform a task as efficiently as possible. While colors can add flavors to the design and better engage users, we should not overuse colors to trigger emotional responses, which can interfere with their analytical process. Here are the different roles that color can play in your dashboard, and for each role you can assign one or two colors with similar qualities:
Negative Space
This is the background colors of your dashboard, panel or chart. Choosing a background color is important because it is a foundation that can bring out other colors. For negative space, we need to choose colors that have very low saturation because it should not get any attention at all (white, black, light gray, etc.). You can play around with lightness here.
Dominant Color
This will be your main color, which gives user the first impression of the color theme. This color can be used in a lot of elements to create contrast or in charts. Because of its prominent appearance in the dashboard, it should have a medium saturation so that users’ visual sensation is not overloaded.
Accent Color
This is the highlight of your reports or dashboard that you want users’ immediate attention on (Such as call-to-action buttons, warning message or alerts). Accent colors can have high saturation and should be used sparingly. You should only use accent colors for smaller elements such as text and icons, but not an entire area.
Semantic Colors
These colors have an actual meaning that users can quickly understand. The most popular semantic colors are used for alerts: red – bad, orange – average, green – good. These can also be colors that users can quickly associate with business rules. For example, different companies can be represented on charts by their corporate colors, with which user can quickly identify the value at a glance. Semantic colors are usually used for conditional formatting on both text or charts. When using semantic colors, try not to use any other hues as well as communicate colors’ meaning clearly. Depending on how much space colors occupy, adjust the saturation and lightness accordingly to create an appropriate level of intensity.
Combining Colors
After choosing a negative space, dominant and accent colors, you will probably need to create a color palette for visualizations that have multiple member values, such as a pie chart. Our goal is to help users distinguish different values and maintain a pleasant feeling for the eyes. For demonstration, I use www.coolors.co, an excellent website to automatically generate color palette or to create your own.
The simplest way to do this is to create a monochromatic color scheme by taking your dominant color and adjust different saturation and lightness (which is the same as brightness on this website). As you can see the example below, all colors have the same Hue and Saturation values are the same. Only Lightness/brightness is shifted to the right.
While these colors will work together, the orders of colors create a false shadow effect and is not ideal. Therefore, we can just rearrange them. You can see that the boundaries between two colors are sharper now.
Using different levels of lightness will make sure that each color can be easily perceived as a distinct element. Even when you print this palette on grayscale, the clear contrast remains.
You might not be 100% happy with the combination above because the 4th color has too high saturation and is drawing too much attention. That’s a correct observation! Now let’s see what happens if we keep the Hue and play around with Saturation, Brightness and color order.
Now our palette looks more interesting because the contrast is more diverse (both saturation and brightness). You can also create more than 5 colors with this technique.
If you want to be more adventurous and mix different Hues together, use the same technique by diversifying Saturation and Brightness. First, see how these colors are clashing with each other if I give them the same Saturation and Brightness, different Hues?
Same Saturation, different Brightness
If you want to create a little more vibrancy, adjust Saturation as well. Because we already use different Hues, which are different levels of perceived energy, the difference in Saturation does not need to be big.
For this scheme, use Saturation below 70 to make sure your dashboard does not look too colorful! To explore which hues work well together, read more about different color schemes.
Got questions? Click here to get in touch.
