根据室外温度设置背景颜色

Question

Heyoh SO，

我有一个温度小部件可以在我正在处理的项目上实现。 没有什么特别困难，我有一个免费的API来检索我需要的数据等。

但是，与我合作的可爱设计师会有一个颜色特征，我从一开始就没有好主意......

他会根据当前的天气温度定义背景颜色。

我的意思是如果温度很冷，比如-20，背景颜色应该是蓝色/紫色/任何冷色;当它像25一样温暖时，它应该具有像橙色/红色一样的热背景颜色。

我认为我可以轻松使用一系列“温度步骤”，但我更喜欢使用可根据温度定义颜色的功能。我知道这很奇怪，我不知道是否有算法通过它的温度颜色来定义颜色...... 这篇文章很有帮助http://en.wikipedia.org/wiki/Color_temperature但很复杂，如果有人有任何想法，即使是一个开头，我也很感兴趣！

我看到了这个帖子： Display temperature as a color with C#?

但是我没有使用C＃而我不想这样做，所以如果JavaScript中有解决方案，那就完美了。如果存在服务器端需求，我最终可以使用PHP或NodeJS。

编辑 - 回答：

最后，由于图形需要，我没有选择使用真彩色渐变阵列。 但我仍然需要根据温度混合最近步骤的颜色！ 我写了一个小的JS库，你可以很快找到GitHub，我会在这里发布链接。

你可以在这里找到它：

The presentation website of the project

Or the github project

Answer 1

您的色彩范围与“HSL色彩空间”中的“仅色调”扫描相同，从-30ºC的270º（紫色）到+30ºC的30º（橙色）

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

如果t超出范围，请在调用上述表达式之前将其钳制，或者之后将h钳位到所需的色调范围。

在支持的浏览器上，您可以使用hsl(h, s, l)颜色字符串，或使用常用的"HSL to RGB"函数将HSL颜色转换为RGB。

请参阅http://jsfiddle.net/V5HyL/

Answer 2

这是一个特殊情况，而不是通用的解决方案，但只需在色调之间进行线性渐变并在中间范围（即绿色）中混合混合，就可以获得合理的近似值，而无需使用颜色步进：

演示：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

我最近有这个难题，使用时间数据来显示那个时间对应的天空颜色。这很难，我探讨了以下三种方式：

1）坏屁股方式：分别为你的R，G，B通道设置一个接受温度x截距的功能，并为你的红色通道，蓝色通道和绿色吐出y截距通道温度范围和相应的颜色。为了做到这一点，我将通过对温度的某些主要分区的颜色范围进行采样并对尽可能多的点进行绘制，然后通过每个通道的点绘制6度多项式来对其进行逆向工程。你会得到一个可以接受温度值的功能，并为RGB颜色的R，G和B通道组合3个输出，用于alpha 1.应该工作，虽然没有测试过但不愿意哈哈

2）为每种主要颜色制作背景类（您决定这是5种还是50种颜色）并使用alpha混合在它们之间切换。这就是我最终用于解决我的问题。

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

等...

因此，如果你的温度是2.5，那么它将是50％的黄色和绿色混合

我能够在1晚实现此选项，结果看起来很棒！这很耗费时间，但可以做到并且不像你想象的那样凌乱。

3）制作并存储一个数据，其中RGB颜色从​​渐变中采样，针对所有可能的整数（ 很多在-30和30之间），并将API的数据四舍五入为整数值如果需要的话。这是我认为最简单的。绝对不如选项1那么酷：）

祝你好运！

Answer 4

有关色温的维基百科文章与您的问题无关。维基百科文章仅与数字成像专家有关。在这种情况下，色温意味着不同的东西......

您的问题是关于如何以摄氏度显示某个温度。没有标准算法可以做到这一点。这取决于设计师如何解决这个任务。

我可能会为每2.5°C或5°C构建一个rgb值数组，然后通过rgb混合其间的温度值。