JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="colorful">
Text
</div>
</body>

JavaScript

elem = document.getElementById("colorful");
var currentHue = 120;
//elem.style.background="hsl(120,100%,50%)";
elem.onmouseover = function() {		
    minDistance = 50;
    range = 360- 2* minDistance;
    rnd = Math.floor(Math.random()*range);
    currentHue = (currentHue+minDistance+rnd)%360;
    console.log(currentHue);
    elem.style.background = "hsl("+currentHue+",100%,50%)";
}