Easy Random Color
document.body.innerHTML += 'click to randomize background color';
document.addEventListener('click', () => {
const hue = Math.random() * 360;
document.body.style.background = `hsl(${hue}deg, 50%, 50%)`;
});
One way to generate a random color is to randomize the hue
argument of the css hsl
. This value is in degrees 0-360 (colorwheel). The other arguments can be randomized as well if you need random saturation and lightness… like this:
document.body.innerHTML += 'click to randomize background color';
document.addEventListener('click', () => {
const hue = Math.random() * 360;
const saturation = Math.random() * 100;
const lightness = Math.random() * 100;
document.body.style.background = `hsl(${hue}deg, ${saturation}%, ${lightness}%)`;
});