Javascript - 同じ色の異なる影を生成する

Question

基本色を取り、同じ色の異なる色合いに対応する値の配列を返す関数を呼び出せるようにしたいと考えています。配列には、16進値またはrgba（）値を含めることができます。私は希望の色合いの量を入力することもできるようにしたいと思います。シェードの量は、シェードを増やすためのメトリックとして使用することもできます。たとえば、出力に3種類の色合いが必要だった場合、1番目の色合いは基本色の1/3になりますが、数学的には機能します...さらに、1番目の色合いは100％透明でなければならない場合があります最初のアルファの引数を受け取りたい。私は機能の基本的な論理だと思うものを編成しましたが、数学は私には不明です。

 var buildColorStops = function (baseColor,numberOfValues,initialAlpha) { 
      var b = baseColor; 
      var n = numberOfValues //expected number of colors in the output. If n was 3 results would be [light blue, blue(base), dark blue] (# or rgba will work) 
      var d = 1/n; // if number of values was 5 d would represent 1/5 of the base. 
      var ia = initialAlpha; // some situations may require the first color to be 100% transparent 

      var outputArray = []; 
      var i = 0; 
      while (i < n) { 
       if (i == 0) { 
        //...math on base color & incorporate initial alpha 
        outputArray.push("result of math on base") 
       } 
       else { 
        //...math on base color by incrementing d or 1/n 
        outputArray.push("result of math on base") 
       } 
      } 

      return outputArray; 
     }// end of buildColorStops 

Answer 1

色の比率を同じに保ってシェードを生成することができます。あなたの基本色が(r,g,b)赤、緑、青の値を持っているとします。

したがって、コンポーネント間の比率はr:g:bです。 10シェードを生成したい場合は、シェードが作成されます。

(r/10, g/10, b/10) 
(2*r/10, 2*g/10, 2*b/10) 
(3*r/10, 3*g/10, 3*b/10) 
(4*r/10, 4*g/10, 4*b/10) and so on 

これは、より暗い色合いです。軽い色合い

(11*r/10, 11*g/10, 11*b/10) 
(12*r/10, 12*g/10, 12*b/10) 
(13*r/10, 13*g/10, 13*b/10) and so on 

彼らの値を増加させる美白として255を超えることがないように、Rの値が得られたチェック、G、Bの

。

実際に255を超えることを避けるために、r、g、bのどれが最大であるかをチェックし、その値を使って色合いを生成することができます。

var max = Math.max(r,Math.max(g,b)); 

var step = 255/(max * 10) 
(r * step, g * step, b * step) 
(r * step * 2, g * step * 2, b * step * 2) 
(r * step * 3, g * step * 3, b * step * 3)