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

Question

嗨，SO：

我需要在一个项目中实现一个温度小部件。这不是特别困难，我已经得到了免费的API来检索所需的数据等。

但是，与我一起工作的可爱设计师需要一个颜色功能，我没有好的想法从哪里开始...

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

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

我认为我可以轻松使用“温度步骤”数组，但我宁愿使用一个能够根据温度定义颜色的函数。我知道这很奇怪，我不知道是否有一种算法能够通过其温度颜色定义颜色...... 这篇文章很有帮助http://en.wikipedia.org/wiki/Color_temperature但相当复杂，如果有人有任何想法，即使是一开始，我非常感兴趣!

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

但是我不使用C＃，我也不想使用它，因此如果JavaScript中有解决方案，那就太完美了。如果有必要的话，我最终可以使用PHP或NodeJS。

编辑 - 答案：

最后，由于图形需求，我没有选择使用真正的颜色梯度数组。 但是，我仍然必须混合最接近的步骤的颜色，具体取决于温度！ 我编写了一个小型JS库来完成这项工作，您很快就可以在GitHub上找到它，我将在这里发布链接。

您可以在此处找到它：

该项目的演示网站

或者访问该GitHub项目

- Flo Schild

---

你如何在没有基于步骤的类的情况下完成它？我想我不太明白你建议的是什么。 - Flo Schild

@George - 这个问题为什么会被认为是“过于局限”？这难道不是一个能够帮助其他人的合法问题吗？ - LittleBobbyTables - Au Revoir

很抱歉，我没有出生在任何英语国家，所以难免会有语法错误，难道就因为这个原因我应该去死吗？如果有语法问题，难道不是更好的选择就是编辑问题吗？此外，你怎么能说“没有研究努力”或“我需要有人为我编写算法”？？？？ 我已经阅读了另一个帖子和一个相当复杂的维基百科关于颜色的文章，我必须要写一篇关于我正在提问的问题的论文吗？ 正如问题中所写，我只是在寻求一些想法，而不是一个完整的算法！ - Flo Schild

我觉得这个问题容易理解且有效。如果我有足够的时间，我会创建一个解决方案。但是请看这个链接：http://www.tannerhelland.com/4435/convert-temperature-rgb-algorithm-code/ - Atle

你们不觉得我们现在可以重新开放这个问题吗？也许它用词不当，但仍然是完全有效和有趣的问题。看起来@GeorgeStocker只是手残误按了__关闭__按钮，而不是它现在被关闭的原因。请记住，我们大多数贡献者并不是英语母语人士，我们可能是理解/纠正这个问题的合适人选。 - rayfranco

Answer 1

你的色彩范围看起来与“HSL颜色空间”中从270º（紫色）在-30ºC到30º（橙色）在+30ºC的“仅色调”扫描相同。

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

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

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

请参见http://jsfiddle.net/V5HyL/。

- Alnitak

---

该项目基于 Webkit，但我想开发一个可以在多个浏览器上使用的库，因此我认为我更喜欢转换为 RGB。无论如何，非常感谢，我将尝试将其集成到我的当前解决方案中，并告诉您我的反馈！ - Flo Schild

我喜欢你的想法，但是你如何从色调计算中获取h、s和l值？另外，t是指摄氏度吗？ - Redtopia

我不知道OP的“t”是什么，但它看起来很可能是摄氏度。我的回答重点是将范围“[-30..+30]”映射到“[270..30]”。S和L都看起来大约在0.7左右。 - Alnitak

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

- Ben

---

谢谢，听起来非常有趣。你可以解释一下你使用的那些常量吗？它是基于梯度值还是任何算法？ - Flo Schild

好的观点。 动力函数中的常数0.35完全是任意的。 这将中间的渐变“压缩”得很好。 h0和h1是色相值（0-360），它们映射到紫色和橙红色（大致如原始问题中所示）。 75和90是颜色的任意饱和度和值值。 换句话说，这些常数仅基于外观美观，而不是任何物理算法。 - Ben

Answer 3

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

您的问题是如何将某个温度以摄氏度表示可视化。没有标准算法来解决这个问题。这取决于设计师如何解决这个任务。

我可能会为每2.5°C或5°C建立一个RGB值数组，然后通过RGB混合处理介于温度值之间的温度值。

- John

---

将色相不同的颜色的RGB值混合在一起往往会产生“浑浊”的混合效果。 - Alnitak

你们两个都是对的，我发现了这些问题，但没有好的感觉去编辑问题，直到它被重新打开！但还是谢谢！我目前使用渐变数组，效果很好，但你必须选择你的颜色步骤，以避免出现“混浊”问题。而且，由于我正在使用LAB颜色空间，所以我可以避免混合问题 - 至少我猜是这样。 - Flo Schild

如果间隔不太大，那么RGB看起来还可以。我准备了一个例子在这里。LAB可能是最好的选择，但性能较差... - John

这就是我在实验室得到的。 即使我并不真正关心这个项目，我也没有看到这个性能技巧，测试一下最后可能会很好。再次感谢！ - Flo Schild

Answer 4

我最近遇到一个难题，需要用时间数据来显示对应的天空颜色。这很困难，以下是我探索的三种方法：

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%混合。

我能在一晚上实现这个选项，结果看起来很棒！虽然耗时，但可行，而且不像你想象的那么麻烦。

3）创建并存储一个包含从渐变中取样的RGB颜色的数组，并针对所有可能的整数（-30到30之间并不是那么多）四舍五入API数据以获得整数值。这可能是最简单的方法。尽管如此，肯定不像选项1那样酷 :)

祝你好运！

- David Hariri

---

第一個選項看起來真的很棒！但我不確定是否理解所有細節，稍後再集中精力研究。目前我正在使用第三個選項，效果比預期的還要好。不過我會花點時間思考一下第一個選項的可行性。謝謝！ - Flo Schild