• Skip to main content
  • Skip to primary sidebar

This view of service management...

On the origin and the descent of managing services. We put meat on the bones.

  • Kanban Software
  • Services
    • Kanban Software Solutions
    • Consulting & Coaching
    • Training and Seminars
  • Posts
  • Events
    • Events – Agenda View
    • Events – Calendar View
  • Publications
    • Our Publications
    • Notable Publications
    • Quotes
  • About us

Information Visualization and Color

29 November 2019 by Robert Falkowitz Leave a Comment

In the early days of digital computing and personal com­put­ing, our tools were largely monotone: screens with green or orange cha­rac­ters against a black field and dot-matrix printers whose ribbons had but a single color. As color screens and printers became common, so did the color capabilities of the soft­ware applications we use. I think it is fair to say that the color capabilities of many users of those applications lagged. And nowhere is the unfortunate use of color more flagrant than in information visu­a­li­za­tions. The irony of the situ­a­tion is that color is much less important than other factors, such as position or angle, in visualizations.

In this article, I will provide some recom­men­da­tions for the use of color and the use of the tools by which we select colors.

Choosing individual colors

You have decided to use color, for example, to distinguish different categories of data. The typical human eye can distinguish up to 7 million different colors. So which colors should you choose?

There are issues concerning the choices of individual colors and issues concerning the com­bi­na­tions of colors. I will address the former in this section and the latter in the following section.

Many colors have sig­ni­fi­cations beyond the control of the visualization creator. So be aware of the particularities of your audience when choosing colors.

Perception of color luminosity

color combinations - blue text outlined

The eye perceives colors with three different types of cones, but the cones do not perceive those colors with the same luminosity. Each color has a green, a blue and a red component. But the lu­mi­no­sity of the color depends 59% on the green component, 31% on the red component and only 10% on the blue component. Beware, for example, of including blue text in your visualization, which might make it difficult to read. Adding a bit of red to the color of the text is said to make its edges sig­ni­fi­cant­ly more visible and thus more readable. I find outlining or shadowing the text to be more effective.

The lens in the eye refracts different colors dif­fe­rent­ly (see my article on the biology of visu­ali­za­tion). As a result, the focal points of different colors might be far enough apart that it is difficult to focus on those colors at the same time. As information visu­ali­za­tions are gene­ral­ly in a single plane, putting short wavelength colors next to long wavelength colors can make the visu­ali­za­tion dif­fi­cult to see with good acuity.

Cultural sig­ni­fi­cance of colors

Colors can have widely varying cultural sig­ni­fi­cance and lin­gu­is­tic connotations. If you depend on any of these significations to transmit your messages in information visu­ali­za­tions, be sure that your intended audience shares those connotations. For example, white might signify peace in some cultures, but death or mourning in others. Green might call to mind plants and nature, but in some countries, green is also associated with sex­u­ality or in­fi­delity. Yellow has sig­ni­fi­cations ranging from hap­pi­ness to sex­u­ality to courage and then to death, depending on the country in which it is used.
cultural connotations of color
Fig. 1: Colors do not always have the same cultural connotations.

The table in Fig. 1 gives some examples of color con­no­ta­tions by region. These are vast over-generalizations and should not be taken as “facts”. The triggering of a given connotation depends large­ly on the context of the color’s use and the cul­tural back­ground of the viewer. The important message is that you should not take for granted the signification of any color and be aware that for some viewers, it might have unexpected sig­ni­fi­ca­tions.

Emotional significance of colors

In addition to the cultural significations of color, they also have emotional sig­ni­fi­cation. There is no single list of emotions that can be related to individual colors, given the complexity of visu­ali­za­tions and the contexts in which they are viewed. That being said, you should nonetheless keep in mind that your choice of colors is very likely to trigger emotions.

Note, too, that some people have strong feelings about certain colors. These feelings might seem irrational to you, but they are nevertheless real and can get in the way of communicating your messages.

