Preview

HTML

     <section class="robotron">
             <img  onclick="trocar()"  class="robo" src="./img/robô-img/rosa.png" alt="Robotron" id="clickImagem">
            <figcaption class="titulo">ROBOTRON <br>2000</figcaption>
        </section>

          <a onclick="trocar()" id="click" href="#"> Mudar cor do Robô </a> 

CSS

.robotron{
    cursor: pointer; 
}
#click{
  text-decoration: none;
  white-space: pre-wrap;
  width:1px;
  word-wrap: break-word;
  border-radius: 7px;
  color: white;
  padding:21px 26px;
  text-align:center;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 9px #999;
  background: rgba(0, 0, 0, 0.6);
  clip-path: polygon( calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 30px 100%, 0 calc(100% - 30px), 0 30px, 30px 0 );
  height: 100%;
  border-left: 5px solid var(--main-cinza);
}

Javascript

var imagens = [
    "amarelo.png",
    "azul.png",
    "branco.png",
    "preto.png",
    "rosa.png",
    "vermelho.png"
];

function trocar() {
    var img = document.getElementById("clickImagem");
    var img_src = img.src;

    var img_idx = imagens.findIndex(item => item.includes(img_src.split('/')[img_src.split('/').length-1]));

    var posicao = img_idx == imagens.length - 1 ? 0 : img_idx + 1
    var nome_imagem = imagens[posicao]

    img.src = "./img/robô-img/"+nome_imagem
}