Perception of colour

Colour Sensitivty

Colour

Modelling Colour

RGB Colour Model

RGB Cube

Represents colour as a triple (R,G,B)
What most displays use
Device independent implementation

The colour model you are most likely to be familiar with is the RGB model. In the RBG model we represent colour a a triple of three numbers, with one number for each of Red, Green and Blue.

It’s handy to know how the RBG model works as this is the most common colour model used in displays. Nearly all displays have three colours per pixel or point on the screen, which produce red, green or blue light.

Something important to note about RGB is that the actual implementation, how each colour gets reproduced on a screen, is up to the maker of the screen. No two types of screens will reproduce the same RGB value in the same way. A certain shade of green on one screen will be slightly different on another. This is pretty noticeable when creating a series of slides on a laptop and then going and playing them through a projector.

We can visualize the colour space of RGB as a cube. Each corner of the cube has each colour at full strength or zero strength, with colours inside the cube having values in between. Visualizing the RBG cube highlights that it is fairly unintuitive way to think about colour. Trying to adjust colours in RGB for a desired affect is not a straightforward process.

Modelling Colour

HSV (Hue Saturation Value)/HSL (Hue Saturation Lightness) Colour Models
Designed to be more intuitive than RGB
Can convert perfectly back and forth to RGB
Represents colour as a triple (H,S,V)

The HSL and HSV are alternative representations of the RGB colour model. They were designed to be a more intuitive way of viewing the RGB colour spectrum. RGB is useful when we are describing how to produce colours in a computer monitor, but now how to make a shade of green slightly more blue tinged for example. It is highly unintuitive for design purposes.

In the HSL model the Hue of the colour is a angle between 0 and 360 degrees. Hue represents moving along the visible range of colour, from red to yellow, green, blue, purple and then back to red The Luminance is the brightness of the colour, 0% Luminance is black and 100% Luminance is white, with darker and lighter shades of the colour between.

In HSV we have Hue which works in the same way as HSL. Saturation is the distance from the neutral colour on the grey black-axis to a pure hue, and value is where the colour sites of the grey-black axis.

There are advantages and disadvantages to both models relative to one another. Colour picking in software seems to arbitrarily pick one or the other, or sometimes both.

While HSL/HSV let us describe colour in perceptual manner, they are not perceptually uniform. (Example?)

Modelling Colour

Other colour models exist that cover wider range of colour
CMYK (Cyan, Magenta, Yellow, Key) - 4 channels
Pantone

Practical Rules for Colour

Use color only when needed to serve a particular communication goal.

Colour rules

Showing Detail

The use of luminance contrast

The key rule for the use of colour in data visulizsation, luminance contrast is needed. Pairing black and white leads to the biggest contrast in brightness. The smaller the graphic we are dealing with, the greater the contrast we need. Likewise if our graphic is large it’s not quite anything goes but you have a lot more leeway.

We also use luminance contrast as a way to manage the viewers attention.

The aspects of our visualization with the highest contrast is where our attention will be drawn first. Likewise features with lower contrast will be comparatively less noticeable.

It helps to think of luminance contrast as as finite resource. We only have so much we can spend on our graphic, so we should think wisely about what features we want to invest in.

A general rule is there should be a ratio a luminance ratio of 3:1 between text or graphics to the background

WC3 0.299 * R + 0.587 * G + 0.114 * B

Avoid Oversaturation

Colour Coding Information

Google Maps

A key function of the use of colour in data viz is to encode information. First use is to enforce distinctness between categories of data, so that we can distinguish between different categories. The second is learnability, that the viewer comes to understand that one colour indicates a particular category of data.

There are strong limits on how many distinct colours can be used on a graphic so a viewer can reliably understand what each colour is encoding. A number of different numbers have been reported between 6 and 12. The more colours we have the less easily we can distringuish between them, it gets easier to confuse one colour for another.

If we are using soley grey scale colours we need to limit ourselves to four colours.

content rich, design straightforward
intense
subtle and effective with color
rich in typographic information
luscious with multiple layers of micro/macro information,
a typographic layer + a symbol layer + a data-map layer
calm but clear scale bar always present (avoids the dequantification found in lots of datviz stuff)
free of chartjunk and optical clutter
acommodating a diversity of users.

Colour maps/palettes

Example Colour Maps

How we we choose a effective colour palette for our graphs

The typical/default colour map or palette used in Scientific Visualization is the rainbow colour map (Red, Orange, Yellow, Green, Blue, Indigo, Violet)

The big issue with the Rainbow colour map is that it is not perceptually ordered. To remember the ordering most people use a mnemonic Roy G Biv or the like. In studies where people have been asked to place them in order the orderings they come up with vary. If asked to sort a series of shades of grey they place them in order of lightness to darkest, or the reverse. If your data has some sort of ordering, the rainbow colour map wont convent that.

Perhaps one advantage of the rainbow colour map is familiarity, people are accustomed to seeing and interpreting it. And it is pretty and quite striking.

When choosing a colour map here are some principles we should follow

– The map yields images that are aesthetically pleasing.
– The map has a maximal perceptual resolution.
– The order of the colours should be intuitively the same for all people.
– The perceptual interpolation matches the underlying scalars of the map.
- distinct for all people, including colour-blind readers;
- distinct from black and white;
- distinct on screen and paper;

From Kenneth Moreland

Here are some tools which can help you pick or create a colour map

http://colorbrewer2.org/
https://color.adobe.com/create/color-wheel/
http://tools.medialab.sciences-po.fr/iwanthue/
http://www.mrao.cam.ac.uk/~dag/CUBEHELIX/cubetry.html
http://paletton.com/

Matplotlib has changed default colour map, see here for a talk on why

The Rainbow Colourmap

Don't use this

Perceptually Uniform colourmaps

Isn't this better!

Background Colour - Grey or White?

Hadley Wickham

Background Colour - Grey or White?

Nate Silver