Solução do exercício

Primeiro criei os botões no cabeçalho

    <header class="botoes">
        <p class="botoes-paragrafo">Escolha a cor do seu ROBOTRON</p>
        <button class="botoes-cor" data-botao="amarelo">Amarelo</button>
        <button class="botoes-cor" data-botao="azul">Azul</button>
        <button class="botoes-cor" data-botao="branco">Branco</button>
        <button class="botoes-cor" data-botao="preto">Preto</button>
        <button class="botoes-cor" data-botao="rosa">Rosa</button>
        <button class="botoes-cor" data-botao="vermelho">Vermelho</button>
    </header>

Estilizei no CSS

.botoes{
    margin: 1rem;
}

.botoes-paragrafo{
    font-size: 2rem;
    margin-left: 1rem;

}

.botoes-cor{
    text-transform: uppercase;
    font-weight: bold;
    margin-left: 1rem;
    padding: 0.2em 1em;
    border: 3px solid var(--main-branco);
    background: var(--main-branco);
    clip-path: polygon(100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
    cursor: pointer;
}

.botoes-cor:hover:nth-child(criei uma para cada filho){
    font-size: .9rem;
    transition: .3s;
    background-color: var(--main-amarelo);
    color: var(--main-branco)
}

No JS utilizei o data-attribute

const botao = document.querySelectorAll("[data-botao");

botao.forEach((elemento) =>{
    elemento.addEventListener("click", (evento) =>{
        cor = evento.target.dataset.botao;
        document.querySelector(".robo").src="img/robotron_" + cor + ".png";
    })
})

Resultado: