const elements = document.querySelectorAll('#elements > div') for (let i = 0; i < elements.length; i++) { const element = elements[i]; const saturation = "85%"; const lightness = "70%" // The magic piece of code const hue = i * 137; const hueMod360 = hue % 360; element.style.backgroundColor = `hsl(${hueMod360}, ${saturation}, ${lightness})` element.innerText = `Value: ${hue}\nHue: ${hueMod360}` }
<div id="elements"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
div { display: inline-block; min-height: 100px; min-width: 40px; }