Desafio - Minha Solução

HTML

    <header>
        <section class="color">
            <button class="button__color black" data-color="black"></button>
            <button class="button__color blue" data-color="blue"></button>
            <button class="button__color pink" data-color="pink"></button>
            <button class="button__color red" data-color="red"></button>
            <button class="button__color white" data-color="white"></button>
            <button class="button__color yellow" data-color="yellow"></button>
        </section>
    </header>

CSS

.color {
    display: flex;
    gap: 32px;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    width: 100%;
}

.button__color {
    height: 16px;
    width: 16px;
    border: 2px black solid;
    border-radius: 16px;
}

.black {
    background-color: black;
}

.blue {
    background-color: blue;
}

.pink {
    background-color: pink;
}

.red {
    background-color: red;
}

.white {
    background-color: white;
}

.yellow {
    background-color: yellow;
}

JS

const cor = document.querySelectorAll("[data-color]");

cor.forEach((elemento) => {
    elemento.addEventListener("click", (evento) => {
        mudarCorRobotron(evento.target.dataset.color)
    });
});

function mudarCorRobotron(cor) {
    const imgRobotron = document.querySelector("#robotron")
    imgRobotron.src = "./img/robotron_" + cor + ".png";
}