緑色から赤色の色の値を計算する

Question

与えられた数に従って色の値を計算したいと思います。

0 -> pure red 
100 -> pure green 

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

期限切れカウンタには、必要な色が日数カウントダウンに表示されます。

Answer 1

実際には、@ KamilTが提供するソリューションに行くことができます。この方法の欠点（imo）は、真ん中（約50）の色があなたの完全な赤と緑に比べて褐色で、それほど素晴らしいものではないということです。

私は、色のスペクトルに従うことと、その醜い茶色の味の代わりに、オレンジと黄色の上を通過する方がはるかに良いと思う。

これは、RGB値ではなくHSL値を使用することで簡単に達成できます。 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] + ')'; 
} 

そしてI HSL法とRGB法との間の相違を実証するためのフィーリングを設定する。http://jsfiddle.net/rE6Rk/1/

更新より汎用性の高いバージョン：

赤から緑の範囲で作業したくない場合は、上記の方法を少し変更することができます。 hsl表現の実際の色を決定する値はなので、これを計算する必要があります。

あなたの色相の範囲を定義する場合は、パラメータとして、0と1の値を提供することで、色相値の計算は、基本的な数学になります。更新されたメソッドを見てください：

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

ご覧のとおり、APIを少し変更しました。

• percentage：：次のようにパラメータがあるpercentageが0
• hue1あるときに、あなたが取得したい色の色相値：
• hue0 0〜1の値の色相値であるとして、あなたが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); 

あなたが時計回りに行きたいのであれば、あなたが< hue1をhue0確認する必要があります。反時計回りにしたい場合は、hue0> hue1とする必要があります。これらは度なので、360を加算または減算するだけで方向を強制できます。このテクニックを使用して、色相サークルを複数回ラップすることさえできます。 Pevaraによってhttps://jsfiddle.net/r438s65s/

Answer 2

これは単純な数学です。）すべてだ

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

。

Answer 3

答えは素晴らしいです：

私は証明するために、新たなフィドルを作成しました。私は自分のニーズに合わせて自分のスタイルを変更しました。多分他の人にとっても役に立ちます。http://jsfiddle.net/rE6Rk/8/

色の分布が不均一です。私の場合、0.5（50）以下のものはすべて赤色にしたいと思っていました。 0.75は赤と緑の中間にあります。したがって、硬い枠線0と1で作業するのではなく、両方をシフトすることができます。私の代わりにビジュアルを説明

/** 
* 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] + ')'; 
} 

最大/最小INT 0-100 * paramsは、追加の浮動小数点0-1ある* ：

変更のみnumberToColorHsl（）関数でありますそれは言葉よりも優れています。