设置基于室外温度的背景颜色

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

最近我有这个难题，使用时间数据显示天空的色彩，到时候会对应。这是艰难的，我有三种方法探索：

1）糟糕的方式：为你的R，G，B通道单独制作一个函数，它将接受x温度的截距，并吐出一个y - 在温度范围和相应颜色范围内为红色通道，蓝色通道和绿色通道截取。为了做到这一点，我会逆向设计它，方法是沿着颜色范围对某些主要温度分区进行采样，然后绘制尽可能多的点，然后通过每个通道的点绘制6次多项式。你会得到一个函数，它可以接受一个温度值，并将RGB输出的R，G和B通道的三个输出合并为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）根据所有可能的整数（不存在，许多介于-30和30之间）制作并存储RGB梯度采样的数组，并根据需要将API数据四舍五入为整数值。那将是我想的最简单的。绝对不像选项1一样酷:)

祝你好运！

Answer 2

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

你的问题是关于如何以摄氏度可视化一定的温度。没有标准的算法来做到这一点。设计师应该如何解决这个问题。

我可能会建立一个rgb值的数组，每2.5°C或5°C，然后融合rgb温度值之间。

Answer 3

你的颜色范围看起来是相同的，为“色调 - 只有”在“HSL色彩空间”从270º（violetish）在-30℃扫至30°（橙色）在30℃+

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

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

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

见http://jsfiddle.net/V5HyL/

Answer 4

这是一个特殊的情况，而不是一个通用的解决方案，而是通过简单地做色调之间的线性渐变，并蜷缩在中间范围内的混合物（即绿色），你可以得到一个合理的近似没有颜色踏步：

演示：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(); 
};