Use A/B testing to try different colors and to confirm which ones appear to achieve the best results.

color emotions
Fig. 2: In certain tests, colors have been correlated with triggering different emotions in viewers

When related to the message the visualization intends to present, the choice of color can strengthen or weaken that message.  Below we see how changes in the brightness and the saturation of colors can directly impact the feeling imparted. A well-known logo that re­sembles Fig. 4 uses mostly very bright and high­ly saturated colors. It should bring to mind play or playfulness. When the bright­ness of the colors is lowered while maintaining the same hues and saturation (Fig. 3), the playfulness is completely lost, thereby working against the un­der­pinning pur­pose of the logo and the business. On the other hand, desaturating the colors makes the logo seem calmer, the opposite of a feeling of ex­cite­ment that it should engender.

See the section below regarding the use of the HSB color space to tune emotional content.

Fig. 3: Darkened colors make the logo less "playful"
logo-bright-saturated
Fig. 4: The original logo uses bright and saturated colors
Fig. 5: The logo loses vividness when unsaturated

Organizational palettes

Some organizations have a strongly defined identity closely associated with a color. That color might be the dominant color in a logo, for example. In such cases, the use of the main corporate color will always be closely associated with the corporate identity.

Some organizations may have policies for the use of that color in internal and external com­mu­ni­ca­tions. Those poli­cies might be realized in templates or style sheets whose use is obligatory for company col­la­bo­rators. De­vi­at­ing from those colors might provoke the wrath of the corporate com­mu­ni­ca­tions khan.

See below for a discussion of using a dominant color as the basis for selecting compatible colors.

Combining colors

color combinations - harmonious
color combinations - not harmonious

Not all colors go well together. In fact, most colors do not go well together. Choosing a good palette of colors depends both on æsthetic judgements and on un­der­stand­ing the phy­si­o­logy of the eye.

If you lack the æsthetic sensitivity to choose color combinations, there are various tools available and web sites designed to help you choose reasonable com­bi­na­tions.1 Make use of these tools when you are first learning about colors. Also, use A/B testing to identify with your target audience which com­bi­na­tions work best.

There are various methods available for choosing a set of colors that work effectively with each other in a visualization. These methods are based on selecting colors from a color wheel. The following section discusses these methods.

Color schemes

Various rules may be used to select a scheme of harmonious colors. They are all based on a color wheel (Fig. 6). A single base color is selected, from which the other colors in the scheme are calculated. The base color might be, for example, the main color of a logo. If the visu­a­li­za­tion includes a photo­graphic image, the base color could be the dominant color in that image. Various tools are available on-line both to detect dominant colors in an image and to calculate the colors for a given scheme and a given base color.

color wheel
Fig. 6: A color wheel is the basis for defining a color scheme

Here are descriptions of the rules with examples. For more in­for­ma­tion, consult any standard work on color theory.

Analogous

analogous colors

Analogous colors are near each other on the color wheel. They are generally a very har­moni­ous, calming com­bi­na­tion. How­ever, there is a danger of in­suf­fi­cient contrast among the colors.

acanthes
Fig. 7: Henri Matisse, Acanthes

Monochromatic

Monochromatic colors are from a single ray in the color wheel. The hue is identical for each color, but the saturation and bright­ness vary. Color blindness issues are avoided when using this scheme.

Triad

Triad colors have hues that are approximately 120° apart on the color wheel. Visu­ali­za­tions us­ing a triad scheme tend to have good contrast and a vivid, well-balanced aspect.

Complementary

complementary colors

Complementary colors are se­lec­ted from opposite sides of the color wheel. Ob­vi­ous­ly, they contrast well—sometimes too well. A single object in a color com­ple­menting the dom­i­nant color of the visualization will immediately stand out. When com­ple­mentary colors touch, the edge is accentuated and appears brighter. Be aware of color blindness issues.

