const bg = document.querySelector(".bg");
const circles = document.querySelectorAll(".circle");

circles.forEach(circle => circle.addEventListener("mouseenter", (e) => {
  const style = getComputedStyle(e.target);
  const backgroundColor = style.backgroundColor;

  bg.style.backgroundColor = backgroundColor;
}))

.bg p {
  opacity: 0;
}

.red.circle:hover ~ .bg .red {
  background-color: red;
  opacity: 1;
}

...