Массив цветов - вместо строк пусть будут объекты, содержащие два свойства, цвет и url картинки:
const colors = [
{ color: '...', image: '...' },
{ color: '...', image: '...' },
...
];
Рендеринг палитры - заменяете
background-color на
background-image:
const colorsItems = colors
.map(n => `
<button
style="background-image: url(${n.image})"
class="palette-button"
data-color="${n.color}"
></button>`)
.join('');
Стилизация
.palette-button - приводите в порядок background:
background-position: center;
background-size: contain;
background-repeat: no-repeat;
