<div class="face"></div>
<button>Change color</button>

:root {
  --hue-color: 40;  
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
}

.face {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: hsl(var(--hue-color), 80%, 50%);
  position: relative;
  margin: 10px 0;
  transition: background-color 0.3s ease-in;
}

const button = document.querySelector('button');
const root = document.documentElement;

button.addEventListener('click', (e) => {
  const x = getComputedStyle(root).getPropertyValue('--hue-color');
  console.log(x)
  const rand = Math.random() * 360;
  root.style.setProperty('--hue-color', rand);
});