Oldnickn

<div class="colorsSelector">
  <div class="colorItem" data-color="blue"></div>
  <div class="colorItem" data-color="white"></div>
  <div class="colorItem" data-color="red"></div>
  <div class="colorItem" data-color="black"></div>
  <div class="colorItem" data-color="white-pure"></div>
  <div class="colorItem" data-color="orange"></div>
  <div class="colorItem" data-color="graphite"></div>
</div>

[data-color="blue"]       { background-color: #325488; }
[data-color="white"]      { background-color: #cfcfcf; }
[data-color="red"]        { background-color: #c64040; }
[data-color="black"]      { background-color: #08090b; }
[data-color="white-pure"] { background-color: #f0f0f0; }
[data-color="orange"]     { background-color: #d87c5a; }
[data-color="graphite"]   { background-color: #7f7f7f; }

const container = document.querySelector('.colorsSelector');
const itemSelector = '.colorItem';
const activeClass = 'colorItem--active';
const img = document.querySelector('.imgHolder img');
const src = color => `//webcademy.ru/files/js2020/solaris/${color}.png`;


// делегированный обработчик клика назначается контейнеру с цветами
container.addEventListener('click', ({ target: { dataset: { color } } }) => {
  if (color) {
    img.src = src(color);
    document.querySelectorAll(itemSelector).forEach(n => {
      n.classList.toggle(activeClass, color === n.dataset.color);
    });
  }
});

// или, каждому цвету обработчик клика назначается индивидуально
const items = container.querySelectorAll(itemSelector);
items.forEach(n => n.addEventListener('click', onClick));

function onClick({ target: t }) {
  img.src = src(t.dataset.color);
  items.forEach(n => n.classList.toggle(activeClass, n === t));
}