A brief start about color
We consume red strawberries and wait for the white ones to mature. A bar chart containing a red bar might indicate an alert while white bars mean regular activity. Colors give meaning to our context. Colors help us take better decisions. They have both psychological and physiological impacts on us. In the end, how well do we use them?
In this article, we will have a glimpse of what Color Design, Color Theory is, see a few tips for choosing a color scheme, and apply colors to a Widget.
A rollback in (pre)-history
Our conscience already developed awareness about colors. According to " The Secret Lives of Color" [1] Minerals have been used as colorants since prehistoric times. Ancient civilizations left their mark even today with the colors they created such as the well-known Egyptian blue. Since then, colors are chosen and used in almost every area of human activity from religion, to arts and science.
The way colors are used in these areas shows us that some colors seem to " fit " better with other ones depending on various factors.
Let us explore the design of colors and the theory.
Color Design: Essentials
Design from Latin designare " mark, out, point out" means to make shape.
In order to give a visual message, we have to design our visual. Color is one of the elements of design among shape, size, texture, and value. The article " The Art of Color and Design" cites that [2] All designs are built with these elements.
Speaking of color, let's discuss Color Theory.
Color Theory
In visual arts
Harmony, contrast, schemes, complementary, warm, cool, achromatic, monochromatic, tints, and shades. All these words are used to define the way colors are designed together. Color Theory in visual arts is a whole field of study that we can discuss in an upcoming article.
Just to get an overview of what Color Harmony can be, let's compare the two figures below.
In figure 3, we have shades of purple. A shade is a darker or a lighter version of a " Color ". As we look at the shades, our eyes seem to " accept " them.
This time, we have a custom color palette prepared randomly. You can notice that this palette does not have harmony. Indeed, the colors don't seem to fit together as we look at them.
In physiology
We perceive colors through a complex visual system involving our eyes and our neurons. To summarize, our eyes contain photoreceptors stimulated by light. Then our eyes transmit information to our brain in order to visualize an image. All this process consumes energy and can cause eye fatigue depending on the wavelength we receive. That's why choosing the right colors in visual arts is important for our audience.
In psychology
According to "Selecting Semantically-Resonant Colors for Data Visualization" [4] Colors are also charged with rich associations. Theories are proposed to understand the relation between colors and our emotions, cultures, and personalities. One of the well-known research is Goethe's " Color Theory" book. In this book, he associates colors with emotions based on intuition and social observation. One of the classic associations we might know is red associated with love, romance, or green associated with a successful process in engineering.
Speaking of color associations, we shall now see a quick few tips to associate colors to widgets in Dashboards.
Applying Colors to Widgets
Everything that deserves space on a dashboard is important, but not equally so the viewer's eyes should always be directed to the most crucial information first. - Stephan Few
Notions
First things first, let's set the notions!
A Hue is a color visualized using primary colors belonging to the Color Wheel without any tint or shade. It is basically any selected color on the circle without any dark or white color blended into it.
The color wheel is a circle that illustrates the organization of color hues.
A Tint is a hue lightened with white color.
A Shade is a hue darkened with black color.
A Color scheme is a set of colors we choose when we wish to design something.
Tip: We can find carious scheme designers on internet such as:
Complementary colors are colors on opposing sides of the color wheel.
Monochromatic colors: are representations of a chosen color varying the tint and the shade of it.
Let's get into action!
In this part, we will share few tips for applying colors to a Widget.
Know your audience
Colors influence the mood of a person and the mood of a person influences how he reacts to colors. But we can't only base ourselves to only that factor.
Culture influences our choices too. For example, in a widget containing a Sankey diagram, the flow of water used to supply a machine should be represented in blue as we generally associate this color in most cultures. It is important to choose colors accordingly to the culture of your environment. For instance, red in the USA represents power and courage whereas it symbolizes luck happiness, and joy.
The environment in which our audience rallies is also crucial. For instance, we should choose the best moment, the best screen, and luminosity when presenting a dashboard in a meeting room.
Lastly, we must go further and consider the possibility of receiving an audience with visual disabilities. In " Storytelling with Data: A Data Visualization Guide for Business Professionals " Knaflic indicates that [5] Roughly 8% of men [...] and half a percent of women are color-blinded. How could we replace green if a top manager perceives it as black in our dashboard?
One common rule for color-blinded people is that we should avoid using red and green on the same widget:
Here are a few sites demonstrating how a color-blinded person views a color we have chosen.
Choosing a color scheme for our data: How?
After defining our audience, we need to choose our color scheme based on our data and our widget. As stated in "Practical Rules for Using Color in Charts" [6] There are mainly three types of schemes we use for data-driven representations.
Each type has its own exceptions and can't be applied to every widget, but we generally use them in the following situations:
Categorical schemes: separate items into different groups when we have qualitative data. We use unordered colors for this type.
Sequential schemes: are used to represent ordinal and interval scales when we have quantitative data. We use ordered colors for this type.
Diverging schemes: highlight values below and above a meaningful mid-value when we have quantitative data. We use ordered colors for this type.
A few tips
Now, we shall see a few handy tips when designing our widget for our dashboards.
Rule of 7
Avoid using more than 7 colors on the same widget. If you do so, try to regroup categories or display your data on a new widget.
Use complementary colors
Contrast should be used when we wish to oppose values, show a strong difference. We can create contrast by choosing complementary colors. Our example below is a pie chart demonstrating humidity level of different buildings.
Use monochromatic colors
Monochromatic colors can be used to demonstrate a hierarchy, categorize values or give scales of importance. These types of colors have different levels of white tinting and black shading. Figure 6 below visualizes the energy consumption of buildings in a factory site. The darkest shade of blue represents the building with the highest energy consumption.
We should avoid using too many shades as it reduces visibility of the message we want to communicate. This applies to cases when we use only one hue or when our shades are not ordered.
Use grey
Using gray together with another color immediately highlights the colored values. We can notice how fast our eyes are attracted to the shades of yellow helping us to identify countries concerned by our message.
We can observe that this example uses a sequential color scheme of a single hue: yellow.
Apply dark mode
Dark mode is a color scheme that applies light-colored components on a dark background. It has various advantages when used such as reducing energy consumption of a device, reducing eye fatigue, and blue light. We can observe in our examples below the quality of our visualization using a dark mode compared to a standard theme.
Let's apply colors!
In this section, we will apply colors to a widget and explain our choices
First of all, let's define our context. We have a widget containing horizontal bars with sparklines. Each bar represents different steps of a beer production line. The bars indicate the optimal area in which the number of beers can belong in a process. The sparkling represents the real number of products variation.
In figure 8, all our sparklines and bars have respectively the same colors. The choice made here doesn't cause eye fatigue but it's confusing to represent all the categories with the same color in our case!
In this example, we decided to apply monochromatic colors to our widget. Once again, it is a good choice to prevent eye fatigue but it still does not make sense with our context. Indeed, our components neither have hierarchical significance nor categorical.
This time, we tried to separate all steps using different colors. This makes sense because our steps don't seem to have a correlation between them and each steps' sparkling evolves independently. Yet some of the colors cause eye fatigue when stared for a long time. For instance, the yellow used for bottling needs a change! Besides expressive colors like yellow should be used only if we wish to highlight a value in a widget.
Lastly, in this illustration, we improved the color choice made in Figure 11. All steps have different colors without causing eye fatigue. When we observe the final widget, we automatically evaluate each sparkline according to each different step.
In this example, we decided to use categorical colors because we consider that each process should be evaluated differently with one purpose: To identify when does our product quantity ( spark line ) exceeds in production.
Speaking of when we notice that this widget might have been better if we added time as context to give better meaning to our message.
Consistency
Before concluding, it is important to note that we chose our colors according to only one widget! We need to be even more choosy when we have an entire dashboard! Thankfully knowing our context helps us choose the right colors.
Let's summarise how to choose a color
Know your audience
To which culture do they belong?
What type of employee are they?
Top management
Technical
General
Choose the right color accordingly to your data and context
Sequential scheme
Diverging scheme
Qualitative scheme
Verify the overall of your widget
Test colors for color-blinded people
Review your widget if you have more than 7 colors or more than 5 shades in it.
Verify if your message is clear
Coming to an end
We can conclude by saying colors should be chosen based on our audience, context and without causing eye fatigue, and using some well-known techniques. As for what is a color, we have a whole field of study that awaits us.
References
[1] Brill, Michael H. “KassiaSt. Clair, the Secret Lives of Color, Penguin, New York, 2016. ISBN 9780143131144; 320 Pp., Hardback $20.00.” Color Research & Application, vol. 45, no. 3, June 2020, pp. 567–568, 10.1002/col.22496. Accessed 17 June 2021.
[2] Graves, Maitland E. The Art of Color and Design. New York, Mcgraw-Hill, 1941.
[3] Ural, Sibel Ertez, and Semiha Yilmazer. “The Architectural Colour Design Process: An Evaluation of Sequential Media via Semantic Ratings.” Color Research & Application, vol. 35, no. 5, 22 Jan. 2010, pp. 343–351, 10.1002/col.20583. Accessed 5 Apr. 2020
[4] Lin, S., Fortuna, J., Kulkarni, C., Stone, M. and Heer, J. (2013). Selecting Semantically-Resonant Colors for Data Visualization. Computer Graphics Forum, [online] 32(3pt4), pp.401–410. Available at: https://onlinelibrary.wiley.com/doi/full/10.1111/cgf.12127 [Accessed 18 Aug. 2019].
[5] "Allen, Danielle B. “Cole Nussbaumer Knaflic. Storytelling with Data: A Data Visualization Guide for Business Professionals. Hoboken, NJ: Wiley, 2015, 288 Pages, $39.95 Paperback.” Personnel Psychology, vol. 72, no. 2, 19 Apr. 2019, pp. 331–333, 10.1111/peps.12333. Accessed 21 June 2021."
[6] Stephen Few. " Practical Rules for Using Color in Charts ", Perceptual Edge Visual Business Intelligence Newsletter, February 2008.