JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vibrant.js/1.0.0/Vibrant.js"></script>
<img data-src="http://jariz.github.io/vibrant.js/examples/4.jpg" />
<br>
<a class="a_ex">Пример того что хочу чтобы выводилось</a>
<div class="color_block"></div>

CSS

.color_block{
  width: 100%;
  height: 200px;
  display:flex;
  flex-wrap:wrap;
}

.a_ex{
  color: #000;
  font-size:14px;
}

.c_block{
  width:80px;
  height: 80px;
  border:1px solid #000;
  margin: 5px;
}

.c_name{
  border:1px solid #000;
  background: #fff;
}

JavaScript

const colorBlock = document.querySelector('.color_block');
const img = document.querySelector('img');
img.setAttribute('src', img.getAttribute('data-src'));
img.crossOrigin = "Anonymous";
img.addEventListener('load', function() {
  const vibrant = new Vibrant(img);
  const swatches = vibrant.swatches();
	
  let htmlText = '';
  
  for (const swatch of Object.values(swatches)) {
    if (!swatch) continue;
    
    const hex = swatch.getHex();
  	htmlText += `
    <div class="c_block" style="background: ${hex}">
      <p class="c_name">${hex}</p>
    </div>`;
  }
  
  colorBlock.innerHTML = htmlText;
});