4つのストップグラデーションの特定の割合でRGBカラー値を見つける

Question

問題： 私は0％、33％、66％、100％のカラー値を持つ4ストップグラジエントを持っています。この勾配のどの点でも、パーセンテージを使って色の値を調べたいと思います。

私はある種のマルチストップ色相補間が必要だと思いますが、私が最初に頭を下げて自分自身を書き始める前に、単純なJavaScriptの方法があるのだろうかと思っていました。

色は、私が働いて停止します。

//0% 
    var stop1 = { r: 25, g: 47, b: 97 }; 

    //33% 
    var stop2 = { r: 75, g: 183, b: 183 }; 

    //66% 
    var stop3 = { r: 237, g: 120, b: 87 }; 

    //100% 
    var stop4 = { r: 209, g: 74, b: 88 }; 

Answer 1

あなたがステップの間隔のデルタを使用して、右の割合で色を計算することができます。

どのように動作しますか？

例えば、我々は70％の色を探していると最初に、私たちは

[66, 100] 

の間隔を取得後

• パーセントのデルタと左間隔を比率を構築（left）

  70 - 66 => 4 
  

• 右intervaのデルタL及びパーセント（right）

  100 - 70 => 30 
  

• デルタ右及び上記生成された比を有する左間隔（delta）

  100 - 66 => 34 
  

• のは、中間に2色と右の色を計算することが可能です部品。

  (color of left interval * right + color of right interval * left)/delta => color 
  

すべての色のための最後のステップを繰り返し、結果を返します。例えば作業

：

*を示すパーセント値とRGB値を置いて、所定の色を表します。

function getColor(percent) { 
 
    function getInterval(range) { 
 
     function getRatio(color) { 
 
      return Math.floor((colors[range[0]][color] * right + colors[range[1]][color] * left)/delta); 
 
     } 
 

 
     var left = percent - range[0], 
 
      right = range[1] - percent, 
 
      delta = range[1] - range[0]; 
 

 
     return { r: getRatio('r'), g: getRatio('g'), b: getRatio('b') }; 
 
    } 
 

 
    return colors[percent] || getInterval(stops.reduce(function (r, a, i, aa) { 
 
     return a < percent ? [a, aa[i + 1]] : r; 
 
    }, [0, 0])); 
 
} 
 

 
var stops = [0, 33, 66, 100], 
 
    colors = { 0: { r: 25, g: 47, b: 97 }, 33: { r: 75, g: 183, b: 183 }, 66: { r: 237, g: 120, b: 87 }, 100: { r: 209, g: 74, b: 88 } }, 
 
    i, color, rgb; 
 

 
for (i = 0; i <= 100; i++) { 
 
    color = getColor(i), 
 
    rgb = ['r', 'g', 'b'].map(function (k) { return color[k]; }); 
 
    document.body.innerHTML += '<span style="color: #fff; background-color: rgb(' + rgb + ');" title="' + (colors[i] ? '* ' : '') + i + ' % rgb(' + rgb.join(', ') + ')">' + (colors[i] ? '*&nbsp;' : '&nbsp;&nbsp;') + '</span>'; 
 
}

Answer 2

私はまた色で約演奏するためのこの素晴らしい小さなライブラリを見つけました：chroma.js