También disponible en Español


The digital magazine of InfoVis.net

On Colour Usage
by Juan C. Dürsteler [message nº 183]

Colour plays a very important role in information visualisation. Nevertheless it isn't necessarily equally useful for whatever application. In this article we discuss the main applications of colour, describing the first of them in detail.
ResistColor.gif (38594 bytes)
Colour coding has many applications in this case the value of a resistor can be deduced from its coloured bands.
Source: As can be seen in Central Texas College website
Click on the image to enlarge it

We have had the opportunity to talk about colour regarding its very existence, we have spoken with Kames Wise about the ecology of colour, evaluated the relationship between colour and emotions and to present schematically how it relates with information. But we haven't considered with the detail a fundamental aspect such as the usage of colour in information visualisation deserves.

Colin Ware  in the second edition of his book about information visualisation considers 5 different applications of colour within this field. From these we'll obviate here the reproduction of colour in different devices and the specification of colour spaces, like RGB or HSV, palettes and the interfaces for choosing colours we find in any CAD or plotting software since they are well known subjects of computer graphics.

We'll keep then the three most interesting applications for information visualistaion:  nominal information coding, pseudocolor sequences and exploration of multidimensional discrete data

Due to space limitations in the present article we'll concentrate on the first one

  • Nominal Information Coding

    More usually known as labeling, it means using colour to differentiate several categories of elements. For example, we can associate red to the data that refers to a particular set of measurements, e.g. height, while the green elements will carry information about the width of the elements of the same set. 

    Colour can be especially effective in this field. According to Ware there is a whole range of perceptual factors that we have to take into account when choosing a set of colour labels:

    • Distinctness: two or more colours that appear close in space have to be easily distinguishable one from the other. This means that their chromatic difference has to be perceived quickly; otherwise it will be very difficult to find them. Colin Ware mentions the strategy devised by Bauer* et al. that makes use of the  chromaticity diagram CIE l*u*v, a coordinate colorimetric space, in order to appropriately choose the colours of a label set.

      The idea is based on the concept of convex hull. The convex hull of a set of points in 2D is the smallest convex polygon that contains all the points of the set. In practice we can imagine the points as nails fixed on a surface and the convex hull as the polygon formed by a rubber band placed around them.
      CIE-UVdiagramCH.gif (52860 bytes) Selecciones.gif (3742 bytes) DentroCH.gif (3876 bytes) FueraCH.gif (3894 bytes)
      Choosing colours in the CIEuv diagram: In the image on the left we have chosen three colours, in the vertices of the triangle that corresponds to their convex hull (second image from left to right). When choosing a fourth colour we can decide to use a colour contained inside the convex hull (see the third image from left to right) or a point lying outside the convex hull (image on the far right).  The selected colour can be found in the upper left quadrant of both images. Notice that it is far easier to find the point on the right image than on the left counterpart. 
      : CIE Diagram courtesy of The Colour Group (GB), other images and convex hull by the author.
      Click on the images to enlarge them.

      If we consider a certain amount of points over the CIE diagram, for another point to be easily distinguishable from a perceptual point of view, it has to lie outside the convex hull of the remaining points. 

    • Unique colours: as we have seen already in number 126 Does colour exist?  the colours our perceptual system considers to be primary or unique are white, black, red, green, yellow and blue that are the basic colours of the opponent colour theory (luminance channel + 2 chromatic channels). Moreover these are the colours that have unique names all over the world. 

      White Black Red Green Yellow Blue

      For this reason these six colours provide a natural choice when we need to choose a few colour (six or less) set

    • Contrast with background: simultaneous contrast phenomena may produce the effect that, depending on the background against which they lie, two different colours appear to be the same or vice versa the same colour appears to be different in different locations. 
      Contraste_Sim.gif (79635 bytes) ColorSimilar.gif (10808 bytes)
      Simultaneous contrast against background colours
      Source: by the author.
      Click on the images to enlarge them.
      Apparently similar colours on different backgrounds, that actually aren't so.
      Source: by the author.
      Click on the images to enlarge them.

      One way to reduce this effect is using a small range of colours separate enough in terms of both luminance (intensity) and chrominance (hue). Another way to avoid this is placing a thin white or black border limiting the object. 

    • Colour blindness: Around 10% of the male population and 2% of the female one suffer some form of colour blindness. The most usual one is confusing colours in the red-green channel, while the yellow-blue one is usually less altered. Since the perception of colour is not indispensable for the development of everyday life (as anyone that has seen a black & white movie can testify) many people with colour vision anomalies don't even know that they suffer from that condition. 
      ControlRG.gif (8669 bytes)MapMarketRG.gif (86499 bytes) ControlYB.gif (8717 bytes)MapMarketYG.gif (88641 bytes)
      Smartmoney offers its interesting TreeMap of the stock market with a control panel that, among other functions, allows the user to change the coding of colours, switching between the Red-Green channel and the Yellow-Blue one as an attention to their customers with colour vision anomalies. To the left you can see the control panel and immediately to its right the result of choosing that particular channel.  
      Source: Image as can be seen at Smartmoney website in the section Map of the Market
      Click on the images to enlarge them.

      For this reason it's important to take into account these effects when creating graphical representations in order to avoid giving preference to colours in the red green channel if this can lead to confusion.

    • Number of colours: according to Ware, although the use of colours for coding categorical information is very effective, this effect diminishes as the number of colours (and categories) increases. The different estimates give values between 5 and 10.

    • Field size: when the element to be represented covers a small visual angle (less than half a degree is according to Ware possibly the inferior limit) what can happen is that the colours are confused even if they are different enough due to a phenomenon known as small-field colour blindness. The smaller the element the more saturated the colour should be in order for it to be identifiable and vice versa, the greater the field the less saturated the colour has to be and the easier to identify the colour even though their difference was small. 

    • Conventions: as we have already seen in the number about Colours and Emotions there exist some conventions about the meaning of colour that can be applied in some cases. Nevertheless a lot of care should be taken since those conventions are very much influenced by cultural considerations. What in one country can be considered acceptable could result shocking in another one.

    • Recommended colours : Ware proposes 12 colours that are widely used in nominal coding. The first six are the ones already mentioned above and the remaining six correspond to the most usual names of colours that appeared in the multicultural study by Berlin and Kay.

      Red Yellow Black


      Gray Brown
      Green Blue White


      Orange Purple

      Normally the six perceptual primary colours are used first while the remaining others are used when it's necessary to extend the number of colours.

