Set background color based on outdoor temperature

Question

Heyoh SO,

I have a temperature widget to implement on a project I am working on. Nothing is specially difficult, I've got a free API to retrieve the datas that I need ect.

BUT, the lovely designer who works with me would have a color feature for which I've got no good idea to start with...

He would to define a background-color depending on the current weather temperature.

I mean if the temperature is cold, like -20, the background color should be blue / violet / any cold color; and when it's warm, like 25, it should have a hot background-color like orange / red.

I think I could easily work with an array of "temperature steps", but I would prefer to work with a function that could define the color depending of the temperature. I know it's strange, I don't know if there is an algorithm to define a color by it's temperature color... This article is helpfull http://en.wikipedia.org/wiki/Color_temperature but quite complicated, if someone has any idea, even for a beginning, I am very interested !

I saw this thread: Display temperature as a color with C#?

But I'm not using C# and I don't want to, so if there is a solution in JavaScript, it would be perfect. I can eventually work with PHP or NodeJS if there is a server-side need.

EDIT - Answer:

Finally, I didn't have the choice to use a real colors gradient array, because of the graphic needs. But I still had to mix the colors of the closest steps depending of the temperature ! I wrote a small JS library to do that, that you will be able to find on GitHub soon, I'll post the link here.

You can find it here:

The presentation website of the project

Or the github project

Answer 1

Your colour range looks to be the same as a "hue-only" sweep in "HSL colour space" from 270º (violetish) at -30ºC down to 30º (orange) at +30ºC

var hue = 30 + 240 * (30 - t) / 60;

If t is out of range, either clamp it before calling the above expression, or clamp h to the desired hue range afterwards.

On supported browsers you can use an hsl(h, s, l) colour string, or use commonly available "HSL to RGB" functions to convert the HSL colour into RGB.

See http://jsfiddle.net/V5HyL/

Answer 2

This is a special-case, not a generic solution, but by simply doing a linear gradient between hues and scrunching the blend in the middle range (i.e. the green) you can get a reasonable approximation without color stepping:

Demo: http://jsfiddle.net/bcronin/kGqbR/18/

//
// Function to map a -30 to 30 degree temperature to 
// a color
//
var F = function(t)
{
    // Map the temperature to a 0-1 range
    var a = (t + 30)/60;
    a = (a < 0) ? 0 : ((a > 1) ? 1 : a);

    // Scrunch the green/cyan range in the middle
    var sign = (a < .5) ? -1 : 1;
    a = sign * Math.pow(2 * Math.abs(a - .5), .35)/2 + .5;

    // Linear interpolation between the cold and hot
    var h0 = 259;
    var h1 = 12;
    var h = (h0) * (1 - a) + (h1) * (a);

    return pusher.color("hsv", h, 75, 90).hex6();
};

Answer 3

The wikipedia article on color temperature is not connected to your problem. The wikipedia article is only relevant for digital imaging experts. Color temperature in this context means something different ...

Your problem is about how to visualize a certain temperature in degrees celsius. There is no standard algorithm to do this. It's up to the designer how to solve this task.

I would probably build an array of rgb-values for every 2.5°C or 5°C and then blend by rgb for the temperature values in between.