Matching a temperature to a colour.
Introduction
As part of a web application that I recently made for a council intranet site in my previous role. I designed a colour generating function which gave a colour representation of the temperatures mentioned in a weather forecast. I actually started writing this over a year ago - I was about to delete it when I realised that I was looking at some of my old code, and not feeling too embarrassed about it.Rationale
We relate colour to temperature. Whether this perception is learned or instinctive, the use of colour to support the representation of temperature is pervasive and useful. We experience the phenomenon being used through other media often in weather forecasts, cartoons, adverts, and art. Ironically we associate with a low thermodynamic temperature with high colour temperature, The effect seems to go so far as to affect how we perceive temperature when we touch objects of a different colour. Whilst on a website we should not use colour as a primary means of communication, its association conveys a meaning which enhances the message.
Temperature is also very regional. 20C Where I went to University (Leeds, UK), it was a warm day for shorts and a tee shirt. In Kabul, Afghanistan, 20C was a pleasant day - where one didn't mind wearing combat armour but wasn't looking for anything warmer. Whilst working in Townsville, Australia, at 20C kids would quite rightly bring duvets to school to keep warm.
Temperature is also very regional. 20C Where I went to University (Leeds, UK), it was a warm day for shorts and a tee shirt. In Kabul, Afghanistan, 20C was a pleasant day - where one didn't mind wearing combat armour but wasn't looking for anything warmer. Whilst working in Townsville, Australia, at 20C kids would quite rightly bring duvets to school to keep warm.
Code
The following code generates a colour from a Temperature. The code may need the following properties setting to keep things sweet in your location:
- double minTemp - this should be the minimum temperature in the location being described for.
- double maxTemp -set to the maximum annual temperature in the location being described for.
To generate the colour the blue and red pixels are manipulated using a linear regression between the maximum and minimum temperatures. The green pixel is used to brighten the colours towards the middle of the range. This has the effect of maximising the green pixel in the middle, more normal temperatures.
Results
| Temperature (C) | Hash Code |
|---|---|
| -4 | #41FEE2 |
| -3 | #4514DC |
| 0 | #5252CD |
| 4 | #6396B9 |
| 8 | #74C9A4 |
| 12 | #85EB90 |
| 16 | #97FC7C |
| 20 | #A8FD67 |
| 24 | #B9ED53 |
| 28 | #CACD3F |
| 32 | #DB9C2A |
| 36 | #ED5A16 |
| 40 | #FE0702 |
| 44 | #FFA3ED |
After trying a number of different standard Blues and Reds to demark the edges of the scale. Results from a small focus group found RoyalBlue to be "More relatable" than Blue as a base colour. hence this provides the base colour for the lower limit. The behaviour of colours outside the expected temperature range is reasonably graceful; however raising an argument exception for temperatures outside the expected range would ensure no unexpected surprises.
At lower colours contrast with black text becomes an issue. Particularly when related to the WCAG usability guidelines. This can be overcome by using white text below a threshold if AA compliance is desired. It should be noted that temperature text is required for level A compliance.
Further reading
- Ho H-N, Van Doorn GH, Kawabe T, Watanabe J, Spence C (2014) Colour-Temperature Correspondences: When Reactions to Thermal Stimuli Are Influenced by Colour. PLoS ONE 9(3): e91854. doi:10.1371/journal.pone.0091854 - http://www.ncbi.nlm.nih.gov/pmc/articles/PMC4080700/
- WCAG 2.0 Guidelines https://www.w3.org/TR/WCAG20/#visual-audio-contrast
Comments
Post a Comment