私はランダムな色を生成するには、このコードを持った瞬間にランダムな色合いの色

Question

を生成します。

let color = Math.floor(Math.random() * 16777216).toString(16); 
color = '#000000'.slice(0, -color.length) + color; 
department.color = color; 

しかし、私が欲しいことは、ランダムな「色合い」カラーをgenertaeすることですが、私はそれを作るために/変更を何を追加する必要があります作業...？

Answer 1

あなたの色にhsl()をちょうど使用できる場合は、それが最も簡単です。色相をランダムな値に設定し、彩度と明度を一定（または小さな範囲）に設定することができます。

rgb文字列が必要な場合は、標準HSL-> RGB変換のhereなどを使用して、rgb文字列を作成できます。

let [sat, lightness] = [.6, .8] 
 
let container = document.getElementById("colors") 
 
for (let i = 0; i < 12; i++) { 
 
    let hue = Math.random() 
 
    let block = document.createElement('div'); 
 
    block.className = 'colorbrick'; 
 
    block.style.backgroundColor = hslToRgb(hue, sat,lightness); 
 
    container.appendChild(block) 
 
} 
 

 
function hslToRgb(h, s, l) { 
 
    let r, g, b; 
 
    if (s == 0) { 
 
    r = g = b = l; 
 
    } else { 
 
    function hue2rgb(p, q, t) { 
 
     if (t < 0) t += 1; 
 
     if (t > 1) t -= 1; 
 
     if (t < 1/6) return p + (q - p) * 6 * t; 
 
     if (t < 1/2) return q; 
 
     if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; 
 
     return p; 
 
    } 
 
    var q = l < 0.5 ? l * (1 + s) : l + s - l * s; 
 
    var p = 2 * l - q; 
 
    r = hue2rgb(p, q, h + 1/3); 
 
    g = hue2rgb(p, q, h); 
 
    b = hue2rgb(p, q, h - 1/3); 
 
    } 
 
    return "#" + [r * 255, g * 255, b * 255].map(c => Math.floor(c).toString(16)).join(''); 
 
};

.colorbrick { 
 
    display: inline-block; 
 
    width: 80px; 
 
    height: 80px; 
 
    margin: 6px; 
 
}

<div id="colors"> 
 
</div>