JavascriptまたはjQueryで色の陰影を取得しますか？

Question

JavascriptまたはjQueryには、すべての色合いを取得してから値をarrayに戻す方法がありますか？どうもありがとうございました。

のような何か：

Answer 1

は、あなたがこのような何かを意味していますか？

var r = 40 % 256; 
 
var g = 40 % 256; 
 
var b = 50 % 256; 
 
var result = []; 
 

 
for(var i = 0; i < 7; i++) 
 
{ 
 
    r += 33; 
 
    g += 33; 
 
    b += 33; 
 
    result.push(r + "," + g + "," + b); 
 
} 
 
    
 
console.log(result);

Answer 2

In color theory、あなたはその明るさを軽減する必要があり、あなたはその明るさを増やす必要があり、色のtintを取得したい場合は、色のshadeを取得します。色モデルの変換のために私が以前作ったJavaScriptclassに書き直しました。 This utilityは、HSLカラーモデルで作業することを可能にします。 HSL色を使用すると、ベースカラーを取り、その明るさや彩度を変更することができ、ここであなたはあなたにその可能性を示すために2つの例を持っていて、そこにあなたの質問に対する答えを見つけることができます：

は、明度と彩度を変更HSL色上記コードの

//---Variables 
var doc = document, 
    container = doc.querySelector("#container"), 
    converter = new ColorConverter(), 
    hsl = null, 
    rgb = null, 
    code = null, 
    box = null; 

//---Create elements 
for (var row = 0; row < 10; row++) { 

    for (var col = 0; col < 10; col++) { 

     hsl = { 
      "h": 25, 
      "s": (row * 10) + "%", 
      "l": (col * 5 + 30) + "%" 
     }; 

     rgb = converter.toHEX(hsl, true); 
     code = converter.toRGB(hsl); 
     box = doc.createElement("div"); 
     box.style.background = rgb; 
     box.innerHTML = "R:" + code.r + "<br>G:" + code.g + "<br>B:" + code.b; 
     container.appendChild(box); 

    } 

} 

Here you have the result

。

変更複数HSL色の飽和上記コードの

//---Variables 
var doc = document, 
    container = doc.querySelector("#container"), 
    converter = new ColorConverter(), 
    colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF"], 
    hsl = null, 
    step = null, 
    rgb = null, 
    cmyk = null; 

for (var row = 0; row < 5; row++) { 

    hsl = converter.toHSL(colors[row]); 
    step = hsl.s/4; 

    for (var col = 0; col < 5; col++) { 

     rgb = converter.toHEX(hsl, true); 
     cmyk = converter.toCMYK(hsl); 

     box = doc.createElement("div"); 
     box.style.background = rgb; 
     box.innerHTML = "C:" + cmyk.c + "<br>M:" + cmyk.m + "<br>Y:" + cmyk.y + "<br>K:" + cmyk.k; 
     container.appendChild(box); 

     hsl.s -= step; 

    } 

} 

Here you have the result。