Nominal information coding using colours is a "natural" way of using colour. In fact colour is not indispensable to code very complex information.  Using only the luminance channel, i.e. levels of one colour, gray for example, it's possible to code very complex scenes. Nevertheless, as in nature the colour of a fruit allows us to identify it easily from the vegetal background, the use of colour allows us to identify different categories of objects.

As we have seen above this can't be done whatever the way. It's not the same representing visual elements of small extension that that of a greater one. In the same way we can't use an arbitrarily large number of colours without eliminating the difference inducing confusion. Finally optical illusions like simultaneous contrast can make us think that similar colours are different or vice versa depending on the background they are shown on.  Avoiding these problems and maximising the possibilities of information coding through colour can yield excellent results.

* Bauer, B., Jolicoeur, P., and Cown, W.B., (1996) Distractor heterogeneity versus linear separability in colour visual search. Perception num 25: pp. 1281-1294

+ Berlin, B. and Kay, P. (1969) Basic Color Terms: Their Universality and Evolution. University of California Press, Berkeley

Links of this issue:

http://online.ctcd.edu/orientation/orientation6.cfm   Resistor colour coding
http://www.infovis.net/printMag.php?num=126&lang=2   Num 126 Does colour exist?
http://www.infovis.net/printMag.php?num=129&lang=2   Num 129 The Ecology of Colour
http://www.infovis.net/printMag.php?num=96&lang=2   Number 96 Colours and Emotions
http://www.infovis.net/printMag.php?num=95&lang=2   Number 95 Colour and Information
http://www.infovis.net/printRec.php?rec=persona&lang=2#ColinWare   Page about Colin Ware at Infovis.net
http://www.infovis.net/printRec.php?rec=llibre&lang=2#InfoVisWare   Information Visualization by Colin Ware
http://www.hf.faa.gov/Webtraining/VisualDisplays/HumanVisSys2c4.htm   Page about the CIE chromaticity diagram
http://www.city.ac.uk/colourgroup/   Image of the CIE l*u*v diagram
http://www.smartmoney.com   SmartMoney.com Map of the Market
http://www.icsi.berkeley.edu/~kay/   Paul Kay web page
© Copyright InfoVis.net 2000-2014