設置基於室外溫度的背景顏色

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