計算從綠色到紅色的顏色值

Question

我想根據給定的數字計算顏色值。

0 -> pure red 
100 -> pure green 

example: 75 -> color, which is 75% from red to green. 

我需要這個過期計數器，它顯示適當的顏色，因爲天數倒數。

Answer 1

您確實可以選擇@KamilT提供的解決方案。這種方法（imo）的缺點是中間的顏色（50左右）會變成棕色，與全紅色和綠色相比不太好。

我認爲跟隨色譜，並通過橙色和黃色，而不是那種醜陋的褐色，會更好。

這很容易通過使用HSL值而不是RGB值來實現。如果將基於0到100之間的數字的色相值設置爲0°（紅色）和120°（綠色）之間的值，並將飽和度保持爲100％，並將亮度保持在50％，則應該獲得漂亮的亮色。

我發現了一種RGB和HSL這裏之間進行轉換：HSL to RGB color conversion

而且我寫了一個簡單的函數使用從回答上面的轉換功能來計算你的RGB值：

// convert a number to a color using hsl 
function numberToColorHsl(i) { 
    // as the function expects a value between 0 and 1, and red = 0° and green = 120° 
    // we convert the input to the appropriate hue value 
    var hue = i * 1.2/360; 
    // we convert hsl to rgb (saturation 100%, lightness 50%) 
    var rgb = hslToRgb(hue, 1, .5); 
    // we format to css value and return 
    return 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')'; 
} 

我設置一個小提琴來演示HSL方法和RGB方法之間的區別：http://jsfiddle.net/rE6Rk/1/

更新更多功能的版本：

如果您不想使用從紅色到綠色的範圍，則可以稍微調整上述方法。確定hsl表示中實際顏色的值是hue，因此這是我們需要計算的值。

如果您定義了色調的範圍內，通過提供0和1的值作爲參數，色調值的計算變得基本的數學。看看更新的方法：

function percentageToHsl(percentage, hue0, hue1) { 
    var hue = (percentage * (hue1 - hue0)) + hue0; 
    return 'hsl(' + hue + ', 100%, 50%)'; 
} 

正如你看到的，我改變了API一點。參數如下：

• percentage：顏色的色調值你想得到當percentage是0
• hue1：0和1之間
• hue0值的色調值顏色，你想，當percentage爲1

此外，也不再需要計算RGB值，modern browsers支持HSL值是。

所以現在你可以按如下方式使用方法：

// green(120) to red(0) 
color = percentageToHsl(perc, 120, 0); 

// blue(225) to pink(315) 
color = percentageToHsl(perc, 225, 315); 

// blue (225) to yellow(45 + 360) 
color = percentageToHsl(perc, 225, 405); 

所以，如果你想要去的順時針你必須做出hue0 < hue1。如果你想逆時針轉動，你必須使hue0> hue1。而且，由於這些是度數，所以您可以只添加或減去360來強制方向。你甚至可以使用這種技術多次環繞色相環。

我創建了一個新的小提琴證明：https://jsfiddle.net/r438s65s/

Answer 2

這僅僅是簡單的數學;）

Red = 255 - (255 * (Number/100)) 
Green = 255 * (Number/100) 
Blue = 0 

這就是全部。

Answer 3

答案由Pevara是巨大的。我已經適應了他的jsfiddle我的需要，也許這對別人是太有用：http://jsfiddle.net/rE6Rk/8/

它允許有顏色的不均勻分佈。就我而言，我希望0.5（50）以下的所有東西都是紅色的。 0.75將在紅色和綠色之間。因此，不要使用硬邊界0和1，它們都可以移位。

的變化是在numberToColorHsl（）函數只： *的i是一個浮點0-1代替INT 0-100 *附加PARAMS最小/最大

/** 
* Convert a number to a color using hsl, with range definition. 
* Example: if min/max are 0/1, and i is 0.75, the color is closer to green. 
* Example: if min/max are 0.5/1, and i is 0.75, the color is in the middle between red and green. 
* @param i (floating point, range 0 to 1) 
* param min (floating point, range 0 to 1, all i at and below this is red) 
* param max (floating point, range 0 to 1, all i at and above this is green) 
*/ 
function numberToColorHsl(i, min, max) { 
    var ratio = i; 
    if (min> 0 || max < 1) { 
     if (i < min) { 
      ratio = 0; 
     } else if (i > max) { 
      ratio = 1; 
     } else { 
      var range = max - min; 
      ratio = (i-min)/range; 
     } 
    } 

    // as the function expects a value between 0 and 1, and red = 0° and green = 120° 
    // we convert the input to the appropriate hue value 
    var hue = ratio * 1.2/3.60; 
    //if (minMaxFactor!=1) hue /= minMaxFactor; 
    //console.log(hue); 

    // we convert hsl to rgb (saturation 100%, lightness 50%) 
    var rgb = hslToRgb(hue, 1, .5); 
    // we format to css value and return 
    return 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')'; 
} 

視覺效果解釋它比文字更好。