JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pic"></div>
<div id="colors"></div>

CSS

#pic {
  width: 300px;
  height: 300px;
  background-position: center center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-image: url("https://vignette.wikia.nocookie.net/mikumikudance/images/f/f9/OtomachiUnaSpicy_-_kuuwanko%26Rennya.png/revision/latest/scale-to-width-down/340?cb=20161230145920");
  background-blend-mode: multiply;
}
#colors {
  display: flex;
}
.color {
  width: 30px;
  height: 30px;
  margin: 3px;
  border-radius: 50%;
}

JavaScript

const colors = document.getElementById(`colors`);
const pic = document.getElementById(`pic`);

Array(10).fill(0).forEach((el, index) => {
  const hue = `${index * 36}deg`;
   const color = document.createElement(`div`);
  color.classList.add(`color`);
  color.style.backgroundColor=`hsl(${hue}, 100%, 50%)`;
  colors.appendChild(color);
  
  color.addEventListener(`mouseenter`, () => (pic.style.backgroundColor=`hsl(${hue}, 100%, 50%)`));
  color.addEventListener(`mouseleave`, () => (pic.style.backgroundColor=`white`));
});