Question

OK Stackoverflowians, Here’s the riddle for the day.

I have a weather sidebar widget on a WordPress site that snags all of its data from the Google Weather API. I would like to set a gradient from RED to BLUE and then, by the magic of the javascript gods, to look at the value of the temperature.

Higher number = closer to RED
Lower Number = closer to BLUE

Is there anything out there that can do this? Or would I have to start from scratch?

Answer 1

You could express the color using two dimensions like this:

var max_temp = 50, // set maximum expected temperature
min_temp = -10, // set minimum temperature
temp_range = max_temp - min_temp, // calculate range
temp_rating = ((temp - min_temp) / temp_range) * 255 // express value in terms of the range multiplied by 255
red = temp_rating, // more temp = more red
blue = 255 - temp_rating; // more temp = less blue

Then your CSS color would become:

rgb(red, 0, blue)

No idea if it will look nice though 😉