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

I recently had this conundrum with using time data to display the colors of the sky that that time would correspond to. It's tough, Here are three ways I explored:

1) The bad-ass way: Make a function for your R, G, B channels separately that would accept an x-intercept of your temperature, and spit out a y-intercept for your Red channel, Blue channel and Green channel over the range of temperatures and corresponding colors you have. To make this I would reverse engineer it by sampling along the color range for some major division of the temperatures and plotting as many points as you can and then drawing a 6th degree polynomial through the points for each of the channels. You would get a function which could accept a temperature value and combine 3 outputs for the R, G, and B channels of an RGB color for alpha 1. Should work, haven't tested it though and am not willing to haha

2) Make a background class for each of the major colors (you decided whether this is 5 or 50 colors) and toggle between them with an alpha blend. This is what I ended up using for my issue.

if(temp > 0 && temp <= 5)
{
     greenBackground.alpha == 1
     yellowBakckground.alpha == (temp/5)
}
else if(temp > 5 && temp <= 10)

etc...

So if your temp was 2.5 then it would be 50% mix of yellow and green

I was able to implement this option in 1 night and the result looks great! It's time consuming, but do-able and not as messy as you might think.

3) Make and store an array with RGB colors sampled from your gradient against all the possible integers (there aren't that many between -30 and 30) and round the API's data to integer values if needed. That would be the simplest I suppose. Definitely not as cool as Option 1 though :)

Good luck!

Answer 2

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 3

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 4

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.