Choosing colors: Red for bad, green for good?
Tags: UI, Dashboard Design, Charts, Color Theory, Data Visualization

Figure 1. Abstract illustration using shade colors

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

Figure 2. Red pigment

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 need 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.

Figure 3. Color shades of hex code # 7B59D9

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.

Figure 4. A custom color palette of hex code # 7B59D9

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.

Figure 5. Color Wheel representing 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.

Figure 6. Custom made color scheme.

Tip: We can find carious scheme designers on internet such as:

Complementary colors: are colors on opposite sides of the color wheel.

Figure 7. An example of complementary color scheme

Monochromatic colors: are representations of a chosen color varying the tint and the shade of it.

Figure 8. An example of monochromatic color scheme

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 in China.

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: