Criei uma const chamada de mudaCor que busca cada elemento com o atributo data-cor, depois através do método forEach coloquei um escutador de evento de click que a cada click em um botão colocasse a cor do robô correspondente.

HTML

<section class="robotron">
            <img class="robo" id="robotron" src="img/Amarelo.png" alt="Robotron">
            <figcaption class="titulo">ROBOTRON<br>2000</figcaption>
            <section id="botoes">
                <button class="alterar1" data-cor="" value="Azul">Robotron Azul</button>
                <button class="alterar2" data-cor="" value="Amarelo">Robotron Amarelo</button>
                <button class="alterar3" data-cor="" value="Rosa">Robotron Rosa</button>
                <button class="alterar4" data-cor="" value="Vermelho">Robotron Vermelho</button>
            </section>
</section>

CSS

#botoes {
    position: relative;
    right: 8%;
    bottom: 11%;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
 }
 .alterar1 {
    color: var(--main-branco);
     font-size: 1.2em;
     text-transform: capitalize;
     text-align: center;
     padding: 0.2em 1em;
     float: left;
     border: 3px solid var(--azul);
     border-radius: 20px;
     background: var(--azul);
     cursor: pointer;
     margin-bottom: 10px;
     z-index: 2;
 }
 .alterar2 {
    color: var(--main-branco);
    font-size: 1.2em;
    text-transform: capitalize;
    text-align: center;
    padding: 0.2em 1em;
    float: left;
    border: 3px solid var(--amarelo);
    border-radius: 20px;
    background: var(--amarelo);
    cursor: pointer;
    margin-bottom: 10px;
    z-index: 2 ;
}
.alterar3 {
    color: var(--main-branco);
    font-size: 1.2em;
    text-transform: capitalize;
    text-align: center;
    padding: 0.2em 1em;
    float: left;
    border: 3px solid var(--rosa);
    border-radius: 20px;
    background: var(--rosa);
    cursor: pointer;
    margin-bottom: 10px;
    z-index: 2 ;
}
.alterar4 {
    color: var(--main-branco);
    font-size: 1.2em;
    text-transform: capitalize;
    text-align: center;
    padding: 0.2em 1em;
    float: left;
    border: 3px solid var(--vermelho);
    border-radius: 20px;
    background: var(--vermelho);
    cursor: pointer;
    margin-bottom: 10px;
    z-index: 2 ;
}
 .alterar1:hover {
     background: var(--main-cinza);
     color: var(--main-preto)
 }
 .alterar2:hover {
    background: var(--main-cinza);
    color: var(--main-preto)
}
.alterar3:hover {
    background: var(--main-cinza);
    color: var(--main-preto)
}
.alterar4:hover {
    background: var(--main-cinza);
    color: var(--main-preto)
}

JS

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

mudaCor.forEach((elemento) =>{
    elemento.addEventListener("click", () => {
         document.querySelector("#robotron").src = "img/" + elemento.value + ".png";
    })
})