Jeito FACIL e PRATICO para quem ficou com dúvida.

ARQUIVO INDEX.HTML

1° Criei os Botões :

<section class="botoes">
                <div class="div-botoes">
                    <button class="alterarone" onclick="trocaImagem('azul')">Azul</button>
                    <button class="alterartwo" onclick="trocaImagem('amarelo')">Amarelo</button>
                    <button class="alterarthree" onclick="trocaImagem('branco')">Branco</button>
                    <button class="alterarfour" onclick="trocaImagem('preto')">Preto</button>
                    <button class="alterarfive" onclick="trocaImagem('rosa')">Rosa</button>
                    <button class="alterarsix" onclick="trocaImagem('vermelho')">Vermelho</button>
                </div>
            </section>

2° Mantive a tag e acrescentei uma imagem padrão.

        <section class="robotron">
            <img class="robo" alt="Robotron" id="robotron" src="../-robotron-2000-projeto_inicial/img/robo-amarelo.png">
            <figcaption class="titulo">ROBOTRON <br>2000</figcaption>
        </section>

3°Criei um FUNCTION no arquivo Main.Js.

    function trocaImagem(alterar){
    const imagemRobo = document.querySelector('#robotron');    //busca a imagem.
    imagemRobo.src=`../-robotron-2000-projeto_inicial/img/robo-${alterar}.png`
    }

4°Estilizei as cores dos Botões no arquivo STYLE.CSS

.alterarone {
    color: blue;
}
.alterartwo {
    color:rgb(189, 189, 22);
}
.alterarthree {
    color: rgba(114, 104, 104, 0.644);
}
.alterarfour {
    color: black;
}
.alterarfive {
    color: rgb(182, 75, 93);
}
.alterarsix {
    color: red;
}

5° Alterei a posição dos meu botões para ficar agradável.

.div-botoes {
    display: flex;
    flex-direction: row-reverse;
}