HTML: 

<section class="botoes">
                <button class="alterar" data-altera-cor="" value="Azul">Robotron Azul</button>
                <button class="alterar" data-altera-cor="" value="Amarelo">Robotron Amarelo</button>
                <button class="alterar" data-altera-cor="" value="Branco">Robotron Branco</button>
                <button class="alterar" data-altera-cor="" value="Preto">Robotron Preto</button>
                <button class="alterar" data-altera-cor="" value="Rosa">Robotron Rosa</button>
                <button class="alterar" data-altera-cor="" value="Vermelho">Robotron Vermelho</button>
            </section>

CSS:

.botoes {
   position: relative;
   right: 5%;
   bottom: 10%;
   display: flex;
   flex-wrap: wrap;
}

.alterar {
    font-size: 1em;
    text-transform: uppercase;
    padding: 0.2em 1em;
    float: right;
    border: 3px solid var(--main-branco);
    background: var(--main-branco);
    clip-path: polygon(100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 0);
    cursor: pointer;
    margin-bottom: 10px;
    z-index: 2 ;
}

.alterar:hover {
    background: var(--main-preto);
    color: var(--main-branco)
}

javaScript:

const corRobo = document.querySelectorAll('[data-altera-cor]');

corRobo.forEach((elemento) =>{
    elemento.addEventListener('click', () => {
        document.querySelector(".robo").src="img/Robotron 2000 - " + elemento.value + ".png";
    })
})