Color Design: Red for bad, green for good?


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





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.


hello
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 opposing sides of the color wheel.



Figure 7. An example of complementary color scheme