nu bleu la grenouille
Fig. 8: Henri Matisse, Nu bleu, la grenouille

Compound

Compound colors are mixtures of pairs of complementary, ana­logous colors. This scheme offers the features of both, en­larging the number of colors available for use.

Shades

color shades

Color shades are variations on the brightness of a single hue and saturation. As with the mono­chrom­atic scheme, color blind­ness issues are avoided.

These schemes provide guidance, but a very large number of other com­bi­na­tions are both possible and potentially suit­able for the com­mu­ni­cation of various messages.

Contrasting luminosity

I have seen various sites that appear to believe that light grey text against a black background is the height of chic. Maybe. I find them almost impossible to read.

color combinations - grey on black
Fig. 9: The contrasting luminosity of colors has a strong impact on legibility

Color blindness

color combinations - red on green
color combinations - shades of grey

Remember that about 10% of the XY chromosome pop­u­la­tion has some form of color blindness. If you count on the distinction be­tween red and green to make a point in your visualization, well, many people are unlikely to perceive that point. Consider combining colors other than red and green, or with different shading or line styles, to make your vi­su­a­li­zation understandable by a broader population. Note, too, that color is not as strong a visual indicator as other factors, such as position.

Some experts recommend replacing red-green with magenta-turquoise. While this combination is certainly more legible (to my eyes, at least), many people might object to the mixture of hues.

If you do not intend any emotional or cultural content in the colors, try replacing them with either shades of grey or distinct shading or textures.

Using color selection tools

Many visualization creators lack­ing a background in design are likely to select colors either directly from a default palette (Fig. 10) or using a red/green/blue color selector. (Fig. 11). While almost all cultures understand and name the colors red, green and blue, the values associated with those colors are not intuitively obvious. Can you guess what color is associated with the settings in Fig. 11?2 When it comes to choosing good colors for an in­for­ma­tion visu­ali­za­tion, these numbers offer almost no help in resolving many common issues.

color selection palette
Fig. 10: Selecting a color from a standard or custom palette
color selection RGB
Fig. 11: Colors may be selected from a red/green/blue color space

The HSB Color Selector

Many of the issues we have in using color in visu­ali­za­tions are readily addressed by selecting colors from the Hue/Saturation/Brightness color space.

Hue is what we generally think of as “color”. It indicates what we perceive in the range of visible colors from red to violet. Hue is measured on a scale of 0° to 360°, referring to the hue on a color wheel.

Each of those colors may be more or less “pure” or seem “washed out”. This is the saturation of the color. It is measured as a percentage, ranging from 0% (completely washed out) to 100% (pure).

Finally, a patch of color may be perceived as more or less luminous, generally called the brightness or the intensity of the color. Brightness, too, is measured as a percentage. At 0%, a patch of color has no brightness; it is black. At 100%, though, the patch is not white. Rather, it is the most luminous version of the patch of the particular hue and saturation.

color selection hue
Fig. 12: Hue is what we generally think of as "color", ranging from red to violet.
color selection saturation
Fig. 13: Saturation is the degree to which a color may appear to be "washed out" or pure
color selection brightness
Fig. 14: Brightness describes the luminosity of a patch of color

Defining colors using the HSB color space has various practical applications that are not readily performed within the RGB color space. Here are some examples:

  • Defining a range of colors re­pre­senting ordinal values
  • Tuning the color of text labels
  • Tuning the emotional con­tent represented by colors

Using transparency

Transparency is selectable independently from hue, saturation and brightness. It is applicable to the use of texture as well as color.

I have found transparency to be useful for the background of text labels and for the intersections of containers. However, if it is important to discriminate such inter­sec­tions, the use of different hatchings might be more effective, if color does not otherwise add value. On the other hand, hatching introduces many lines with­out added value and might make labels difficult to read.

euler diagram using transparency
Fig. 15: Transparency serves to identify intersections in Euler diagrams
euler diagram using hatching
Fig. 16: Hatching is also useful and is not subject to color issues

