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.