Selecting colors for ordinal values

Representing ordinal values with numbers is easy. How can we represent them with colors? Suppose we wish to present five categories of data where each category is greater than the pre­ceding category. There is no ob­vi­ous way to do this using the RGB color space.3 But in the HSB color space, relating color to ordinal value is very easy. For a given hue, select increasing values of either the luminosity or the saturation of the color (Fig. 17). Note that after four or five levels, it becomes difficult for many viewers to discriminate between adjacent values.
Fig. 17: A range of colors for ordinal categories is easily defined in the HSB color space

Colors of overlaid text

Visualization creators often label the elements of their creations either with text or with some other symbols. Have you seen cases where those labels are difficult to read because the color of the text is not very legible against the color of the back­ground? Of course, black or white text will almost always be legible (depending on the back­ground), but you may wish to make better use of the symbolic or emotional value of colors.

The HSB color space provides useful rules for tuning the colors of either the labels or their backgrounds. If the brightness of the labels is low (that is, black or some other dark color), the background should use bright colors. If you find the contrast of luminosity is not great enough to make the labels easily legible, check and tune the brightness values for each color. Similarly, if the labels are colored, the saturation of the background should be low. Of course, these principles are probably obvious. Adjusting the colors to improve legibility using the RGB color space is much less obvious.

background colors
Fig. 18: Lowering background saturation and raising background brightness to adjust label legibility

There are other methods useful for improving leg­i­bi­lity. Outlining the foreground object in white or black improves its legibility, es­pe­ci­ally when the back­ground is variable or is not known in advance. Video subtitling com­monly uses this practice, given that the backgrounds change con­stantly.

Tuning emotional content

Using brightness and sa­tu­ration in your vis­ua­li­zations can help high­light components and make the overall image more com­pel­ling, according to whatever messages you wish to com­mu­ni­cate. As we discussed above, these color attributes may be used in combination with the choice of hues, themselves having cultural and emotional significance. However, only the HSB color space makes these color choices easy.

Choosing colors for maps

Many visualizations are based on maps. Sometimes, the creator wishes to show each region in the map with a color that is distinct from its neighboring regions. The data type displayed would be nominal, not ordinal or continuous. How many colors do you need? What combination of colors looks good? Rather than attempting to figure this out by trial and error or by applying to­po­lo­gical algorithms, it is much simpler to use an online service that calculates the colors for you. This sort of visualization might otherwise use a different element, such as size, to indicate the value concerned.

colored map
Fig. 19: This map shows each county within a region, colored according to one of five different categories. The colors were suggested by an online tool. Unless you cannot perceive color at all, the different values are easy to distinguish. (Map created using http://colorbrewer2.org)

Think, for example, of a map wherein the regions are distorted to indicate the number of cus­to­mers for a given service (regions with many customers are made proportionately larger than their geographical area might indicate).

Note that this issue is distinct from a heat map visu­ali­za­tion of a continuous value dis­played by region. In this case, a color scale is mapped to the continuous value. An example of this sort of visualization might be an analysis of a service’s revenue by region, when there are many regions. If the edges of those regions need to be shown, they would be indicated by lines.

When to use color

We have seen that color can be a powerful bearer of messages, but is sometimes apt to bring un­de­sired sig­ni­fi­ca­tions. Furthermore, color is easy to misuse and sometimes viewers cannot perceive its distinctions. Let me sum­ma­rize some uses of color:

  • to evoke an emotion
  • to evoke a cultural con­no­ta­tion
  • to distinguish categorical (nominal) values using hue (but not brightness or saturation) when a small number of categories (certainly fewer than about 12) need to be displayed
  • to distinguish ordinal values, especially using brightness but less so with saturation or hue
  • to distinguish continuous values, as in heat maps, where the precise mea­sure­ments at data points are not needed
  • to entice the visualization recipient to pay attention

Beware, however, of situations where color might be in­ap­pro­priate:

  • key recipients of messages are colorblind
  • the selected color has un­de­sir­able cultural or e­mo­tional connotations
  • too many colors, difficult to distinguish, would be re­quired to represent a large number of categories
  • color is generally a poor indicator of con­tin­uous values
  • hue is of little use for ordinal values
Note, however, as with any act of creativity, these rules are meant to be broken.

Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License The article Information Visualization and Color, by Robert S. Falkowitz, including all its contents, is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Bibliography

[a]   Stone, Maureen. “Choosing Colors for Data Visualization”, 2006.

[b]   Berinato, Scott. Good Charts: The HBR Guide to Making Smarter, More Persuasive Data Visualizations. Harvard Business Review. 2016.

[c]   https://en.wikipedia.org/wiki/Information_design

[d]  Nacache, Jaime. Why, How and Where to Use Infographics. https://web.archive.org/web/20201210004612/https://www.business2community.com/infographics/why-how-and-where-to-use-infographics-01407374

[e]  Taei, Payman. What Is an Infographic? And How Is it Different from a Data Visualization? https://towardsdatascience.com/what-is-an-infographic-and-how-is-it-different-from-a-data-visualization-a92c23b35197

[f]  Frich, Arnaud. Color Management Guide. https://www.color-management-guide.com/

[g]  Munzner, Tamara. Visualization Analysis and Design.  CRC Press, 2015.

Notes
1 For example, https://archive.is/AkTf6 (generic use) or http://colorbrewer2.org (for cartography)
2 You might have guessed that it is bluer than anything else. But could you guess that it is this shade of blue? And if you reduce the Red value from 114 to 14, could you guess that this is the new color? And setting Red to the maximum of 255 changes the color to this. See what I mean?
3 The intuition of the RGB color space is that a higher value for a given channel represents greater brightness. Thus, 0,0,0 is black (no brightness at all) and 255,255,255 is pure white (the brightest color).
Credits

Unless otherwise indicated here, the diagrams are the work of the author.

Fig. 5: Downloaded from https://color.adobe.com/create

Figs. 7-11: Copied from LibreOffice.

Summary
Information Visualizations and Color
Article Name
Information Visualizations and Color
Description
Color may play a potentially important role in information visualizations. However, it is often used without thought to the messages it communicates. Out of the box color schemes are often inappropriate. This article suggests ways to optimize the use of color and the tools used for selecting colors.
Author
Robert S. Falkowitz
Publisher Name
Concentric Circle Consulting
Publisher Logo
Concentric Circle Consulting

Filed Under: Visualization Tagged With: analogous colors, color, color scheme, cultural significance, emotional significance, hue, logo, luminosity, map visualization, palette, perception, shades

Subscribe to our mailing list

Click here to be the first to learn of our events and publications
  • Email
  • Facebook
  • LinkedIn
  • Phone
  • Twitter
  • xing
  • YouTube

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Kanban eLearning

Kanban training online

Recent Posts

  • Verbs, nouns and kanban board structure
  • The role of the problem manager
  • The Three Indicators

Tag Cloud

flow priority impact ITIL ITSM process metrics cause manifesto for software development kanban tools leadership lean resource liquidity value stream Cost of Delay context switching knowledge work service manager service request flow efficiency process Incident Management problem automation incident management tools manifesto histogram rigidity incident bias agile process definition risk statistical control chart service management tools kanban board knowledge management change management waste lean management
  • Kanban Software
  • Services
  • Posts
  • Events
  • Publications
  • Subscribe
  • Rights & Duties
  • Personal Data

© 2014–2023 Concentric Circle Consulting · All Rights Reserved.
Concentric Circle Consulting Address
Log in

Manage Cookie Consent
We use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.
Functional Always active
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
The technical storage or access that is used exclusively for statistical purposes. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
Manage options Manage services Manage vendors Read more about these purposes
View preferences
{title} {title} {title}